Мне нужен совет о том, как добавить новую функцию в мой модуль приложения для рисования, а именно стирание. Я новичок в JS, поэтому надеюсь, что кто-то посоветует мне.
Ниже я прикрепляю js-код модуля приложения для рисования, который у меня есть:
function _(selector){
return document.querySelector(selector);
}
function setup(){
let canvas = createCanvas(644, 594);
canvas.parent("canvas-wrapper");
background(255);
}
function mouseDragged(){
let type = _("#pen-pencil").checked?"pencil":"brush";
let size = parseInt(_("#pen-size").value);
let color = _("#pen-color").value;
fill(color);
stroke(color);
if (type == "pencil"){
line(pmouseX, pmouseY, mouseX, mouseY);
} else {
ellipse(mouseX, mouseY, size, size);
}
}
_("#reset-canvas").addEventListener("click", function(){
background(255);
});
_("#save-canvas").addEventListener("click",function(){
saveCanvas(canvas, "screen", "png");
});
HTML-код приложения для рисования:
<div class = "app">
<div class = "controls">
<div class = "type">
<input type = "radio" name = "pen-type" id = "pen-pencil" checked>
<label for = "pen-pencil">
<i class = "bi bi-pencil"></i>
</label>
<input type = "radio" name = "pen-type" id = "pen-brush">
<label for = "pen-brush">
<i class = "bi bi-brush"></i></i>
</label>
</div>
<div class = "size">
<label for = "pen-size">Hrubost</label>
<input type = "range" id = "pen-size" min = "1" max = "50">
</div>
<div class = "color">
<label for = "pen-color">Barva</label>
<input type = "color" id = "pen-color" value = "#000">
</div>
<div class = "actions">
<button id = "reset-canvas">Vymazat</button>
<button id = "save-canvas">Uložit</button>
</div>
</div>
<div id = "canvas-wrapper"></div>
</div>
</div>
Вы можете найти это приложение, которое у меня есть здесь, на моей странице - litecode.net
Спасибо за помощь.
@Haworth Мне нужно было бы добавить новую функцию стирания, например ластик, в мое приложение для рисования, я не знаю, как еще это написать, но мне нужна помощь с этим.
Не могли бы вы сделать рабочий фрагмент - см. [Ссылка] stackoverflow.com/help/minimal-reproducible-example, в котором показан этот код плюс любой код для реализации стирания, который вы пробовали до сих пор, и опишите, что с этим не работает.