如何仅选择透明背景矩形中的笔划？答案

【问题标题】：How to select only the stroke in a transparent backgroud rectangle?如何仅选择透明背景矩形中的笔划？
【发布时间】：2020-04-23 22:08:24
【问题描述】：

如何使透明矩形仅在单击笔划时才可选？从下面的 sn-p 中可以看出，我尝试了两种不同的方法，左侧的对象是具有透明背景的矩形，右侧的对象是具有多条线的组对象。我想知道如何仅在单击笔划时才能选择元素，如果单击对象被选中的内部透明区域，两个对象都会被选中。

var canvas = new fabric.Canvas('a');
canvas.add(new fabric.Rect({
  left: 10,
  top: 20,
  height: 160,
  width: 80,
  fill: 'transparent',
  stroke: 'red'
}));
var rectLine1 = new fabric.Line([0, 0, 80, 0], {
  stroke: 'red',
  left: 100,
  top: 20
});
var rectLine2 = new fabric.Line([0, 160, 0, 0], {
  stroke: 'red',
  left: 100,
  top: 20
});
var rectLine3 = new fabric.Line([0, 160, 0, 0], {
  stroke: 'red',
  left: 180,
  top: 20
});
let rectLine4 = new fabric.Line([0, 0, 80, 0], {
  stroke: 'red',
  left: 100,
  top: 180
});
var group = new fabric.Group([rectLine1, rectLine2, rectLine3, rectLine4], {
  left: 110,
  top: 20
})
canvas.add(group)
canvas.renderAll();

.c {
  border: 2px solid black;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="a" class="c" width="200" height="200"></canvas>

【问题讨论】：

你为什么要这样做？我有一种感觉，这会使选择细笔划的对象变得更加困难......有根据的猜测，这将需要重构核心结构代码
我的项目要求...但是我刚刚发现在对象上设置 perPixelTargetFind: true 实际上可以解决问题
现在我需要一种方法来增加一些容差，因为正如你所说，很难选择细笔划的对象

标签： javascript canvas fabricjs

【解决方案1】：

我发现设置perPixelTargetFind: true可以解决这个问题，你也可以在画布上设置一个容差targetFindTolerance: 10，以便能够选择细笔划的对象。我将在下面粘贴工作代码以防有人需要。

var canvas = new fabric.Canvas('a', {
  targetFindTolerance: 10
});
canvas.add(new fabric.Rect({
  left: 10,
  top: 20,
  height: 160,
  width: 80,
  fill: 'transparent',
  stroke: 'red',
  perPixelTargetFind: true,
}));
canvas.renderAll();

.c {
  border: 2px solid black;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="a" class="c" width="200" height="200"></canvas>

【讨论】：