5

我正在使用 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();
});

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

4

3 回答 3

14

只需设置布尔值controlsAboveOverlay：

canvas.controlsAboveOverlay = true;
于 2013-05-02T12:22:05.110 回答
3

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

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

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

于 2012-04-10T19:14:04.997 回答
0 
canvas.controlsAboveOverlay = true; //did the job... but:

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

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

恕我直言，这种行为应该由像canvas.controlsInStack = true.

对了……那东西真的很漂亮！

于 2016-04-07T16:33:39.887 回答