Objects resize/scale controls to be always on top

[ImDom]

Would it be possible to have the border with controls on an active object always on top (maybe in a new canvas above the one with objects)?

Say for example that you have a list of all the objects in the canvas in a sidebar where you can select objects to bring forward, delete, send backward etc. From this list, you select an object that gets activated in the canvas. The controls for resize, scale and rotate shows up around the object, but the object is behind another object and therefor the only thing that will happen is that you will select the object in front of the one you want to control.

Maybe it's already possible to have the controls above all objects in the canvas? I have missed stuff in the docs before, haha :)

[kangax]

Not possible right now, but an interesting (and useful) idea. I'll try tackling it.

[kangax]

Now implemented via "controlsAboveOverlay" canvas property.

[donmb1]

Is it expected that controls are visible, the object behind the object on top is scalable/rotatable but not draggable?

[kangax]

@MARTINB83 if the draggable area is overlayed by another object then it's not draggable. We don't have controls for dragging so controls behavior won't help in such case.

[donmb1]

Yep I noticed. My challenge though is to have image1 overlayed by image2. Image1 should still be draggable and scaleable behind image2 which should behave like an overlay. However, using setOverlayImage in my usecase is not suitable since I want to also add text on top of the overlay image (I have created a label designer using transparent image templates). Bit stuck here and implemented key events as a fallback (using up-down-left-right keys to move image1).

[asturur]

martin, try to compose on a separate canvas the text and the image, then use that canvas as source for your overlay image.

i saw someone doing this to create dynamic patterns somewhere in some issue here on github.

i cannot assist you with code, but should be doable.

[vizo]

@kangax We don't have controls for dragging, but what about making whole border draggable on top to move object from background? Is that possible? I think it could behave same as resize controls...

[vizo]

Oh sorry... i see it's possible to use object.evented = false;. Thanks for you hard work!

[c-gross]

Is there already any solution for such cases?
I would like to display a smaller area (transparent rect with border) within the canvas were the user can place only specific elements. But if it's on top it's blocking the other objects. If it's behind, it's not visible.

[asturur]

This is very old, many things changed.

What about using an overlay image?

[c-gross]

Yes it's old but wasn'T about to start an extra ticket.
Since the area is always a different rectangle (size, ratio) a image would look bad I think. Only workaround I had in mind would be to render 4 lines to simulate the area.

[asturur]

An overlay image can be any object, there is no limit you can do a rect and set it as overlayImage on the canvas instance.

[c-gross]

http://fabricjs.com/docs/fabric.StaticCanvas.html#setOverlayImage
Says it should be an image URL. Is there any example how to add an rectangle to the overlayImage?

[c-gross]

Nevermind, just tried by passing my rectangle and yes it seems to work. Thanks alot.