Paper.js - преобразующие `paperscript` в` javascript`

Question

Я пытаюсь изменить 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> 

в автономном javascript как:

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

он дает мне ошибку:

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

Что такое tool? Я понимаю, что мне может потребоваться объявить его, прежде чем я смогу его использовать. Любая идея, как это решить?

Answer 1

Вы должны сделать глобальный масштаб, как указано в documentation:

paper.install(window); 

Тогда ладить с глобальным DEFS. :

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; 

Затем продолжайте, как обычно, это будет настроить свои инструменты .. Подробнее можно найти here.

Кстати, вы на самом деле уже сделали это правильно для Path(), так же относится и к Tool()

Answer 2

Когда я использую Paper.js непосредственно в JavaScript Я предпочитаю, чтобы создать объект бумагу таким образом:

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

Если вы хотите использовать инструмент, вам нужно замедлить его с помощью новой бумаги. Tool(); Например, если вы хотите, чтобы проверить, была ли нажата путь:

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

Вы можете найти подробную информацию об инструментах здесь http://paperjs.org/reference/tool/