[英]Fabric.js: Image controls behind an overlay image
我正在使用 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();
});
它按预期工作,但是,当我单击图像以对其进行缩放/调整大小时,除了通过覆盖图像的透明空间外,我看不到控件。 控件在叠加图像后面,有没有办法强制显示图像控件而不必将整个图像放在叠加图像前面?
只需设置 boolean controlsAboveOverlay
:
canvas.controlsAboveOverlay = true;
这里的问题是叠加图像呈现在对象的控件之上。 这是预期的行为。 看看这篇 wiki 文章,它显示了 fabric canvas 上各种事物的 z-index 以及它们的呈现顺序。
计划添加对始终位于顶部的 object 控件的支持,正如您从这张票中看到的那样,但我无法告诉您何时会发生。
您也可以尝试使用“after:render”回调并手动将图像绘制到 canvas 上。
canvas.controlsAboveOverlay = true; //did the job... but:
我不想在覆盖图像上方渲染控件(因为覆盖对我来说意味着覆盖)。 我只想完全按照 Wiki 中的描述渲染堆栈(默认情况下)。
我只是想知道...如 Wiki 渲染堆栈中所述,控件应呈现在所有对象的顶部(默认情况下始终可见),但它们不会(查看kitchensink
演示)。
恕我直言,此行为应由canvas.controlsInStack = true
类的标志设置。
对了……那东西真的很漂亮!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.