0

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

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

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

四舍五入 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);
}
4

1 回答 1

1

是的。

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

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

于 2013-10-06T19:13:54.433 回答