使用 Fabric.js 中的复选框使 object 隐藏/可见

Question

How to make a visible/hidden object in the Canvas via the checkbox?

<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);

A codepen demo: https://codepen.io/geen21/pen/LYRXLqx

Answer 1

To achieve this attach an event listener to the change event of the checkbox and use it to update the visible property of the Circle object.

 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>