6

I'm building a canvas user interface with jquery and fabric.js library and I set an overlay png image with a transparent section using the following code

var bgImgSrc = bgImg.attr('src');
canvas.setOverlayImage(bgImgSrc, function(img){
  canvas.renderAll();
});

I also added an image behind the overlay and resized to fit the container using the following code

var photoImg = $('#img-photo');
var photoImgSrc = photoImg.attr('src');
fabric.Image.fromURL(photoImgSrc, function(img) {
  var photoImgWidth = photoImg.width();
  var photoImgHeight = photoImg.height();
  var hRatio = 380/photoImgWidth;
  var vRatio = 300/photoImgHeight;
  var ratio = Math.min(hRatio, vRatio);
  pImg = img.set({left: 380/2, top: 300/2, angle: 0})
  img.scale(ratio).setCoords();    
  canvas.add(pImg);
  canvas.sendToBack(pImg);
  canvas.renderAll();
});

And it works as expected, however, when I click on the image to scale/resize it, I don't see the controls, except through the transparent space of the overlay image. Controls are behind the overlay image, is there a way to force show the image controls without having to put the entire image in front of the overlay?

0

3 Answers 3

15

Just set the boolean controlsAboveOverlay:

canvas.controlsAboveOverlay = true;
2
  • 1
    perfect one, i was looking for the solution since long. You made my day buddy :)
    – Innodel
    Dec 23, 2014 at 7:50
  • is it possible to add click event on overlay image? I mean I want to show alert when user clicks on the overlay image. Feb 13, 2019 at 10:46
3

The problem here is that overlay image is rendered on top of objects' controls. This is expected behavior. Take a look at this wiki article, which shows the z-index of various things on fabric canvas and in which order they're rendered.

There are plans to add support for object controls that are always on top, as you can see from this ticket, but I can't tell you when that's going to happen.

You can also try using "after:render" callback and draw image manually onto canvas.

0
canvas.controlsAboveOverlay = true; //did the job... but:

I don't want to render controls above the overlay image (as overlay means overlay to me). I just want to render the stack exactly as described in Wiki (by default).

I just wonder...as described in the Wiki rendering-stack, the controls should be rendered on top of all objects (always visible by default), but they do not (look at kitchensink demo).

IMHO this behaviour should be set by a flag like canvas.controlsInStack = true.

By the way ... that thing is really beautiful!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.