function onMouseDrag(e...">

Paper.js vector work

I am new to paper.js and ran into some problems.

<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 function 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), NaN is returned. I guess it is trying to do "{x: 110, y: 200} - {x: 100, y: 300}" and it fails because obviously it expects two numbers, but the Paper.js documentation says, that it can handle vectors in this format (and it actually works in the first snippet of code). Should I call someay paper.js to calculate this type of operations? This is probably silly, but I couldn't find anything in this situation. Is there something like paper (// make this piece of code as if it were part of a "text / documentary" script)? Thank!

+5


source to share


1 answer


Paper.js operator overloading for vector operations only works when the library is included with type="text/paperscript"

, otherwise you must use: add, subtract, multiply, divide, modulo, equals

for +, -, *, /, % and ==

.

So:

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

      



or for your example:

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

      

Here's your subtraction example and here are some more examples and tests .

+12


source







All Articles