Как сделать прозрачный прямоугольник доступным для выбора только при нажатии на обводку? Я попробовал два разных подхода, как вы можете видеть из фрагмента ниже, объект слева - это прямоугольник с прозрачным фоном, объект справа - это групповой объект с несколькими строками. Я хочу знать, как можно выбрать элемент только тогда, когда я нажму на обводку, и с обоими объектами, если вы нажмете на внутреннюю прозрачную область, объект станет выделенным.
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>