HTML5 캔버스에 엘보 커넥터 그리기

마우스 이벤트를 사용하여 HTML5 캔버스의 MS Word에서 팔꿈치 커넥터와 같은 것을 그릴 수있게하려고합니다. 많은 사이트를 통해 봤지만 적절한 해결책을 찾지 못했습니다. 누구든지 나를 도와주세요. 이 경우 코드를 작성하거나 링크가있는 경우 링크를 가리 킵니다. 감사합니다.HTML5 캔버스에 엘보 커넥터 그리기

출처

2014-02-07 user1448529

좀 더 구체적으로 할 수 있습니까? 무엇을 시도 했습니까? 코드에서 어디에 문제가 있습니까? 가능한 경우 바이올린을 공유하십시오. – K3N

팔꿈치를 둥글게하기 위해 선과 2 차 곡선을 사용하여 팔꿈치 커넥터를 그릴 수 있습니다.

예를 들어 [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();

데모 :

<!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>

,536,913,632 : http://jsfiddle.net/m1erickson/3cN7b/

enter image description here

여기 엘보 커넥터 정의 및 그리기위한 예시적인 코드는 10

출처

2014-02-07 21:27:41 markE

HTML5 캔버스에 엘보 커넥터 그리기

답변

관련 문제