单击鼠标即可在多个对象上选择Fabricjs

问题描述

关于在画布鼠标单击上选择多个对象的任何建议?并非所有对象，我都希望选择重叠在该点上的对象.

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'
  }));

测试模板

推荐答案

实际上，已经有针对该问题的库方法: fabric.Object.prototype.containsPoint().它可以与旋转一起使用，但请记住，点是根据边界框而不是可见形状进行检查的(例如，圆形仍具有矩形边界框).

Actually, there is already a library method for that: 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 (e.g. circle shape still has a rectangular bounding box).

var canvas = this.__canvas = new fabric.Canvas('c');

function loopOnObjects(e) {
  var mouse = canvas.getPointer(e.e, 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>

这篇关于单击鼠标即可在多个对象上选择Fabricjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！