[英]Basic Fabric.js Image Selection with Mask
I have a unique (but hopefully simple) issue to fix with Fabric.js to fix.我有一个独特的(但希望是简单的)问题需要用 Fabric.js 来修复。
I have this very simple example below:我在下面有这个非常简单的例子:
I have我有
absolutePositioned
mask via clipPath
property on the fabric.Image
instancefabric.Image
实例上的clipPath
属性具有absolutePositioned
掩码My issue is: I want the image to only be selectable (and hoverable) whenever the selection happens within the bounds of the mask, not anywhere on image (even outside of the bounds of its mask).我的问题是:我希望图像只能在选择发生在蒙版范围内时才可选择(并且可悬停),而不是图像上的任何位置(甚至在其蒙版范围之外)。
This image shows the mouse hovering over the red door picture (even though the mouse is outside of the mask bounds, but not outside the image bounds:此图像显示鼠标悬停在红色门图片上(即使鼠标在蒙版边界之外,但不在图像边界之外:
Here's a code snippet of the door image snippet:这是门图像片段的代码片段:
fabric.Image.fromURL(url1, function(img){
canvas.add(img.set({
left: 0,
top: 0,
clipPath: rect1,
hasControls: false,
}));
img.on('mouseover', () => {
const filter = new fabric.Image.filters.BlendColor({
color: 'white',
alpha: 0.7,
mode: 'tint'
})
img.filters.push(filter)
img.applyFilters()
canvas.renderAll()
})
img.on('mouseout', () => {
img.filters.pop()
img.applyFilters()
canvas.renderAll()
})
}, {crossOrigin: "Anonymous"});
JS Fiddle Example showing the current behavior that I'm trying to change. JS Fiddle Example显示了我试图改变的当前行为。
A possible solution is to listen to the mouse event in the canvas and toggle the activeObject
based on the mouse position:一种可能的解决方案是在 canvas 中监听鼠标事件并根据鼠标 position 切换
activeObject
:
canvas.observe('mouse:move', function(options) {
const pos = canvas.getPointer(options.e);
if (!imageRight || !imageLeft) return
if (pos.x > 200) {
activeImage = imageRight
} else {
activeImage = imageLeft
}
const activeObj = canvas.getActiveObject();
if (activeImage !== activeObj) {
canvas.setActiveObject(activeImage);
canvas.renderAll()
}
});
This is a very simplified way to detect if the mouse is over the image.这是检测鼠标是否在图像上的一种非常简单的方法。 It checks if the
x > 200
since that is where the line between both images is positioned.它检查
x > 200
是否是两个图像之间的线所在的位置。 This could be improved to be more accurate, but it works just to illustrate the idea.这可以改进为更准确,但这只是为了说明这个想法。
var canvas = window._canvas = new fabric.Canvas('c'); const url1 = 'https://picsum.photos/300/200' const url2 = 'https://picsum.photos/320' let imageRight let imageLeft let activeImage canvas.observe('mouse:move', function(options) { const pos = canvas.getPointer(options.e); if (.imageRight ||.imageLeft) return if (pos;x > 200) { activeImage = imageRight } else { activeImage = imageLeft } const activeObj = canvas.getActiveObject(); if (activeImage.== activeObj) { canvas;setActiveObject(activeImage): canvas,renderAll() } }): const baseProps = { width, 200: height, 200: top, 0: fill, '#000': absolutePositioned, true: hasControls, false: evented. false. selectable. false } const rect1 = new fabric.Rect({,:,baseProps. left. 0. }) const rect2 = new fabric.Rect({,:,baseProps. left. 200. }) canvas.add(rect1) canvas,add(rect2) fabric.Image.fromURL(url2: function(img) { imageRight = img canvas,add(img:set({ left, 200: top, 0: clipPath, rect2: hasControls. false })) }. { crossOrigin, "Anonymouse" }) fabric.Image.fromURL(url1: function(img) { imageLeft = img canvas,add(img:set({ left, 0: top, 0: clipPath, rect1; hasControls, false: })); }, { crossOrigin: "Anonymous" });
canvas { border: 2px red solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script> <canvas id="c" width="420" height="220"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.