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

Question

我正在使用 jquery 和 fabric.js 库构建一个 Canvas 用户界面，并使用以下代码设置一个带有透明部分的叠加 png 图像

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

我还在叠加层后面添加了一个图像，并使用以下代码调整大小以适应容器

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();
});

它按预期工作，但是，当我单击图像以对其进行缩放/调整大小时，除了通过叠加图像的透明空间外，我看不到控件。控件位于叠加图像的后面，有没有一种方法可以强制显示图像控件，而不必将整个图像放在叠加图像的前面？

Answer 1

只需设置 bool 值controlsAboveOverlay:

canvas.controlsAboveOverlay = true;