Fabricjs - 仅通过边框选择

Question

我正在使用Fabric.js在画布上绘制一些矩形。默认行为是在矩形内单击以选择它。如何更改行为，使其仅在单击矩形边框时才被选中？

单击矩形内部而不是边框​​应该什么都不做。

您可以通过在 TradingView.com 图表上绘制一个矩形来查看此行为

它在结构中有一个选项，如果没有，我该如何实施它？

Answer 1

此方法会重写_checkTargetFabricJS 中的方法，以拒绝距边界超过指定距离（由clickableMargin变量定义）的点击。

//sets the width of clickable area
var clickableMargin = 15;

var canvas = new fabric.Canvas("canvas");

canvas.add(new fabric.Rect({
  width: 150,
  height: 150,
  left: 25,
  top: 25,
  fill: 'green',
  strokeWidth: 0
}));

//overrides the _checkTarget method to add check if point is close to the border
fabric.Canvas.prototype._checkTarget = function(pointer, obj, globalPointer) {
  if (obj &&
      obj.visible &&
      obj.evented &&
      this.containsPoint(null, obj, pointer)){
    if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {
      var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y);
      if (!isTransparent) {
        return true;
      }
    }
    else {
    	var isInsideBorder = this.isInsideBorder(obj);
    	if(!isInsideBorder) {
      	return true;
      }
    }
  }
}

fabric.Canvas.prototype.isInsideBorder = function(target) {
   var pointerCoords = target.getLocalPointer();
   if(pointerCoords.x > clickableMargin && 
     pointerCoords.x < target.getScaledWidth() - clickableMargin && 
     pointerCoords.y > clickableMargin && 
     pointerCoords.y < target.getScaledHeight() - clickableMargin) {
     return true;
   }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<canvas id="canvas" height="300" width="400"></canvas>