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>

'line tool'按预期工作,但在'circle tool'(event.downPoint - event.point)中返回NaN.我想它正试图做"{x:110,y:200} - {x:100,y:300}"而失败是因为显然它期待两个数字,但在Paper.js文档中说它可以处理这种格式的向量(它实际上在第一段代码中工作).我应该打电话给paper.js计算这种类型的操作吗？可能这是一个愚蠢的事情,但我找不到任何关于这种情况的事情.是否有像纸一样的东西(//这段代码就像是'text/paperscript'脚本的一部分)？谢谢!

Answer 1

用于向量操作的Paper.js 运算符重载仅在包含库时才有效type="text/paperscript".否则你必须使用:add, subtract, multiply, divide, modulo, equalsfor +, -, *, /, % and ==.

像这样:

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

或者为你的例子:

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

这是你的减法示例,这里有一些更多的例子和测试.