画布形状的控制点答案

【问题标题】：Control Points in Canvas shape画布形状的控制点
【发布时间】：2014-12-01 18:15:34
【问题描述】：

我在动力学 js 中制作了画布形状（正方形），每个顶点上有 4 个控制点。用户可以单击并拖动这些控制点，并以任何他/她喜欢的方式扭曲形状。我还尝试通过添加额外的锚点并将它们插入贝塞尔曲线来在每条线的中点添加控制点。js小提琴是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();
}

我面临的问题是中点控制点没有像位于顶点的控制点那样随线移动..请帮助。

【问题讨论】：

你的意思是你的问题是控制点不在曲线上？根据定义，在贝塞尔曲线中，控制点在曲线之外，因此得名。只有在直线的特殊情况下，控制点才在曲线上。
( 请注意您的应用程序有错误，您似乎认为 4 个角将始终形成一个矩形。使用这个简化版本，处理点更加直观：jsfiddle.net/gamealchemist/opsy1pn9/5（我只有两个贝塞尔曲线曲线控制点作为中间锚））
在你的 js fiddle 链接中，控制点在曲线之外......知道如何将它们像顶点控制点一样放在曲线上？？？
数学问题是：如何构建贝塞尔曲线的两个控制点，使中间的锚点在生成的贝塞尔曲线上。这有点数学......希望是S.O.会员会有一个想法...
S.O. = 堆栈溢出。

标签： javascript drag-and-drop kineticjs

【解决方案1】：

在查看您的帖子历史记录时，您之前一直在使用三次贝塞尔曲线。

每条贝塞尔曲线都有 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/

【讨论】：