作者：薛薛Sying | 来源：互联网 | 2023-05-17 19:40
Ok,soIlltrytobeasdescriptiveaspossible.好的,所以我会尝试尽可能地描述性。Imworkingonaprojectfora
Ok, so I'll try to be as descriptive as possible.
好的,所以我会尝试尽可能地描述性。
I'm working on a project for a client that requires a jibjab-style masking feature of an uploaded image.
我正在为一个客户开发一个项目,该项目需要上传图像的jibjab风格的屏蔽功能。
I would like to be able to generate a database-storable object that contains anchor/control positions of a bezier shape, so I can pull it out later and re-mask the object. This all is pretty easy to do, except for one catch : I need to create the bezier object from a user-drawn outline.
我希望能够生成一个数据库可存储的对象,其中包含贝塞尔曲线形状的锚点/控制位置,因此我可以稍后将其拉出并重新屏蔽该对象。这一切都很容易做到,除了一个问题:我需要从用户绘制的轮廓创建贝塞尔对象。
So far, here's how I imagine the process going:
到目前为止,这是我想象的过程:
on mouse down, create a new sprite, beginFill, and moveTo mouse position.
在鼠标按下时,创建一个新的精灵,beginFill和moveTo鼠标位置。
on mouse move, lineTo an XY coordinate.
在鼠标移动时,lineTo为XY坐标。
on mouse up, endFill.
在鼠标上,endFill。
This all works just great. I could just store the info here, but I would be looking at a GIGANTIC object full of tons of pretty useless x/y coordinates, and no way to really make fine-tuning changes outside of putting handles on every pixel. (I may as well give the end user a pencil tool...)
一切都很好。我可以在这里存储信息,但我会看到一个充满了大量相当无用的x / y坐标的GIGANTIC对象,并且无法在每个像素上放置句柄之外进行微调。 (我也可以给最终用户一个铅笔工具......)
Here's what I'm thinking as far as bezier curve calculation goes :
就贝塞尔曲线计算而言,这就是我的想法:
1: Figure out when I need to start a new curve, and track the xy of the pixel on this interval. I'm imagining this being just a pixel count, maybe just increment a count variable per mouse move and make a new one every x pixels. The issue here is some curves would be inaccurate, and others unnecessary, but I really just need a general area, not an exact representation, so it could work. I'd be happier with something a little smarter though.
1:弄清楚何时我需要开始一条新曲线,并在此间隔内跟踪像素的xy。我想象这只是一个像素数,可能只是每个鼠标移动增加一个计数变量,每x个像素创建一个新的。这里的问题是一些曲线是不准确的,而其他曲线是不必要的,但我真的只需要一个通用区域,而不是一个精确的表示,所以它可以工作。尽管如此,我会更开心。
2: take each new x/y, store it as an anchor, and figure out where a control would go to make the line curve between this and the last anchor. this is where I get really hung up. I'm sure someone has done this in flash, but no amount of googling can seem to help me out with the way to get this done. I've done a lot of sketching and what little math I can wrap my brain around, but can't seem to figure out a way of converting pixels to beziers.
2:获取每个新的x / y,将其存储为锚点,并找出控件将在何处和最后一个锚点之间建立线条曲线。这是我真正挂断的地方。我敢肯定有人在flash中做过这个,但谷歌搜索的数量似乎无法帮助我完成这项工作。我已经做了很多素描,我可以用很少的数学来包裹我的大脑,但似乎无法找到一种将像素转换为beziers的方法。
Is this possible? All I really need is something that will get close to the same shape. I'm thinking about maybe only placing anchors when the angle of the next pixel is beyond 180 degrees in relation to the current line or something, and just grabbing the edge of the arc between these changes, but no matter how hard I try, I can't seem to figure out how to get this working!
这可能吗?我真正需要的是接近相同形状的东西。我想也许只有当下一个像素的角度相对于当前线或者某个东西超过180度时放置锚点,并且只是在这些变化之间抓住弧的边缘,但无论我怎么努力,我似乎无法弄清楚如何让这个工作!
Thanks for your help, I'll be sure to post my progress here as I go, I think this could be really useful in many applications, as long as it's actually feasible...
感谢您的帮助,我一定会在这里发布我的进展,我认为这在许多应用中非常有用,只要它实际上是可行的......
Jesse
3 个解决方案
Thanks for the answers, although I guess I probably should be more specific about the application, I'm really only needing an outline for a mask, so converting images to vectors or polygons, despite how cool that is, doesn't really fix my issue. The linear least squares algorithm is mega cool, I think this might be closer to what I'm looking for.
谢谢你的答案,虽然我想我可能应该更加具体的应用程序,我真的只需要一个掩码的轮廓,所以将图像转换为矢量或多边形,尽管有多酷,但并没有真正修复我的问题。线性最小二乘算法非常酷,我想这可能更接近我正在寻找的东西。
I have a basic workaround going right now, I'm just counting mouse moves, then every X (playing with it to get most desirable curve) moves, I grab the xy position. then, I take every other stored xy, and turn it into an anchor, the remaining xys are turned into controls. This is producing somewhat desirable results, but has some minor issues, in that the speed at which the mask is drawn effects the number of handles, and it's really just getting a general area, not a precise fit. Interestingly, users seem to draw slower for more precise shapes, so this solution works a lot better than I had imagined, but it's not as nice as it could be. This will work for the client, so although there's no reason to pursue it further, I like learning new things, and will spend some off the clock time looking into linear least equations and seeing if I can drum up a class that will do these computations for me. If anyone runs across some AS3 code for this type of thing, or would like some of mine, let me know, this is an interesting puzzle.
我现在有一个基本的解决方法,我只是计算鼠标移动,然后每个X(用它来获得最理想的曲线)移动,我抓住xy位置。然后,我把所有其他存储的xy,并把它变成一个锚,其余的xys变成控件。这产生了一些令人满意的结果,但是有一些小问题,因为绘制蒙版的速度会影响手柄的数量,而且它实际上只是获得一般区域,而不是精确配合。有趣的是,用户似乎为更精确的形状画得更慢,所以这个解决方案比我想象的要好很多,但它并不像它想象的那么好。这对客户来说很有用,所以虽然没有理由进一步追求它,但我喜欢学习新东西,并会花一些时间来研究线性最小方程,看看我是否可以鼓励一个可以进行这些计算的课程。为了我。如果有人为这类事情运行某些AS3代码,或者想要我的某些东西,请告诉我,这是一个有趣的难题。
京公网安备 11010802041100号