Paper.js vector operation

问题

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>

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>

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!

回答1:

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 ==.

like so:

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

or for your example:

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

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

来源：https://stackoverflow.com/questions/21668417/paper-js-vector-operation

标签

javascript

html5

canvas

vector

paperjs