如何在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畫布上繪製具有可變厚度的貝塞爾曲線？

回答

相關問題