Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fabricjs canvas.clipTo – show object's controls outside clip area

I am using canvas.clipTo to create an SVG-based "image mask" for my entire canvas, as described by @kangax, the creator of fabric.js, in this stackoverflow answer. It looks pretty great!

One problem, though: the handles/controls of the added objects do not show outside of the masked/clipTo area. Example:

picture of a pug on a t-shirt, with borders to resize the pug image. Bottom right control is obscured.

As you can see in the image, the bottom right handle of the pug is hidden. This is no good!

I <3 <3 <3 this canvas.clipTo approach, but need users to be able to grab edges of their added images, even when they fall outside of the masked area. The image should be hidden, but its controls should be visible.

like image 607
chadoh Avatar asked Oct 02 '15 18:10

chadoh


1 Answers

Use controlsAboveOverlayproperty available on fabric canvas instance.

like image 101
BKR Avatar answered Oct 07 '22 17:10

BKR