Question

我在动力学js中制作了画布形状（正方形），每个顶点上有4个控制点。用户可以点击并拖动这些控制点，并以他/她喜欢的方式扭曲形状。我还尝试通过添加额外的锚点并将它们插入Bezier曲线，在每一行的中点添加控制点。这个小提琴是http://jsfiddle.net/Lucy1/opsy1pn9/4/

相应的JS代码是

   var room = new Kinetic.Shape({
    x: 0,
    y: 0,
    width: w,
    height: h,
    stroke: "blue",
    fill: 'red',
    drawFunc: function (context) {
        var x = this.x();
        var y = this.y();
        var w = this.width();
        var h = this.height();
        var tlX = this.anchorTL.x();
        var tlY = this.anchorTL.y();
        context.beginPath();
        context.moveTo(tlX, tlY);
        // top
        context.bezierCurveTo(x + w / 3, y, this.anchorTM.x(), this.anchorTM.y(), this.anchorTR.x(), this.anchorTR.y());
        // right
        context.bezierCurveTo(x + w, y + h / 3, this.anchorRM.x(), this.anchorRM.y(), this.anchorBR.x(), this.anchorBR.y());
        // bottom
        context.bezierCurveTo(x + w * 2 / 3, y + h, this.anchorBM.x(), this.anchorBM.y(), this.anchorBL.x(), this.anchorBL.y());
        // left
        context.bezierCurveTo(x, y + h * 2 / 3, this.anchorLM.x(), this.anchorLM.y(), tlX, tlY);

        context.closePath();
        context.fillStrokeShape(this);
    }
});

g.add(room);

room.anchorTR = makeAnchor(w, 0, g);
room.anchorBR = makeAnchor(w, h, g);
room.anchorBL = makeAnchor(0, h, g);
room.anchorTL = makeAnchor(0, 0, g);

room.anchorTM = makeAnchor(w/2,0,g);
room.anchorRM = makeAnchor(w,h/2,g);
room.anchorLM = makeAnchor(0,h/2,g);
room.anchorBM = makeAnchor(w/2,h,g);

layer.draw();
}

我面临的问题是，中点控制点不会像位于顶点的控制点一样移动。请帮助。

Answer 1

在查看帖子的历史记录时，您之前使用的是Cubic Bezier曲线。

每条贝塞尔曲线都有4个控制点，因此您需要4个锚点 - 而不是3个，如图所示。控制点为：（1）起点（角点）（2）影响起点的中点（3）影响终点（4）终点（角点）的中点。

但是你的小提琴只在角落之间的曲线上使用了一个控制点。这表示二次曲线而不是三次贝塞尔曲线。

每个二次曲线都有3个控制点所以你需要3个锚点，就像你的小提琴一样。控制点为：（1）起点（角点）（2）影响曲线（3）终点（角点）的中间控制点。

因此，如果您希望用户拖动二次曲线来操纵该曲线，则可以使用此数学近似得到的中间二次控制点：

var controlPointX = 2*mouseX -startpointX/2 -endpoinX/2;
var controlPointY = 2*mouseY -startpointY/2 -endpointY/2;

这是一个让用户拖动调整二次曲线的演示：

http://jsfiddle.net/m1erickson/f4ag0myj/

画布形状的控制点

1 个答案: