如何在HTML画布上绘制具有可变厚度的贝塞尔曲线？

我想用贝塞尔曲线连接盒子进行可视化。更重要的边缘应该更厚。每个盒子都有一个输出，但有很多输入。因此，为了节省空间，我希望保持不变的边的厚度，并且只改变输出边的厚度（其中每个边只有一个边）。如何在HTML画布上绘制具有可变厚度的贝塞尔曲线？

这就是为什么我要画贝塞尔cureves两端都有不同的厚度。它们应该呈现在HTML画布元素上。我知道context.bezierCurveTo()但只允许一个曲线的厚度。

有人可以帮我吗？

来源

2011-11-30 Timo

我不认为这是可能的。（除非你创建自己的JS图形库，这将支持这一点） – tomexx

我不确定，但在教程中删除的问题，你不能做这部分“context.lineWidth = 10;”并使用它的厚度？ –

如果这是不可能的，我可以重复使用现有的功能吗？说得到两个贝塞尔曲线的像素并手动绘制它们并填充它们之间的空间？ – Timo

假设您正在绘制的曲线，即厚2倍r在X1，Y1和控制研究点1是在X-driection那么你可以这样做：

canvas.fillStyle = "red"; 

    canvas.beginPath(); 
    canvas.moveTo(x1, y1-r); 
    canvas.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2); 
    canvas.bezierCurveTo(cpx2, cpy2, cpx1, cpy1, x1, y1+r); 
    canvas.lineTo(x1, y1+r); 
    canvas.fill();

来源

2011-11-30 12:34:35 zuloo

当然，你可以填写形状... * facepalm *感谢您的答案！ – Timo

万一别人想要做类似的事情，这里是我的代码：

function plotFlow(context, centerLeft, centerRight, thicknessLeft, thicknessRight) { 
    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}; 

    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(); 

    if (typeof context.endPath == 'function') { 
     context.endPath(); 
    } 
}

来源

2011-11-30 13:03:06 Timo

如何在HTML画布上绘制具有可变厚度的贝塞尔曲线？

回答

相关问题