Fabric.js:覆盖图像后面的图像控件

Question

我正在使用jquery和fabric.js库构建一个canvas用户界面,我使用以下代码设置了一个带有透明部分的overlay 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

只需设置boolean controlsAboveOverlay:

canvas.controlsAboveOverlay = true;

Answer 2

这里的问题是覆盖图像呈现在对象控件的顶部。这是预期的行为。看一下这篇 wiki 文章，它显示了织物画布上各种事物的 z-index 以及它们的渲染顺序。

正如您从这张票中看到的那样，计划添加对始终位于顶部的对象控件的支持，但我无法告诉您何时会发生。

您还可以尝试使用“after:render”回调并将图像手动绘制到画布上。