[英]Fabric.js: Image controls behind an overlay image
I'm building a canvas user interface with jquery and fabric.js library and I set an overlay png image with a transparent section using the following code我正在使用 jquery 和 fabric.js 库构建一个 canvas 用户界面,并使用以下代码设置一个带有透明部分的叠加 png 图像
var bgImgSrc = bgImg.attr('src');
canvas.setOverlayImage(bgImgSrc, function(img){
canvas.renderAll();
});
I also added an image behind the overlay and resized to fit the container using the following code我还在叠加层后面添加了一个图像,并使用以下代码调整大小以适合容器
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();
});
And it works as expected, however, when I click on the image to scale/resize it, I don't see the controls, except through the transparent space of the overlay image.它按预期工作,但是,当我单击图像以对其进行缩放/调整大小时,除了通过覆盖图像的透明空间外,我看不到控件。 Controls are behind the overlay image, is there a way to force show the image controls without having to put the entire image in front of the overlay?
控件在叠加图像后面,有没有办法强制显示图像控件而不必将整个图像放在叠加图像前面?
Just set the boolean controlsAboveOverlay
:只需设置 boolean
controlsAboveOverlay
:
canvas.controlsAboveOverlay = true;
The problem here is that overlay image is rendered on top of objects' controls.这里的问题是叠加图像呈现在对象的控件之上。 This is expected behavior.
这是预期的行为。 Take a look at this wiki article , which shows the z-index of various things on fabric canvas and in which order they're rendered.
看看这篇 wiki 文章,它显示了 fabric canvas 上各种事物的 z-index 以及它们的呈现顺序。
There are plans to add support for object controls that are always on top, as you can see from this ticket , but I can't tell you when that's going to happen.计划添加对始终位于顶部的 object 控件的支持,正如您从这张票中看到的那样,但我无法告诉您何时会发生。
You can also try using "after:render" callback and draw image manually onto canvas.您也可以尝试使用“after:render”回调并手动将图像绘制到 canvas 上。
canvas.controlsAboveOverlay = true; //did the job... but:
I don't want to render controls above the overlay image (as overlay means overlay to me).我不想在覆盖图像上方渲染控件(因为覆盖对我来说意味着覆盖)。 I just want to render the stack exactly as described in Wiki (by default).
我只想完全按照 Wiki 中的描述渲染堆栈(默认情况下)。
I just wonder...as described in the Wiki rendering-stack, the controls should be rendered on top of all objects (always visible by default), but they do not (look at kitchensink
demo).我只是想知道...如 Wiki 渲染堆栈中所述,控件应呈现在所有对象的顶部(默认情况下始终可见),但它们不会(查看
kitchensink
演示)。
IMHO this behaviour should be set by a flag like canvas.controlsInStack = true
.恕我直言,此行为应由
canvas.controlsInStack = true
类的标志设置。
By the way... that thing is really beautiful!对了……那东西真的很漂亮!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.