[英]Fabricjs Selection on multiple objects on mouse click
Any suggestion on select multi objects on canvas mouse click? 关于在画布上单击选择多个对象有什么建议吗? not all object, I want to select objects that overlay on the point.
不是所有对象,我想选择重叠在该点上的对象。
For my knowledge, the target on mouse event is always the top most object only. 就我所知,鼠标事件的目标始终始终只是最上面的对象。 I had tried to bind event on object, but it wont fired for those at the back side.
我曾尝试将事件绑定到对象上,但不会为背面的对象触发事件。 I had tried select based on item size and height, but it is not working perfectly after rotate.
我曾尝试根据商品的大小和高度进行选择,但旋转后无法正常工作。
var canvas = this.__canvas = new fabric.Canvas('c', {
enableRetinaScaling: false
});
function LoopOnObjects(e) {
var mouse = canvas.getPointer(e.e, false);
var x = Math.ceil(mouse.x);
var y = Math.ceil(mouse.y);
var count = 0;
canvas.getObjects().forEach(function(object, index){
if(CheckObjectWithin(object, x, y)) {
count++;
}
});
alert("ya, there is " + count + " objects touch on click");
}
function CheckObjectWithin(object, x, y) {
var objectBoundRect = object.getBoundingRect(true);
var widthRange = objectBoundRect.width;
var heightRange = objectBoundRect.height;
if (x > objectBoundRect.left && x < objectBoundRect.left + widthRange) {
if (y > objectBoundRect.top && y < objectBoundRect.top + heightRange) {
return true;
}
}
return false;
}
function GetElement(e) {
LoopOnObjects(e);
}
canvas.on("mouse:up", GetElement);
canvas.add(new fabric.Rect({
width: 100, height: 100, left: 100, top: 20, angle: -10,
fill: 'rgba(0,200,0,0.5)'
}));
canvas.add(new fabric.Rect({
width: 50, height: 100, left: 220, top: 80, angle: 45,
stroke: '#eee', strokeWidth: 10,
fill: 'rgba(0,0,200,0.5)'
}));
canvas.add(new fabric.Circle({
radius: 50, left: 220, top: 175, fill: '#aac'
}));
Actually, there is already a library method for that: fabric.Object.prototype.containsPoint() . 实际上,已经有一个库方法用于: fabric.Object.prototype.containsPoint() 。 It works with rotate, but keep in mind that the point is checked against the bounding box, not the visible shape (eg circle shape still has a rectangular bounding box).
它可以与旋转一起使用,但是请记住,点是根据边界框而不是可见形状进行检查的(例如,圆形仍具有矩形边界框)。
var canvas = this.__canvas = new fabric.Canvas('c'); function loopOnObjects(e) { var mouse = canvas.getPointer(ee, false); var point = new fabric.Point(mouse.x, mouse.y) var count = 0; canvas.getObjects().forEach(function(object, index){ if (object.containsPoint(point)) { count++; } }); } function getElement(e) { loopOnObjects(e); } canvas.on("mouse:down", getElement); canvas.add(new fabric.Rect({ width: 100, height: 100, left: 100, top: 20, angle: -10, fill: 'rgba(0,200,0,0.5)' })); canvas.add(new fabric.Rect({ width: 50, height: 100, left: 220, top: 80, angle: 45, stroke: '#eee', strokeWidth: 10, fill: 'rgba(0,0,200,0.5)' })); canvas.add(new fabric.Circle({ radius: 50, left: 220, top: 175, fill: '#aac' }));
#c { border: 1px black solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script> <canvas id="c" width="500" height="300"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.