画布形状中的控制点 [英] Control Points in Canvas shape

问题描述

我用动力学js制作了画布Shapes(squares)，每个顶点上都有4个控制点，用户可以单击并拖动这些控制点并按自己的喜好变形形状.我还尝试通过添加其他锚点并将其插入Bezier曲线来在每条线的中点添加控制点.js小提琴是

I have made canvas Shapes(squares) in kinetic js having 4 control points on each of their vertices.A user can click and drag these control points and distort the shape any way he/she pleases. I also tried adding control points in the mid-point of each line by adding additional anchors and plugging them into the Bezier Curve..The js fiddle is 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();
}

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

The problem i am facing is that the mid-point control points are not moving with the line like the control points situated at the vertex..Please Help.

推荐答案

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

In looking at the history of your posts, you have previously been using Cubic Bezier Curves.

每个Bezier曲线都有4个控制点，因此您需要4个锚点，而不是您显示的3个.控制点是:(1)起点(角)(2)影响起点的中点(3)影响终点的中点(4)终点(角).

Each Bezier curve has 4 control points so you need 4 anchors--not 3 as you show. The control points are: (1) starting point (a corner) (2) mid point influencing the starting point (3) mid point influencing the ending point (4) ending point (a corner).

但是您的小提琴只在拐角之间的曲线上使用了一个控制点.这表明是二次曲线，而不是三次贝塞尔曲线.

But your fiddle uses just one control point on your curve between the corners. This indicates a Quadratic Curve instead of a Cubic Bezier Curve.

每条二次曲线都有3个控制点，因此您需要在小提琴中使用3个锚点.控制点是:(1)起点(拐角)(2)影响曲线的中间控制点(3)终点(拐角).

Each Quadratic curve has 3 control points so you need 3 anchors as in your fiddle. The control points are: (1) starting point (a corner) (2) middle control point influencing the curve (3) ending point (a corner).

因此，如果相反，您希望用户在二次曲线上拖动以操纵该曲线，则可以使用以下数学公式来近似得出最终的中间二次控制点:

So if instead you want the user to drag on a quadratic curve to manipulate that curve, you can approximate the resulting middle quadratic control point using this math:

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

以下是一个演示，用户可以拖动它来调整二次曲线:

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

这篇关于画布形状中的控制点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！