Paper.js矢量运算

Question

我刚开始接触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).length工作得很好，但是我想直接使用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>

“行工具”按预期工作，但在“循环工具”(event.downPoint - event.point)中返回NaN。我猜想它正在尝试执行"{ x: 110，y: 200 }-{ x: 100，y: 300 }“，并且失败了，因为它显然需要两个数字，但是在Paper.js文档中，它可以处理这种格式的向量(实际上它在第一段代码中工作)。我应该以某种方式调用paper.js来计算这种类型的操作吗？也许这是一件很愚蠢的事，但我对这种情况什么也找不到。是否有类似于纸张的东西(//做这段代码就像它是“文本/抄本”脚本的一部分)？谢谢!

Answer 1

向量操作的Paper.js operator overloading只在包含带有type="text/paperscript"的库时才能工作。否则，您必须使用：add, subtract, multiply, divide, modulo, equals for +, -, *, /, % and ==。

就像这样：

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

或者以你为例：

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

这是减去的example，这里还有一些examples and tests。