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

Paper.js矢量操作

1 个答案: