如何解决使用 Fabric.js 中的复选框使对象隐藏/可见
如何通过复选框使 Canvas 中的对象可见/隐藏?
<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.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
this.__canvases.push(canvas);
代码笔演示:https://codepen.io/geen21/pen/LYRXLqx
解决方法
要实现此目的,请将事件侦听器附加到复选框的 change
事件,并使用它来更新 visible
对象的 Circle
属性。
var canvas = new fabric.Canvas("vertical",{
selectionColor: 'rgba(0,255,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。