在 Fabric.js 中使用复选框创建对象 hidden/visible

Question

如何通过复选框在 Canvas 中创建一个 visible/hidden 对象？

<input type="checkbox" id="visible" name="visible" checked> Visible
<canvas id="vertical" class="banner-design" height="600" width="500" style="border: 1px solid #000000;"></canvas>

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
this.__canvases.push(canvas);

Codepen 演示：https://codepen.io/geen21/pen/LYRXLqx

Answer 1

为此，将事件侦听器附加到复选框的 change 事件，并使用它来更新 Circle 对象的 visible 属性。

var canvas = new fabric.Canvas("vertical", {
  selectionColor: 'rgba(0,255,0,0.3)',
  selectionBorderColor: 'red',
  selectionLineWidth: 5
});

let circle = new fabric.Circle({
  radius: 30,
  fill: "#f55",
  top: 100,
  left: 100
});
canvas.add(circle);

//this.__canvases.push(canvas);

document.querySelector('#visible').addEventListener('change', e => {
  circle.visible = e.target.checked;
  canvas.renderAll();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" id="visible" name="visible" checked> Visible
<canvas id="vertical" class="banner-design" height="600" width="500" style="border: 1px solid #000000;"></canvas>

在 Fabric.js 中使用复选框创建对象 hidden/visible

Make object hidden/visible with checkbox in Fabric.js

javascript

jquery

canvas

html5-canvas

fabricjs