16.05.2022, 19:37
|
|
Новичок на форуме
|
|
Регистрация: 16.05.2022
Сообщений: 7
|
|
|
Рисовалка JavaScript, функция штампа
Здравствуйте, подскажите пожалуйста. В рисовалке есть кнопка с выбором режима Штамп/Рисовать. Когда нажимаешь "Штамп" на кнопке отображается "Рисовать" и наоборот. И вот вопрос... Как задать кнопке "Штамп" функцию штампа, чтобы изображение солнца вставлялось туда, куда тыкнул по канвасу?  И как должен выглядеть код в этом случае?  Заранее, большое спасибо!
Вот код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>www</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="jsCanvas" class="canvas"></canvas>
</div>
<div class="controls">
<div class="controls__range">
<input type="range" id="jsRange" min="1.0" max="16.0" value="8.0" step="1.0">
</div>
<div class="controls__btns">
<button id="jsMode">Рисовать</button>
<button id="jsClear">Очистить</button>
<button id="jsSave">Сохранить</button>
</div>
<div class="controls__colors" id="jsColors">
<div class="controls__color jsColor" style="background-color:#0c0c0c"></div>
<div class="controls__color jsColor" style="background-color:rgb(87, 87, 87)"></div>
<div class="controls__color jsColor" style="background-color:white"></div>
<div class="controls__color jsColor" style="background-color:red"></div>
<div class="controls__color jsColor" style="background-color:orangered"></div>
<div class="controls__color jsColor" style="background-color:yellow"></div>
<div class="controls__color jsColor" style="background-color:green"></div>
<div class="controls__color jsColor" style="background-color:rgb(0, 162, 232)"></div>
<div class="controls__color jsColor" style="background-color:blue"></div>
<div class="controls__color jsColor" style="background-color:purple"></div>
<div class="controls__color jsColor" style="background-color:rgb(0, 255, 0)"></div>
<div class="controls__color jsColor" style="background-color:fuchsia"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
const btn = document.getElementById('jsClear');
const mode = document.getElementById('jsMode');
const canvas = document.getElementById('jsCanvas');
const colors = document.getElementsByClassName ('jsColor');
const ctx = canvas.getContext('2d');
const range = document.getElementById('jsRange');
let img = new Image();
img.src = "kotik.jpg";
window.addEventListener('load', function() {
ctx.drawImage(img, 0, 0, 667, 667);
});
let painting = false;
let filling = false;
canvas.height=667;
canvas.width=667;
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = '#0c0c0c';
function onClear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, 667, 667);
}
function handleColorClick(event){
const color = event.target.style.backgroundColor;
ctx.strokeStyle = color;
}
function handleRangeChange(event){
const rangeValue = event.target.value;
ctx.lineWidth = rangeValue;
}
function handleModeClick(){
if (painting === true){
painting = false;
mode.innerText = 'Рисовать';
} else {
painting = true;
mode.innerText = 'Штамп';
}
}
function drawIfPressed (e) {
var x = e.offsetX;
var y = e.offsetY;
var dx = e.movementX;
var dy = e.movementY;
if (e.buttons > 0) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x - dx, y - dy);
ctx.stroke();
ctx.closePath();
}
}
canvas.addEventListener('mousemove', drawIfPressed);
btn.addEventListener('click', onClear);
Array.from(colors).forEach(color => color.addEventListener('click', handleColorClick));
if (range){
range.addEventListener('input', handleRangeChange);
}
if (mode) {
mode.addEventListener('click', handleModeClick);
}
вот изображение, которое должно быть штампом
Последний раз редактировалось wweelltt, 16.05.2022 в 20:10.
|
|
16.05.2022, 20:30
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
canvas draw рисовалка
wweelltt,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>www</title>
<style type="text/css">
.controls__color {
width: 50px;
height: 30px;
}
.controls__colors {
display: flex;
}
</style>
</head>
<body>
<canvas id="jsCanvas" class="canvas"></canvas>
<div class="controls">
<div class="controls__range">
<input type="range" id="jsRange" min="1.0" max="16.0" value="8.0" step="1.0">
</div>
<div class="controls__btns">
<button id="jsMode">Рисовать</button>
<button id="jsClear">Очистить</button>
<button id="jsSave">Сохранить</button>
</div>
<div class="controls__colors" id="jsColors">
<div class="controls__color jsColor" style="background-color:#0c0c0c"></div>
<div class="controls__color jsColor" style="background-color:rgb(87, 87, 87)"></div>
<div class="controls__color jsColor" style="background-color:white"></div>
<div class="controls__color jsColor" style="background-color:red"></div>
<div class="controls__color jsColor" style="background-color:orangered"></div>
<div class="controls__color jsColor" style="background-color:yellow"></div>
<div class="controls__color jsColor" style="background-color:green"></div>
<div class="controls__color jsColor" style="background-color:rgb(0, 162, 232)"></div>
<div class="controls__color jsColor" style="background-color:blue"></div>
<div class="controls__color jsColor" style="background-color:purple"></div>
<div class="controls__color jsColor" style="background-color:rgb(0, 255, 0)"></div>
<div class="controls__color jsColor" style="background-color:fuchsia"></div>
</div>
</div>
<script>
const btn = document.getElementById('jsClear');
const mode = document.getElementById('jsMode');
const canvas = document.getElementById('jsCanvas');
const colors = document.getElementsByClassName('jsColor');
const ctx = canvas.getContext('2d');
const range = document.getElementById('jsRange');
let img = new Image();
img.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
window.addEventListener('load', function() {
ctx.drawImage(img, 0, 0, 667, 667);
});
let painting = true;
let filling = false;
canvas.height = 667;
canvas.width = 667;
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = '#0c0c0c';
function onClear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, 667, 667);
}
function handleColorClick(event) {
const color = event.target.style.backgroundColor;
ctx.strokeStyle = color;
}
function handleRangeChange(event) {
const rangeValue = event.target.value;
ctx.lineWidth = rangeValue;
}
function handleModeClick() {
if (painting === true) {
painting = false;
mode.innerText = 'Штамп';
} else {
painting = true;
mode.innerText = 'Рисовать';
}
}
var image = new Image;
image.src = 'https://www.pinclipart.com/picdir/big/285-2856763_tangled-sun-png-clipart-transparent-png.png';
function drawIfPressed(e) {
var x = e.offsetX;
var y = e.offsetY;
var dx = e.movementX;
var dy = e.movementY;
if (e.buttons > 0) {
if (painting) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x - dx, y - dy);
ctx.stroke();
ctx.closePath();
} else {
var width = ctx.lineWidth * 5;
ctx.drawImage(image, x - dx - width / 2, y - dy - width / 2, width, width);
}
}
}
canvas.addEventListener('mousemove', drawIfPressed);
btn.addEventListener('click', onClear);
Array.from(colors).forEach(color => color.addEventListener('click', handleColorClick));
if (range) {
range.addEventListener('input', handleRangeChange);
}
if (mode) {
mode.addEventListener('click', handleModeClick);
}
</script>
</body>
</html>
Последний раз редактировалось рони, 16.05.2022 в 20:37.
|
|
16.05.2022, 22:49
|
|
Новичок на форуме
|
|
Регистрация: 16.05.2022
Сообщений: 7
|
|
|
рони,
Спасибо вам большое. А можете подсказать пожалуйста как эту функцию поменять, чтобы штамп срабатывал только там где я кликнул и не рисовался дальше при зажатой кнопке мыши. И чтобы он был всегда только с заданным размером, а не изменял свой размер от ползунка.
|
|
16.05.2022, 23:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
wweelltt,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>www</title>
<style type="text/css">
.controls__color {
width: 50px;
height: 30px;
}
.controls__colors {
display: flex;
}
</style>
</head>
<body>
<canvas id="jsCanvas" class="canvas"></canvas>
<div class="controls">
<div class="controls__range">
<input type="range" id="jsRange" min="1.0" max="16.0" value="8.0" step="1.0">
</div>
<div class="controls__btns">
<button id="jsMode">Рисовать</button>
<button id="jsClear">Очистить</button>
<button id="jsSave">Сохранить</button>
</div>
<div class="controls__colors" id="jsColors">
<div class="controls__color jsColor" style="background-color:#0c0c0c"></div>
<div class="controls__color jsColor" style="background-color:rgb(87, 87, 87)"></div>
<div class="controls__color jsColor" style="background-color:white"></div>
<div class="controls__color jsColor" style="background-color:red"></div>
<div class="controls__color jsColor" style="background-color:orangered"></div>
<div class="controls__color jsColor" style="background-color:yellow"></div>
<div class="controls__color jsColor" style="background-color:green"></div>
<div class="controls__color jsColor" style="background-color:rgb(0, 162, 232)"></div>
<div class="controls__color jsColor" style="background-color:blue"></div>
<div class="controls__color jsColor" style="background-color:purple"></div>
<div class="controls__color jsColor" style="background-color:rgb(0, 255, 0)"></div>
<div class="controls__color jsColor" style="background-color:fuchsia"></div>
</div>
</div>
<script>
const btn = document.getElementById('jsClear');
const mode = document.getElementById('jsMode');
const canvas = document.getElementById('jsCanvas');
const colors = document.getElementsByClassName('jsColor');
const ctx = canvas.getContext('2d');
const range = document.getElementById('jsRange');
let img = new Image();
img.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
window.addEventListener('load', function() {
ctx.drawImage(img, 0, 0, 667, 667);
});
let painting = true;
let filling = false;
canvas.height = 667;
canvas.width = 667;
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = '#0c0c0c';
function onClear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, 667, 667);
}
function handleColorClick(event) {
const color = event.target.style.backgroundColor;
ctx.strokeStyle = color;
}
function handleRangeChange(event) {
const rangeValue = event.target.value;
ctx.lineWidth = rangeValue;
}
function handleModeClick() {
if (painting === true) {
painting = false;
mode.innerText = 'Штамп';
} else {
painting = true;
mode.innerText = 'Рисовать';
}
}
var image = new Image;
image.src = 'https://www.pinclipart.com/picdir/big/285-2856763_tangled-sun-png-clipart-transparent-png.png';
function drawIfPressed(e) {
console.log(e.type)
var x = e.offsetX;
var y = e.offsetY;
var dx = e.movementX;
var dy = e.movementY;
if (e.type == 'click' && !painting) {
var width = 40;
ctx.drawImage(image, x - width / 2, y - width / 2, width, width);
} else if (e.buttons > 0 && painting) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x - dx, y - dy);
ctx.stroke();
ctx.closePath();
}
}
canvas.addEventListener('mousemove', drawIfPressed);
canvas.addEventListener('click', drawIfPressed);
btn.addEventListener('click', onClear);
Array.from(colors).forEach(color => color.addEventListener('click', handleColorClick));
if (range) {
range.addEventListener('input', handleRangeChange);
}
if (mode) {
mode.addEventListener('click', handleModeClick);
}
</script>
</body>
</html>
|
|
17.05.2022, 00:01
|
|
Новичок на форуме
|
|
Регистрация: 16.05.2022
Сообщений: 7
|
|
рони,
Спасибо большое за помощь 
|
|
|
|
