Operazione vettoriale Paper.js

Sono nuovo a paper.js e ho incontrato alcuni problemi.

<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 questo codice, l'evento (event.downPoint – event.point) .length funziona bene, ma voglio utilizzare direttamente javascript in modo da ho fatto:

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

Lo strumento di linea funziona come previsto, ma qui nello strumento "cerchio" (event.downPoint – event.point) restituisce NaN. Suppongo che sta cercando di fare "{x: 110, y: 200} – {x: 100, y: 300}" e non riesce perché ovviamente si aspetta due numbers, ma nella documentazione Paper.js dice che può gestire i vettori in questo formato (ed effettivamente funziona nel primo pezzo di codice). Devo call paper.js per calcolare questo tipo di operazioni? Probabilmente è una cosa stupida, ma non ho trovato niente di questo tipo di situazione. C'è qualcosa di simile alla carta (// faccia questo pezzo di codice come se fosse parte di uno script "text / paperscript")? Grazie!

L'overload di operatore di Paper.js per le operazioni vettoriali funziona solo quando si include la libreria con type="text/paperscript" . Altrimenti devi usare: add, subtract, multiply, divide, module, equals a +, -, *, /, % and == .

così:

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

o per il tuo esempio:

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

Ecco il tuo esempio con sottrazione e qui ci sono alcuni esempi e test .