Bezier Handles保持半径和对称但不是长度

时间:2012-12-09 19:30:00

标签: javascript bezier

我在Javascript中使用一些bezier曲线构建Bezier曲线。 我可以移动手柄,它们保持对称。我是通过先计算来做到的 Beziér上Handle和Point之间的距离。然后我比较距离 在两个句柄中,计算一个乘数并将其应用于未拖动 处理。这适用于保持对称性。

但我希望实现未拖动手柄的长度保持不变。

http://cl.ly/image/0c1z00131m2y(解释我的意思的小图片)。

我目前用于计算运动的代码是:

    dx = Math.abs(drag.x - point.p[(draggedItemIndex)/2].x);
    dy = Math.abs(drag.y - point.p[(draggedItemIndex)/2].y);
    dx2 = Math.abs(point.cp[draggedItemIndex-1].x - point.p[draggedItemIndex/2].x);
    dy2 = Math.abs(point.cp[draggedItemIndex-1].y - point.p[draggedItemIndex/2].y);

    dxdx = dx2/dx;
    dydy = dy2/dy;

    point.cp[draggedItemIndex-1].x -= dragX*dxdx;
    point.cp[draggedItemIndex-1].y -= dragY*dydy;

感谢您的回答。

1 个答案:

答案 0 :(得分:0)

我现在正在进行ciruclar计算。

    //Circle Center Point
                cx = point.p[(draggedItemIndex)/2].x;
                cy = point.p[(draggedItemIndex)/2].y;

                //Dragged Point Position (To Circle Origin)
                x1 = drag.x - cx;
                y1 = drag.y - cy;

                //Mirrored Point Position (To Circle Origin)
                x2 = point.cp[draggedItemIndex-1].x - cx;
                y2 = point.cp[draggedItemIndex-1].y - cy;

                //Angle Dragged Point
                a1 = Math.atan2(-y1,x1)*(180/Math.PI);

                //Mirrored Angle
                a2 = (a1-180)*(Math.PI/180)*(-1);

                //Mirrored Point Radius
                r = Math.sqrt(Math.pow(x2, 2)+Math.pow(y2, 2));

                //Apply new Position to Point
                point.cp[draggedItemIndex-1].x = cx + r * Math.cos(a2);
                point.cp[draggedItemIndex-1].y = cy + r * Math.sin(a2);