Javascript Fabricjs在对象路径上检测鼠标

只有当鼠标位于形状本身而不是包含它的虚拟正方形上时，才能在Fabric.js中捕获

object:over

我有一个，它包含一个U形。您可以看到，即使我将指针放在U内并且没有接触任何行，它仍然会将其检测为

对象：over

事件

Javascript:

var canvas = new fabric.Canvas("c1", {
    isDrawingMode: false
});

canvas.loadFromJSON(objectsJson, function () {
    canvas.renderAll();
});

canvas.on("object:over", function () {
    console.log("object over");
});
canvas.on("object:out", function () {
    console.log("object out");
});

// code to capture mouse over object while isDrawingMode = false
canvas.findTarget = (function (originalFn) {
    return function () {
        var target = originalFn.apply(this, arguments);
        if (target) {
            if (this._hoveredTarget !== target) {
                canvas.fire('object:over', { target: target });
                if (this._hoveredTarget) {
                    canvas.fire('object:out', { target: this._hoveredTarget });
                }
                this._hoveredTarget = target;
            }
        }
        else if (this._hoveredTarget) {
            canvas.fire('object:out', { target: this._hoveredTarget });
            this._hoveredTarget = null;
        }
        return target;
    };
})(canvas.findTarget);

---

在

fabric.js中，

将为每个形状创建虚拟框，当您与该虚拟框相交时，将触发绑定事件

在

fabric.js上创建任何形状的过程中，

下面的函数通过创建各种点来创建虚拟长方体，例如： 左上、右上、左下、右下、左中、右中、中下和中上。

setCoords: function() {
   var strokeWidth = this.strokeWidth > 1 ? this.strokeWidth : 0,
   padding = this.padding,
   theta = degreesToRadians(this.angle);

   this.currentWidth = (this.width + strokeWidth) * this.scaleX + padding * 2;
   this.currentHeight = (this.height + strokeWidth) * this.scaleY + padding * 2;

   // If width is negative, make postive. Fixes path selection issue
   if (this.currentWidth < 0) {
    this.currentWidth = Math.abs(this.currentWidth);
   }

   var _hypotenuse = Math.sqrt(
    Math.pow(this.currentWidth / 2, 2) +
    Math.pow(this.currentHeight / 2, 2));

   var _angle = Math.atan(isFinite(this.currentHeight / this.currentWidth) ? this.currentHeight / this.currentWidth : 0);

   // offset added for rotate and scale actions
   var offsetX = Math.cos(_angle + theta) * _hypotenuse,
      offsetY = Math.sin(_angle + theta) * _hypotenuse,
      sinTh = Math.sin(theta),
      cosTh = Math.cos(theta);

   var coords = this.getCenterPoint();
   var tl = {
    x: coords.x - offsetX,
    y: coords.y - offsetY
   };
   var tr = {
    x: tl.x + (this.currentWidth * cosTh),
    y: tl.y + (this.currentWidth * sinTh)
   };
   var br = {
    x: tr.x - (this.currentHeight * sinTh),
    y: tr.y + (this.currentHeight * cosTh)
   };
   var bl = {
    x: tl.x - (this.currentHeight * sinTh),
    y: tl.y + (this.currentHeight * cosTh)
   };
   var ml = {
    x: tl.x - (this.currentHeight/2 * sinTh),
    y: tl.y + (this.currentHeight/2 * cosTh)
   };
   var mt = {
    x: tl.x + (this.currentWidth/2 * cosTh),
    y: tl.y + (this.currentWidth/2 * sinTh)
   };
   var mr = {
    x: tr.x - (this.currentHeight/2 * sinTh),
    y: tr.y + (this.currentHeight/2 * cosTh)
   };
   var mb = {
    x: bl.x + (this.currentWidth/2 * cosTh),
    y: bl.y + (this.currentWidth/2 * sinTh)
   };
   var mtr = {
    x: mt.x,
    y: mt.y
   };
  this.oCoords = {
    // corners
    tl: tl, tr: tr, br: br, bl: bl,
    // middle
    ml: ml, mt: mt, mr: mr, mb: mb,
    // rotating point
    mtr: mtr
   };

   // set coordinates of the draggable boxes in the corners used to scale/rotate the image
   this._setCornerCoords && this._setCornerCoords();

   return this;
}

setCoords:function（）{
var strokeWidth=this.strokeWidth>1？this.strokeWidth:0，
padding=this.padding，
θ=度弧度（该角度）；
this.currentWidth=（this.width+strokeWidth）*this.scaleX+padding*2；
this.currentHeight=（this.height+strokeWidth）*this.scaleY+padding*2；
//如果宽度为负数，则设置为正数。修复了路径选择问题
如果（此.currentWidth<0）{
this.currentWidth=Math.abs（this.currentWidth）；
}
var_斜边=Math.sqrt(
Math.pow（this.currentWidth/2，2）+
Math.pow（this.currentHeight/2,2））；
var_angle=Math.atan（isFinite（this.currentHeight/this.currentWidth）？this.currentHeight/this.currentWidth:0）；
//为旋转和缩放动作添加了偏移
var offsetX=数学cos（_角度+θ）*_斜边，
偏置=数学正弦（_角度+θ）*_斜边，
sinTh=Math.sin（θ），
cosTh=数学cos（θ）；
var coords=this.getCenterPoint（）；
变量tl={
x:coords.x-offsetX，
y:coords.y-offsetY
};
var tr={
x:tl.x+（此.currentWidth*成本），
y:tl.y+（此.currentWidth*sinTh）
};
变量br={
x:tr.x-（此.currentHeight*sinTh），
y:tr.y+（this.currentHeight*cosTh）
};
变量bl={
x:tl.x-（此.currentHeight*sinTh），
y:tl.y+（this.currentHeight*成本）
};
变量ml={
x:tl.x-（此.currentHeight/2*sinTh），
y:tl.y+（this.currentHeight/2*成本）
};
var mt={
x:tl.x+（此.currentWidth/2*成本），
y:tl.y+（此.currentWidth/2*sinTh）
};
var mr={
x:tr.x-（此.currentHeight/2*sinTh），
y:tr.y+（此.currentHeight/2*成本）
};
变量mb={
x:bl.x+（此.currentWidth/2*成本），
y:bl.y+（此.currentWidth/2*sinTh）
};
var mtr={
x:x山，
y:y山
};
此.ocoods={
//角落
tl:tl，tr:tr，br:br，bl:bl，
//中间的
ml:ml，mt:mt，mr:mr，mb:mb，
//旋转点
地铁：地铁
};
//在用于缩放/旋转图像的拐角处设置可拖动框的坐标
此。_setCornerCoords&&this。_setCornerCoords（）；
归还这个；
}

因此，每当您使用鼠标与这8个点中的任何一个相交时，都会触发附加的事件

据我所知，fabric.js不能提供您想要的功能

更新：-

---

正如RaraituL所说，像素检测可以通过

perPixelTargetFind（）

实现，您可以在这里获得示例

您需要

perPixelTargetFind

和

targetFindTolerance

（请参阅此演示-@kangax:Works完美无瑕！虽然我认为

targetFindTolerance

只在元素“内部”起作用，而不在元素外部起作用。我已将其设置为100，但仍然只有在“触摸”对象时才会激活。顺便说一句，对你做的这个很棒的项目有很好的评价。它只是开箱即用！太完美了！很高兴你喜欢

perPixelTargetFind

改变这种行为的感觉。看起来很有趣，你用

perPixelTargetFind

试过吗？是的，它很管用！检查