Question

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

只需设置布尔值controlsAboveOverlay：

canvas.controlsAboveOverlay = true;

Answer 2

这里的问题是叠加图像呈现在对象的控件之上。这是预期的行为。看看this wiki article，它显示了布料画布上各种东西的z-index以及它们呈现的顺序。

有计划添加对始终位于顶部的对象控件的支持，正如您可以从this ticket看到的那样，但我无法告诉您何时会发生这种情况。

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

Answer 3

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

我不想在叠加图像上方渲染控件（因为叠加意味着覆盖我）。我只想完全按照Wiki中的描述呈现堆栈（默认情况下）。

我只是想知道......正如Wiki渲染堆栈中所描述的那样，控件应该呈现在所有对象之上（默认情况下始终可见），但它们不会（看kitchensink演示）。

恕我直言，此行为应由canvas.controlsInStack = true等标志设置。

顺便说一句......那东西真漂亮！

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

3 个答案: