javascript - 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 来计算这种类型的操作吗？可能这是一件愚蠢的事情，但我找不到任何关于这种情况的信息。有没有类似 paper 的东西(//把这段代码当作“text/paperscript”脚本的一部分)？ 谢谢!

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 .