在HTML5畫布上繪製彎頭連接器

我想允許用戶使用鼠標事件在HTML5畫布上的MS Word中繪製類似肘形連接器的東西。我通過許多網站搜索了一下，但沒有找到任何適當的解決方案。可以任何人請幫助我代碼或指出鏈接，如果有的話。謝謝在HTML5畫布上繪製彎頭連接器

2014-02-07 user1448529

您可以更具體一些，您嘗試了什麼，以及您的代碼在哪裏遇到問題。請儘可能分享小提琴。 – K3N

您可以使用線條加一條二次曲線來繪製彎頭連接器以圍繞肘部。例如，您可以在畫布的左上角從[x：10，y：100]到[x：75，y：20]畫一個手肘，並且其角半徑爲12，如下所示：

// top-left elbow from 10/100 to 75,20 with corner radius 12 
ctx.beginPath(); 
ctx.moveTo(10,100); 
ctx.lineTo(10,20+12); 
ctx.quadraticCurveTo(10,20, 10+12,20); 
ctx.lineTo(75,20); 
ctx.strokeStyle=elbow.color; 
ctx.lineWidth=elbow.linewi0dth; 
ctx.stroke();

演示：http://jsfiddle.net/m1erickson/3cN7b/

enter image description here

下面是用於定義和繪圖彎頭連接器的示例代碼：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var elbows=[]; 
    elbows.push({ 
     type:"topLeft", 
     start:{x:20,y:120}, 
     end:{x:120,y:20}, 
     cornerRadius:12, 
     color:"red", 
     linewidth:8 
    }); 
    elbows.push({ 
     type:"topRight", 
     start:{x:120,y:20}, 
     end:{x:220,y:120}, 
     cornerRadius:12, 
     color:"blue", 
     linewidth:8 
    }); 
    elbows.push({ 
     type:"bottomRight", 
     start:{x:220,y:120}, 
     end:{x:120,y:220}, 
     cornerRadius:12, 
     color:"green", 
     linewidth:8 
    }); 
    elbows.push({ 
     type:"bottomLeft", 
     start:{x:120,y:220}, 
     end:{x:20,y:120}, 
     cornerRadius:12, 
     color:"gold", 
     linewidth:8 
    }); 

    drawElbows(); 

    function drawElbows(){ 
     for(var i=0;i<elbows.length;i++){ 
      drawElbow(elbows[i]); 
     } 
    } 

    function drawElbow(elbow){ 

     // starting elbow 
     ctx.beginPath(); 
     ctx.moveTo(elbow.start.x,elbow.start.y); 

     // middle elbow 
     switch(elbow.type){ 
      case "topLeft": 
       ctx.lineTo(elbow.start.x,elbow.end.y+elbow.cornerRadius); 
       ctx.quadraticCurveTo(
        elbow.start.x,elbow.end.y, 
        elbow.start.x+elbow.cornerRadius,elbow.end.y 
       ); 
       break; 
      case "topRight": 
       ctx.lineTo(elbow.end.x-elbow.cornerRadius,elbow.start.y); 
       ctx.quadraticCurveTo(
        elbow.end.x,elbow.start.y, 
        elbow.end.x,elbow.start.y+elbow.cornerRadius 
       ); 
       break; 
      case "bottomRight": 
       ctx.lineTo(elbow.start.x,elbow.end.y-elbow.cornerRadius); 
       ctx.quadraticCurveTo(
        elbow.start.x,elbow.end.y, 
        elbow.start.x-elbow.cornerRadius,elbow.end.y 
       ); 
       break; 
      case "bottomLeft": 
       ctx.lineTo(elbow.end.x+elbow.cornerRadius,elbow.start.y); 
       ctx.quadraticCurveTo(
        elbow.end.x,elbow.start.y, 
        elbow.end.x,elbow.start.y-elbow.cornerRadius 
       ); 
       break; 
     } 

     // ending elbow 
     ctx.lineTo(elbow.end.x,elbow.end.y); 
     ctx.strokeStyle=elbow.color; 
     ctx.lineWidth=elbow.linewi0dth; 
     ctx.stroke(); 
    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-02-07 21:27:41 markE

在HTML5畫布上繪製彎頭連接器

回答

相關問題