javascript - 如何仅选择透明背景矩形中的笔触?
问题描述
仅当我单击笔画时,如何才能使透明矩形可选?我尝试了两种不同的方法,如下面的代码片段所示,左侧的对象是具有透明背景的矩形,右侧的对象是具有多行的组对象。我想知道如何仅在单击笔画时才能选择元素,如果单击对象被选中的内部透明区域,则两个对象都将被选中。
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
解决了这个问题,你也可以在画布上设置一个容差,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>
推荐阅读
- javascript - 在 JavaScript 中过滤嵌套对象
- python - 尝试开发二十一点游戏的计分系统
- c# - .NET Core 3.1/IHostBuilder 的 UseUrls 等效项
- firebase - 向“Xamarin.Android.Crashlytics”添加引用会导致多个编译时错误
- operating-system - 操作系统中的文件系统和文件管理有什么区别?
- ios - NSMutableAttributedString 添加隐藏文本的多个属性
- node.js - Discord.js 音乐机器人无法在 Linux 上运行(但在 Windows 上运行)
- excel - VBA 错误“对象变量或未设置块变量”
- java - JAXB 在类路径上使用 (SAXON-HE) 解组非常慢
- python - 在说 y=[example] 之后,我使用 list.remove(y) python 不记得我给 y 分配了什么