Paper.js - konvertieren `paperscript` zu` javascript`

Question

Ich versuche, diese paperscript zu ändern:

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

auf Stand-alone-javascript wie:

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(); 
} 
} 

es gib mir eine Fehlermeldung:

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

Was ist tool hier? Ich verstehe, dass ich es vielleicht erklären muss, bevor ich es benutzen kann. Irgendeine Idee, wie man das löst?

Answer 1

Sie müssen den globalen Bereich zu machen, wie in den documentation skizzierte:

paper.install(window); 

Dann mit globaler defs bekommen. :

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; 

Dann wie gewohnt fortsetzen, wird dies Ihre Werkzeuge einrichten .. Mehr kann here finden.

Übrigens haben Sie eigentlich schon das richtig gemacht für Path(), so gleich Tool() gilt

Answer 2

Wenn ich Paper.js verwenden, um direkt in Javascript Ich ziehe Papier-Objekt erstellen auf diese Weise:

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(); 

Wenn Sie das Werkzeug verwenden möchten, müssen Sie es mit neuem Papier abbremsen.Tool(); Wenn Sie zum Beispiel, ob Pfad geklickt wurde überprüfen möchten:

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

können Sie mehr Informationen zu Tools hier finden http://paperjs.org/reference/tool/