2017-09-05 13 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!'); 
} 

. 경로가 화면에 제대로 표시되지만 주위를 클릭하면 콘솔이 비어 있습니다. 부적절하게 뭔가를 설정하고 있습니까? 저에게 알려주세요. 고맙습니다! 당신은 위대한 paper.js 튜토리얼을 읽을 수

답변

0

, 특히 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); 
    } 
}