Fabric.js-仅通过边框选择 [英] Fabricjs - selection only via border

问题描述

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

I'm using Fabric.js to draw some rectangles on a canvas. The default behavior is that clicking inside a rectangle selects it. How can I change the behavior such that it is only selected when clicking on the border of the rectangle?

在矩形内部而不是边框​​上单击不起作用.

Clicking inside the rectangle but not on the border should do nothing.

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

You can see this behavior by drawing a rectangle on a TradingView.com chart

在Fabric中有一个选项，如果没有，我该如何实现呢?

It there an option for this in fabric, and if not how could I go around implementing it?

推荐答案

此方法会覆盖FabricJS中的 _checkTarget 方法，以拒绝距边框超过指定距离(由 clickableMargin 变量).

This approach overrides the _checkTarget method within FabricJS to reject clicks that are more than a specified distance from the border (defined by the clickableMargin variable).

//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>

这篇关于Fabric.js-仅通过边框选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！