JCanvas: стирание Canvas не стирает перетаскиваемые элементы

Я хотел улучшить приложение для рисования, которое я создал с помощью JS, позволяя пользователю рисовать различные фигуры. Я хочу сделать его удобным для пользователей, позволяя им перетаскивать эти фигуры. Поэтому я использовал jCanvas, так как он предлагает простой способ перетаскивания фигуры:

$("#can").drawRect({
   draggable: true,
   fillStyle: "#000",
   width: 100, height: 100,
   x: 100,
   y: 100,
});

Проблема в том, что мне нужна функция, чтобы стереть его снова. Итак, я сделал этот скрипт:

<script>
   $("#can").drawRect({
      draggable: true,
      fillStyle: "#000",
      width: 100, height: 100,
      x: 100,
      y: 100,
   });

   $("#erase").click(function () {
      $("#can").clearCanvas();
   });
</script>
<canvas id="can" width="200px" height="150px"></canvas>
<button id="erase">Clear Canvas</button>

Однако это не работает. Когда я стираю, сначала все стирается, но когда я пытаюсь рисовать на холсте, форма появляется снова.

Я проверил код jCanvas, и оказалось, что он просто рисует тонны прямоугольников при перетаскивании и очищает их, чтобы создать иллюзию перетаскиваемой фигуры. Но когда это происходит, очищенный холст отступает, и форма снова видна.

Есть ли способ очистить форму навсегда? Или мне нужно перезагрузить страницу, чтобы это сработало?

заранее спасибо


javascript jquery html5-canvas jcanvas
person nicom    schedule 22.02.2021    source источник
comment
Это весь ваш код? Используете ли вы слои?   -  person Luis Gustavo Araujo    schedule 22.02.2021
comment
Да, это весь мой код. Я не использую слои, так как не могу понять, как они работают.   -  person nicom    schedule 22.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

Вы не используете слой явно, но когда вы устанавливаете свойство перетаскивания, холст создает слой:

Слои можно сделать перетаскиваемыми с помощью свойства draggable.

https://projects.calebevans.me/jcanvas/docs/draggableLayers/

Итак, clearCanvas не подходит:

Этот метод не предназначен для использования, если вы используете jCanvas Layer API, потому что во многих случаях API выполняет перерисовку за вас, и поэтому, если вы попытаетесь очистить холст. ваши слои в конечном итоге будут перерисованы jCanvas, когда это будет необходимо.

Вам нужно удалить слой:

$('canvas').removeLayer(0);

or

$('canvas').removeLayers();

Дополнительные варианты смотрите в документе: https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

Если это поможет вам, проверьте мой ответ как правильный или проголосуйте!

person Luis Gustavo Araujo    schedule 22.02.2021