Trying to snap an image loaded from ZIM loader to a rectangle using hitTestBounds

Questions
1

Based on meme.html example, i try to snap a loaded image (currentItem) to a rectangle () using hitTestBounds.
Let's say i have:
const snapH = new Rectangle({width:W ,height:2,color:yellow.toAlpha(.1),borderColor:black.toAlpha(1), borderWidth:1});|
stage.addChildAt(snapH,2).center()|
.drag({rect:new createjs.Rectangle(0,0,0,H-100), onTop:true});|
Where should i define the following: currentItem.on("pressmove", ()=>{
var indexH = currentItem.hitTestBounds(snapH);
if (indexH >=0) {
currentItem.pos(x,snapH.y)
indexH = 0
stage.update()
};

2

probably on a pressup event rather than pressmove? Unless you want to try and have it take over the mouse dragging once it gets there in which case you could use pressmove and noDrag() inside if hitting. But the usual is on("pressup", ()=>{
// do you hitTestBounds conditional and snap in here
});

3

I forgot to tell you, that if i use an image:

const myImage = new Pic("image.png").center().drag;
myImage.on("pressmove", ()=>{
var indexH = currentItem.hitTestBounds(snapH);
if (indexH >=0) {
myImage.pos(x,snapH.y)
indexH = 0

the image snap behavior works like a charm. It is just when i want to snap
an image loaded with ZIM loader, that i don't really know where to assign the on("pressmove") or on("pressup"). i have assigned currentitem.on("pressup"), it does not work.
I will try to assign at the parent container level of the loaded images.

4

Oh, so you are loading an image with Loader(). Let me do a test...

1 Like
5

Thank you Dr. Abstract. I will elaborate more.

1 Like