KineticJS：对于随着流动而变宽的贝塞尔曲线 - 如何添加圆角？答案

【问题标题】：KineticJS: For a Bezier Curve that Widens as it Flows - How to Add Rounded Corners?KineticJS：对于随着流动而变宽的贝塞尔曲线 - 如何添加圆角？
【发布时间】：2013-10-06 18:43:03
【问题描述】：

我正在使用 KineticJS 绘制一条随着流动而变宽的贝塞尔曲线。这是一个例子：

flat http://www.market-research-services.com/starpowermedia/for_distribution/bezier-curve-with-flat-end.png

在宽端给它圆角的一些可能方法是什么？例如：

rounded http://www.market-research-services.com/starpowermedia/for_distribution/bezier-curve-with-rounded-end.jpg

非常感谢大家提供任何信息。

作为参考，这是我目前正在使用的代码：

//based on: http://stackoverflow.com/questions/8325680/how-to-draw-a-bezier-curve-with-variable-thickness-on-an-html-canvas                
//draw a bezier curve that gets larger as it flows
function plotFlow(centerLeft, centerRight, thicknessLeft, thicknessRight, color, desiredWidth) {
    var bezierLayer = mainLayer.getAttrs().bezierLayer;
    var context = bezierLayer.getContext();
    var leftUpper = {x: centerLeft.x, y: centerLeft.y - thicknessLeft / 2};
    var leftLower = {x: centerLeft.x, y: leftUpper.y + thicknessLeft};
    var rightUpper = {x: centerRight.x, y: centerRight.y - thicknessRight / 2};
    var rightLower = {x: centerRight.x, y: rightUpper.y + thicknessRight};

    var center = (centerRight.x + centerLeft.x) / 2;
    var cp1Upper = {x: center, y: leftUpper.y};
    var cp2Upper = {x: center, y: rightUpper.y};
    var cp1Lower = {x: center, y: rightLower.y};
    var cp2Lower = {x: center, y: leftLower.y};

    var bezierCurve = new Kinetic.Shape({
        drawFunc: function(canvas) {
            var context = canvas.getContext('2d');
            context.fillStyle = this.getFill();
            context.beginPath();
            context.moveTo(leftUpper.x, leftUpper.y);
            context.bezierCurveTo(cp1Upper.x, cp1Upper.y, cp2Upper.x, cp2Upper.y, rightUpper.x, rightUpper.y);
            context.lineTo(rightLower.x, rightLower.y);
            context.bezierCurveTo(cp1Lower.x, cp1Lower.y, cp2Lower.x, cp2Lower.y, leftLower.x, leftLower.y);
            context.lineTo(leftUpper.x, leftUpper.y);
            context.fill();
            canvas.stroke(this);

        },
        fill: color,
        stroke: color,
        strokeWidth: 2
    });

    bezierCurve.setAttrs({'color': color, 'leftUpper': leftUpper, 'leftLower': leftLower, 'rightUpper': rightUpper, 'rightLower': rightLower, 'cp1Upper': cp1Upper, 'cp2Upper': cp2Upper, 'cp1Lower': cp1Lower, 'cp2Lower': cp2Lower});

    bezierLayer.add(bezierCurve);
}

【问题讨论】：

标签： canvas kineticjs shapes bezier

【解决方案1】：

是的。

给定 rightUpper 和 rightLower 之间的线段（称为 UL）。
找到 UL 的中点。
求 UL 的斜率。
从 UL 的中点垂直延伸一条线。
从 rightUpper 到 rightLower 绘制一个 context.quadraticCurveTo，控制点位于垂线上（垂线上越远，曲线越尖）。
或者，您可以绘制 bezierCurveTo。只需确保 2 个控制点与 UL 线等距，以避免出现不平衡曲线。

使用二次曲线或贝塞尔曲线，确保控制点非常接近 UL。距离越远，末端就越能得到完整的曲线，而不是圆角。

【讨论】：