Paper.js向量操作 [英] Paper.js vector operation

问题描述

我是paper.js的新手，遇到了一些麻烦。

I'm new to paper.js and ran into some troubles.

<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，所以我这样做：

In this code the (event.downPoint - event.point).length works well but i want to use javascript directly so i did:

<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.point）返回NaN。我想它是试图做{x：110，y：200} - {x：100，y：300}和失败，因为显然它期待两个数字，但在Paper.js文档说，它可以处理这种格式（它实际上在第一段代码中工作）。我应该调用paper.js来计算这种类型的操作吗？这可能是一个愚蠢的东西，但我找不到任何关于这种情况。有什么东西像纸（//这段代码是否像text / paperscript脚本的一部分）？
谢谢！

The 'line tool' works as expected but here in the 'circle tool' (event.downPoint - event.point) returns NaN. I suppose it's trying to do "{ x: 110, y: 200 }-{ x: 100, y: 300 }" and failing because obviously it's expecting two numbers, but in Paper.js documentation says it can handle vectors in this format (and it actually works in the first piece of code). Should I call someway paper.js to calculate this type of operations? Probably it's a silly thing but i couldn't find anything about this kind of situation. Is there something like paper( //do this piece of code like it was part of a 'text/paperscript' script) ? Thanks!

推荐答案

Paper.js 运算符重载向量操作只有在您包含 type =text / paperscript 。否则你必须使用 +， - ，*，/，％和== <= c $ c>加，减，乘，除模，等于 / code>。

Paper.js operator overloading for vector operations only works when you include the library with type="text/paperscript". Otherwise you have to use: add, subtract, multiply, divide, modulo, equals for +, -, *, /, % and ==.

如下：

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

或您的示例：

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

下面是你的例如与的减去这里有一些更例子和测试。

Here is your example with subtract and here are some more examples and tests.

这篇关于Paper.js向量操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！