Paper.js矢量操作

我是paper.js的新手，遇到了一些麻烦。Paper.js矢量操作

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

在此代码（event.downPoint - event.point）。长度效果很好，但我想用javascript直接，所以我所做的：

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

的“行工具”按预期工作但是这里的'circle tool'（event.downPoint - event.point）返回NaN。我想它试图做“{x：110，y：200} - {x：100，y：300}”并且失败，因为显然它需要两个数字，但是在Paper.js文档中说它可以处理这种格式的向量（并且它实际上在第一段代码中起作用）。我应该打电话paper.js来计算这种类型的操作？可能这是一件愚蠢的事情，但我无法找到任何有关这种情况的东西。有没有像纸一样的东西（//这段代码是否像是'text/paperscript'脚本的一部分）？谢谢！

来源

2014-02-10 Adam Gaszt

对于矢量操作，Paper.js 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。

来源

2014-02-10 08:57:02 Christoph

谢谢！ :) –

Paper.js矢量操作

回答

相关问题