[英]Make object hidden/visible with checkbox in Fabric.js
如何通过复选框在 Canvas 中显示/隐藏 object?
<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);
为此,将事件侦听器附加到复选框的change
事件,并使用它来更新Circle
object 的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.