Нарисуйте локоть коннектора на холсте HTML5

Я хочу разрешить пользователю рисовать что-то вроде локтевого коннектора в MS Word на холсте HTML5 с помощью событий mouse.I googled через многие сайты, но не нашел подходящего решения. Может кто-нибудь мне помочь код для этого или указать ссылку, если таковой имеется. ThanksНарисуйте локоть коннектора на холсте 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

ответ

Смежные вопросы