Блог

Главная - Вопросы по программированию - Сделать объект скрытым / видимым с помощью флажка в Fabric.js

Сделать объект скрытым / видимым с помощью флажка в Fabric.js

#javascript #jquery #canvas #html5-canvas #fabricjs

#javascript #jquery #холст #html5-холст #fabricjs

Вопрос:

Как сделать видимый / скрытый объект на холсте с помощью флажка?

 <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

Ответ №1:

Для достижения этой цели присоедините прослушиватель событий к change событию флажка и используйте его для обновления visible свойства Circle объекта.

 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>

Метки: