Paper.js 벡터 작업

Question

저는 paper.js를 처음 사용하고 몇 가지 문제가있었습니다.

이

<script type="text/javascript"> 
paper.install(window); 
// Keep global references to both tools, so the HTML 
// links below can access them. 
var line_tool, circle_tool; 

window.onload = function() { 
    paper.setup('myCanvas'); 

    line_tool = new Tool(); 
    line_tool.onMouseDrag = function (event) { 
       var path = new Path.Line({ 
        from: event.downPoint, 
        to: event.point, 
        strokeColor: 'black' 
       }); 

      path.removeOnDrag(); 

     }; 

    circle_tool = new Tool(); 
    circle_tool.onMouseDrag = function (event) { 
      var path = new Path.Circle({       
       center: event.downPoint,       
       radius: (event.downPoint - event.point).length,      
       fillColor: 'white',      
       strokeColor: 'black' 
      });       
      path.removeOnDrag();     


     }; 
    } 
    </script> 

'선 도구'작동 예상대로 : -이 코드 (event.downPoint event.point)에서

<script type="text/paperscript" canvas="canvas"> 
     function onMouseDrag(event) { 
      // The radius is the distance between the position 
      // where the user clicked and the current position 
      // of the mouse. 
      var path = new Path.Circle({ 
       center: event.downPoint, 
       radius: (event.downPoint - event.point).length, 
       fillColor: 'white', 
       strokeColor: 'black' 
      }); 

      // Remove this path on the next drag event: 
      path.removeOnDrag(); 
     }; 
</script> 

잘 작동 .length하지만 난 직접 그래서 난 한 자바 스크립트를 사용하려면 여기 '원 도구'(event.downPoint - event.point)는 NaN을 반환합니다. 분명히 두 개의 숫자가 필요하기 때문에 "{x : 110, y : 200} - {x : 100, y : 300}"을 시도하고 있다고 가정합니다. 그러나 Paper.js 문서에는이 형식의 벡터를 처리 할 수 ​​있다고합니다. (실제로 코드의 첫 번째 부분에서 작동합니다). 이런 종류의 작업을 계산하기 위해 paper.js라고 불러야합니까? 아마 어리석은 일이지만 이런 상황에 대해서는 아무 것도 찾을 수 없습니다. 종이와 같은 것이 있습니까 (//이 코드는 'text/paperscript'스크립트의 일부였습니다)? 감사합니다.

Answer 1

벡터 작업에 대한 operator overloading은 type="text/paperscript"과 함께 라이브러리를 포함 할 때만 작동합니다. 그렇지 않은 경우 add, subtract, multiply, divide, modulo, equals (+, -, *, /, % and ==)을 사용해야합니다.

point1.add([ 200, -50 ]); 

또는 예를 들어 :

과 같이

radius: event.downPoint.subtract(event.point).length, 

여기 여기 빼기와 example이고는 examples and tests 좀 더 있습니다.