javascript - Fabric.js: Image controls behind an overlay image - Stack Overflow

admin管理员组

文章数量:1221752

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?

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?

• javascript
• canvas
• fabricjs

Share Improve this question Follow edited Nov 24, 2013 at 12:07 kangax 39.2k1313 gold badges100100 silver badges135135 bronze badges asked Apr 10, 2012 at 2:41 user1323065user1323065 6111 silver badge22 bronze badges 0

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 15

Just set the boolean controlsAboveOverlay:

canvas.controlsAboveOverlay = true;

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.

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!

本文标签： javascriptFabricjs Image controls behind an overlay imageStack Overflow