PaperJS 및 여러 도구를 추가 할 때 선 끝에서 화살표 그리기

Question

캔버스에 도구를 만들려고합니다. 내가 만들고자하는 도구는 끝 부분에 화살표가있는 선입니다. 자신의 코드를 작업 할 수는 있지만, 화살촉을 그리지 않는 다른 도구를 추가하려고하면 선이 그려집니다. 나는 그것이 작동하도록 내 코드에서 무엇이 빠졌는지 확신하지 못한다. 어떤 도움을 주시면 감사하겠습니다. 아마도 더 좋은 방법이있을 수 있습니다.

이 코드는 작동하지 않습니다.

paper.install(window); 
var forward; 
window.onload = function() { 
    paper.setup('sketx-canvas'); 
    forward = new Tool(); 
    var pathforward; 
    forward.onMouseDown = function(event) { 
     // Create a new path and set its stroke color to black: 
     pathforward = new Path({ 
      segments: [event.point], 
      strokeColor: 'red', 
      strokeWidth: 4,    
     });        
    } 

    // While the user drags the mouse, points are added to the path 
    // at the position of the mouse: 
    forward.onMouseDrag = function(event) { 
     pathforward.add(event.point); 
    }  

    // When the mouse is released, we simplify the path and add arrow: 
    forward.onMouseUp = function(event) { 
     pathforward.simplify(300);  
     var vector = pathforward.getPointAt(pathforward.length) - pathforward.getPointAt(pathforward.length-25); 
     var arrowVector = vector.normalize(18); 
     var path2 = new Path({ 
      segments: [pathforward.getPointAt(pathforward.length) + arrowVector.rotate(145), pathforward.getPointAt(pathforward.length), pathforward.getPointAt(pathforward.length) + arrowVector.rotate(-145)], 
      fillColor: 'black', 
      strokeWidth: 6,    
     }); 
     path2.scale(1.3);          
    }   

} 

이 코드는 작동합니다.

var path; 
    function onMouseDown(event) { 
     // Create a new path and set its stroke color to black: 
     path = new Path({ 
      segments: [event.point], 
      strokeColor: 'red', 
      strokeWidth: 4, 
      // if we want dashed lines use dashArray: [2, 4],     
     });        
    } 

    // While the user drags the mouse, points are added to the path 
    // at the position of the mouse: 
    function onMouseDrag(event) { 
     path.add(event.point); 
    }  

    // When the mouse is released, we simplify the path and add arrow: 
    function onMouseUp(event) { 
     path.simplify(300); ;  
     var vector = path.getPointAt(path.length) - path.getPointAt(path.length-25); 
     var arrowVector = vector.normalize(18); 
     var path2 = new Path({ 
      segments: [path.getPointAt(path.length) + arrowVector.rotate(145), path.getPointAt(path.length), path.getPointAt(path.length) + arrowVector.rotate(-145)], 
      fillColor: 'black', 
      strokeWidth: 6,    
     }); 
     path2.scale(1.3);          
    } 

정상적으로 작동합니다. 여기에 최종 코드가 있습니다.

<script type="text/javascript"> 
paper.install(window); 
var forward; 



window.onload = function() { 
    paper.setup('sketx-canvas'); 
    forward = new Tool(); 
    var pathforward; 
    forward.onMouseDown = function(event) { 
     // Create a new path and set its stroke color to black: 
     pathforward = new Path({ 
      segments: [event.point], 
      strokeColor: 'red', 
      strokeWidth: 4, 
      // if we want dashed lines use dashArray: [2, 4],     
     });        
    } 

    // While the user drags the mouse, points are added to the path 
    // at the position of the mouse: 
    forward.onMouseDrag = function(event) { 
     pathforward.add(event.point); 
    }  

    // When the mouse is released, we simplify the path and add arrow: 
    forward.onMouseUp = function(event) { 
     pathforward.simplify(300); 
     var point = pathforward.getPointAt(pathforward.length) 
     var vector = point.subtract(pathforward.getPointAt(pathforward.length-25)); 
     console.log(vector); 
     var arrowVector = vector.normalize(18); 
     var path2 = new Path({ 
      segments: [point.add(arrowVector.rotate(145)), point, point.add(arrowVector.rotate(-145))], 
      fillColor: 'black', 
      strokeWidth: 6,    
     }); 
     path2.scale(1.3);          
    } 

Answer 1

이 문제는 스크립트 태그에 스크립트를 포함시키는 방식으로 인해 발생합니다. 필자가 이해할 수없는 이유로 paper.js에 text/javascript 대신 <script type="text/paperscript"> 태그가 있어야합니다 (예 : 점 추가 및 빼기).

잘못된 코드에 표시하려면 paperscript으로 변경하면 작동합니다.

<canvas id="sketx-canvas" width="600" height="319"></canvas> 
<br> 

<a href="#" onclick="forward.activate();">Forward</a> 
<script type="text/paperscript"> 
    paper.install(window); 
    var forward; 



    window.onload = function() { 

     ... 

    } 
</script> 

양자 택일로, 당신은 .subtract, ... 수학 연산에 대한 기능을 대신 스크립트 태그에 text/javascript을 사용하려는 경우, .add paperjses를 사용할 수 있습니다.