CODEWITHSUNDEEP
scrollhtml5-canvasmousedownfabricjs
Christopher Bousquet
Christopher Bousquet

Reputation: 33

FabricJS Canvas, Scrolling parent container moves child hit area

I am using FabricJS to create an application. I am finding that scrolling a parent div/container offsets the selectable area of an object to the right in direct relation to amount scrolled.

So, if I have a canvas that is 1200x600 and a container div that is 600x600 and I add a rect to that canvas at 400, 120; when I scroll 200px, I can't click on the rect to select it. Rather, I have to move my mouse to 600, 120 (empty space) to get the cross bar and select the rect.

Not sure if this is known, or has a work around - but I would appreciate any help possible.

Upvotes: 2

Views: 2295

Answers (1)

Kappei
Kappei

Reputation: 714

You'll have to modify FabricJs code to make it work. The problem is in the getPointer function, if you search for it in all.js you'll notice the comment "this method needs fixing" from kangax.

A workaround can be substituting this function with

function getPointer(event) {
    // TODO (kangax): this method needs fixing
    return { x: pointerX(event) + document.getElementById("container").scrollLeft, y: pointerY(event) + document.getElementById("container").scrollTop };
}

where "container" is the wrapper div of you canvas. It's not nice, since you have to put the exact id, but it works.

Hope this helps.

Upvotes: 2

Related Questions