2017-09-05 102 views
1

我的代码非常简单,直接从教程中解脱出来。下面是index.html的:Paper.js鼠标事件不起作用

<!DOCTYPE html> 
<html> 
<head> 
<!-- Load the Paper.js library --> 
<script type="text/javascript" src="js/paper-full.js"></script> 
<!-- Load external PaperScript and associate it with myCanvas --> 
<script type="text/paperscript" canvas="myCanvas" src="js/myScript.js"></script> 
</head> 
<body> 
    <canvas id="myCanvas" resize></canvas> 
</body> 
</html> 

,这里是JS/myscript.js:

var myPath = new Path(); 
myPath.strokeColor = 'black'; 

myPath.add(new Point(200, 200)); 
myPath.add(new Point(100, 100)); 

function onMouseDown(event) { 
    console.log('You pressed the mouse!'); 
} 

function onMouseDrag(event) { 
    console.log('You dragged the mouse!'); 
} 

function onMouseUp(event) { 
    console.log('You released the mouse!'); 
} 

我使用paper.js的v0.11.4。路径正确显示在屏幕上,但是当我点击时控制台是空的。我是否设置不当?请告诉我。谢谢!

回答

0

您可以阅读伟大paper.js教程,特别是using javascript directly > working with tools

paper.install(window); 
window.onload = function() { 
    paper.setup('myCanvas'); 
    // Create a simple drawing tool: 
    var tool = new Tool(); 
    var path; 

    // Define a mousedown and mousedrag handler 
    tool.onMouseDown = function(event) { 
     path = new Path(); 
     path.strokeColor = 'black'; 
     path.add(event.point); 
    } 

    tool.onMouseDrag = function(event) { 
     path.add(event.point); 
    } 
}