2017-09-05 22 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:私はpaper.jsのv0.11.4を使用してい

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!'); 
} 

。パスは画面上に正しく表示されますが、クリックするとコンソールが空になります。私は何かを不適切に設定していますか?私にお知らせください。ありがとうございました!

答えて

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); 
    } 
} 
関連する問題