using paper.Tool Mousemove events with native Dragging events
51 views
Skip to first unread message
Gianni Lin
Aug 12, 2023, 11:41:18 AM8/12/23
to Paper.js
My objective is placing shapes using paper.js, according to the position of where the dragged element is dropped on canvas.
I don't know how to convert DOMEvent point coordinates into paper.Point coordinates, so I can't use event listeners offered by native JS.
Then I discovered that when "dragend" events by DOMEvents are called, one "mousemove" event is always fired. This doesn't happen with Paper.js's "mousemove" events though, but it does happen if:
1. I drag the element on the canvas, and click the canvas
2. doing the first step for a few more times, and it will always behave like DOM events.
I don't know where this inconsistency is coming from, can someone help me figure it out? Or proposing another approach for my objective?
html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./paper/dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas1" src="./index.js"></script>
<style>
.dragging{
opacity: 0.5;
}
</style>
</head>
<body>
<div class="draggable" style="border: solid black 1px; display: inline;" draggable="true">element1</div>
<div class="draggable" style="border: solid black 1px; display: inline;" draggable="true">element2</div>
<canvas tabindex="0" class="container" style="border:solid black 1px;" id="canvas1"></canvas>
</body>
</html>
script code:
var scope=new paper.PaperScope()
scope.setup("canvas1")
scope.activate()
let tool1 = new paper.Tool()
let canvas1 = document.getElementById("canvas1")
let ctx= canvas1.getContext("2d");
canvas1.addEventListener("dragover",(event)=>{
event.preventDefault()
})
canvas1.addEventListener("mousemove",(event)=>{
//always fire one time when dragend is fired
console.log("mousemove")
})
let draggables= document.getElementsByClassName("draggable")
for( let draggable of draggables){
draggable.addEventListener("dragstart",(event)=>{
console.log("dragstart")
draggable.classList.add("dragging");
window.dragFlag=true;
})
draggable.addEventListener("dragend",(event)=>{
console.log("dragend")
draggable.classList.remove("dragging");
})
}
tool1.onMouseMove=function(event){
console.log("paper move")
if(window.dragFlag==true){
drawShape(event)
window.dragFlag=false;
}
}
function drawShape(event){
var path = new paper.Path.Circle({
center: event.point,
radius: 25,
fillColor: 'black'
});
}
tool1.onKeyDown=function(event) { //this event handler works only if the mouse is inside the canvas, but I discovered that when the inconsistency I mentioned about starts, the keywdown event can be handled even if the mouse isn't inside the canvas anymore
if(event.character == "z") {
console.log("z pressed")
}
}
Gianni Lin
Aug 15, 2023, 8:27:18 AM8/15/23
to Paper.js
I discovered that if I don't create the "scope" object, and just use only the dafault scope given by paper.js, then the "mousemove" event by paper.js is fired as soon as I end the dragging like the DOM "mousemove" event. But since I need to work with multiple canvases I still need a solution to this using "scope" object. I checked if I was using scopes wrong, but I just can't figure out what's the problem.
Gianni Lin
Aug 31, 2023, 4:22:05 PM8/31/23
to Paper.js
In the end I learnt to convert DOMEvent point coordinates into paper.Point coordinates, so the bug with the paper.js library doesn't bother me anymore.
For the "conversion" I had to learn how matrices work for html canvas, because it's the same logic with paper.js
Reply all
Reply to author
Forward
0 new messages