在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画布上绘制弯头连接器

回答

相关问题