Question

我尝试了很多东西，比如计算位置，处理原始fabricjs中的事件。有没有做过这个呢？

Answer 1

可以通过向fabric.Group对象添加选项subTargetCheck: true来侦听内部对象上的事件。

    // create a group
    let group = new fabric.Group([circle, rect], {
        subTargetCheck: true
    });

    circle.on('mousedown', function(e) { 
        // e.target should be the circle
        console.log(e.target);
    });

Answer 2

我从asturur repo下载了fabricjs。 build fabric.js文件

node build.js modules=ALL exclude=json,gestures

它有效！

然后，您可以在组中的对象上使用事件。

canvas._objects[0]._objects[0].on('mousedown', function(e){ this.stroke = 'black'});

在我的应用程序中，我决定从mousedown回调中搜索事件

group.on('mousedown', function(e){
    var innerTarget  = group._searchPossibleTargets(e.e);
    console.log(innerTarget);
});

group._searchPossibleTargets = function(e) {
    var pointer = this.canvas.getPointer(e, true);
    var i = objects.length,
        normalizedPointer = this.canvas._normalizePointer(this, pointer);

    while (i--) {
        if (this.canvas._checkTarget(normalizedPointer, this._objects[i])) {
            return this._objects[i];
        }
    }
    return null;
}

Answer 3

在FabricJS中，一旦将对象组装到一个组中，事件就会发生在那里，甚至是所选事件 - 因此您无法检测到正在选择组中的哪些项目。在事件处理程序内

public class PQ {

private int[] pq;
private int size;


public PQ(int capacity) {
    if (capacity < 1) {
        throw new IllegalArgumentException();
    }
    this.pq = new int[capacity + 1];
    this.size = 0;

}

public void insert(int number) {
           size++;
           //Code
}
public void remove(int number) {
           size--;
           //Code
}

private int[] resize() {
    int[] newPQ = new int[this.pq.length * 2];
    for (int i = 0; i < this.pq.length; i++) {
        newPQ[i] = this.pq[i];
    }
    return newPQ;
}
}

即使在组装到组中之前将事件处理程序附加到对象，处理程序也不会触发：（

Answer 4

这可能对您有所帮助http://jsfiddle.net/UKbaseduser/Kt9Mk/1/

$("#1").click(function(){
  ZoomIn('tmp1');
});
$("#2").click(function(){
  ZoomOut('tmp1');
});
$("#3").click(function(){
  ZoomIn('tmp2');
});
$("#4").click(function(){
  ZoomOut('tmp2');
});

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

var rect1 = new fabric.Rect({ left: 150, top: 150, width: 100, height: 100, fill: 'green'});
var rect2 = new fabric.Rect({ left: 250, top: 250, width: 100, height: 100, fill: 'green'});
rect1.grp='tmp1';
rect2.grp='tmp1';
var c = new fabric.Circle({
        left: 200,
        top: 200,
        radius: 50,
        fill: 'red',
        opacity:0.8
      });
c.grp='tmp2';
canvas.add(rect1);
canvas.add(rect2);
canvas.add(c);
canvas.renderAll();

function ZoomIn(inGrp){
    var SCALE_FACTOR = 1.2;
    var objects = canvas.getObjects();
    objects.forEach(function(obj){
        if (obj.grp==inGrp){     
            var scaleX = obj.scaleX;
            var scaleY = obj.scaleY;
            var left = obj.left;
            var top = obj.top;

            var tempScaleX = scaleX * SCALE_FACTOR;
            var tempScaleY = scaleY * SCALE_FACTOR;
            var tempLeft = left * SCALE_FACTOR;
            var tempTop = top * SCALE_FACTOR;
            obj.scaleX = tempScaleX;
            obj.scaleY = tempScaleY;
            obj.left = tempLeft;
            obj.top = tempTop;
            obj.setCoords();
            }
        });
    canvas.renderAll();
 }
function ZoomOut(inGrp){
    var SCALE_FACTOR = 1.2;
    var objects = canvas.getObjects();
    objects.forEach(function(obj){
        if (obj.grp==inGrp){     
            var scaleX = obj.scaleX;
            var scaleY = obj.scaleY;
            var left = obj.left;
            var top = obj.top;

            var tempScaleX = scaleX * 1/SCALE_FACTOR;
            var tempScaleY = scaleY * 1/SCALE_FACTOR;
            var tempLeft = left * 1/SCALE_FACTOR;
            var tempTop = top * 1/SCALE_FACTOR;
            obj.scaleX = tempScaleX;
            obj.scaleY = tempScaleY;
            obj.left = tempLeft;
            obj.top = tempTop;
            obj.setCoords();
            }
        });
    canvas.renderAll();
 }

此外还有类似的讨论https://groups.google.com/forum/#!topic/fabricjs/hQwHxGfyx6w可能会引发一些指示。

Answer 5

这对我有用：

// create a group
let group = new fabric.Group([circle, rect], {
    subTargetCheck: true
});

canvas.on('mouse:down', function (e) {
// clicked item will be
  console.log(e.subTargets[0])  
});

Answer 6

我没有足够的声誉来就现有答案发表评论，所以就这样。我正在使用Fabric v2.X，所有现有解决方案均无法正常工作。对于不再存在的方法，可能是控制台错误，或者对于false，总是出现containsPoint，所以我建立了自己的方法。

js
const getSelectedObject = (target, e) => {
  const point = target.canvas.getPointer(e, false);

  const objects = findSubTargets(target, []);

  const objectIndex = objects
    .reduce((reduction, object, index) => {
      reduction.push(
        getBoundingPoints(
          object,
          index === 0 ? 0 : reduction[0].start.x,
          index === 0 ? 0 : reduction[0].start.y
        )
      );

      return reduction;
    }, [])
    .reverse()
    .findIndex((bounds) => pointIsInBounds(point, bounds));

  return objects.reverse()[objectIndex];
};

和辅助功能

js
const getBoundingPoints = (object, deltaX, deltaY) => {
  const coords = object.get("aCoords");

  const x1 = coords.tl.x + deltaX;
  const y1 = coords.tl.y + deltaY;
  const x2 = coords.br.x + deltaX;
  const y2 = coords.br.y + deltaY;

  return {
    start: { x: x1, y: y1 },
    finish: { x: x2, y: y2 }
  };
};


const pointIsInBounds = (point, bounds) => {
  const xIsInBounds = point.x >= bounds.start.x && point.x <= bounds.finish.x;
  const yIsInBounds = point.y >= bounds.start.y && point.y <= bounds.finish.y;

  return xIsInBounds && yIsInBounds;
};


const findSubTargets = (target, objects) => {
  if (target.isType("group")) {
    objects.push(target);
    target.forEachObject((object) => findSubTargets(object, objects));
  }

  return objects;
};

我已经用简单的组，嵌套组以及组内组内的组进行了测试。

Answer 7

您可以将subTarget添加到组中。子目标对象将添加到目标事件内部。

let group = new fabric.Group([circle, rect], {
    subTargetCheck: true
});

canvas.on('mouse:down', (event) => {
    const { subTargets } = event; // subTargets will include circle object
    .... 
})

FabricJS Catch单击组内的对象

7 个答案: