Paper.js - convertir `` paperscript` à javascript`

Question

Je suis en train de changer cette paperscript:

<script type="text/paperscript" canvas="canvas-1"> 
tool.minDistance = 10; 
tool.maxDistance = 45; 

var path; 

function onMouseDown(event) { 
    path = new Path(); 
    path.fillColor = new Color({ hue: Math.random() * 360, saturation: 1, brightness: 1 }); 

    path.add(event.point); 
} 

function onMouseDrag(event) { 
    var step = event.delta/2; 
    step.angle += 90; 

    var top = event.middlePoint + step; 
    var bottom = event.middlePoint - step; 

    path.add(top); 
    path.insert(0, bottom); 
    path.smooth(); 
} 

function onMouseUp(event) { 
    path.add(event.point); 
    path.closed = true; 
    path.smooth(); 
} 
</script> 

à un stand alone javascript comme:

paper.install(window); 


window.onload = function() { 
paper.setup('myCanvas'); 

tool.minDistance = 10; 
tool.maxDistance = 45; 

var path; 

function onMouseDown(event) { 
    path = new Path(); 
    path.fillColor = { 
     hue: Math.random() * 360, 
     saturation: 1, 
     brightness: 1 
    }; 

    path.add(event.point); 
} 

function onMouseDrag(event) { 
    var step = event.delta/2; 
    step.angle += 90; 

    var top = event.middlePoint + step; 
    var bottom = event.middlePoint - step; 

    path.add(top); 
    path.insert(0, bottom); 
    path.smooth(); 
} 

function onMouseUp(event) { 
    path.add(event.point); 
    path.closed = true; 
    path.smooth(); 
} 
} 

il me donne une erreur:

TypeError: undefined is not an object (evaluating 'tool.minDistance = 10')

Qu'est-ce que tool ici? Je comprends que je pourrais avoir besoin de le déclarer avant de pouvoir l'utiliser. aucune idée pour résoudre ça?

Answer 1

Vous devez faire la portée mondiale tel que décrit dans le documentation:

paper.install(window); 

ensuite obtenir avec defs mondiale. :

window.onload = function() { 
     // Get a reference to the canvas object 
     paper.setup('myCanvas'); 
     // In your case create tools 
     var tool = new Tool(); 
     tool.minDistance = 10; 
     tool.maxDistance = 45; 

Puis continuer comme d'habitude, cela va créer vos outils .. plus peuvent être trouvés here.

Soit dit en passant que vous avez en fait déjà fait correctement pour Path(), donc de même pour Tool()

Answer 2

Lorsque j'utilise Paper.js directement en javascript je préfère créer un objet papier de cette façon:

var canvas = document.getElementById('canvas-line'); 
paper.setup(canvas); 
// and then if you want to create some Paper.js object prefix it's name with paper 
var myPath = new paper.Path(); 

Si vous voulez utiliser l'outil, vous devez le décélérer avec du nouveau papier.Tool(); Par exemple, si vous voulez vérifier si chemin a été cliqué:

var tool1 = new paper.Tool(); 

    var handle; 
    var myPath; 
    myPath.fullySelected = true; 

    tool1.onMouseDown = function(event) { 
     handle = null; 
     // Do a hit test on path for handles: 
     var hitResult = myPath.hitTest(event.point, { 
      handles: true, 
      fill: true, 
      stroke: true, 
      segments: true, 
      tolerance: 2 
     }); 

     if (hitResult) { 
      if (hitResult.type == 'handle-in') { 
       handle = hitResult.segment.handleIn; 
      } else if (hitResult.type == 'segment') { 
       handle = hitResult.segment.point; 
      } else if (hitResult.type == 'handle-out') { 
       handle = hitResult.segment.handleOut; 
      } 
     } 
    } 

Vous pouvez trouver plus d'informations sur les outils ici http://paperjs.org/reference/tool/

outil