2017-09-05 152 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); 
    } 
}