Рисовалка JavaScript, функция штампа - JavaScript, Ajax

wweelltt · 16.05.2022, 20:32

Здравствуйте, подскажите пожалуйста. В рисовалке есть кнопка с выбором режима Штамп/Рисовать. Когда нажимаешь "Штамп" на кнопке отображается "Рисовать" и наоборот. И вот вопрос... Как задать кнопке "Штамп" функцию штампа, чтобы изображение солнца вставлялось туда, куда тыкнул по канвасу? И как должен выглядеть код в этом случае? Заранее, большое спасибо!

Вот код
HTML

Код:

<!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>

JS

Код:

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 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);
}

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);
}

Вот картинка, которая должна быть штампом
sun.jpg

Cuprum5 · 17.05.2022, 10:50

Цитата:

Сообщение от wweelltt

Код:

</div>

- закрыл div, но открывающего нету.

Cuprum5 · 17.05.2022, 11:09

А где файл со стилями? Приложите, пожалуйста "Style.css"

Cuprum5 · 17.05.2022, 13:40

JavaScript.

Код:

//Кнопки
const mode = document.getElementById('jsMode');  //Рисовать
const btn = document.getElementById('jsClear');
const canvas = document.getElementById('jsCanvas');
const colors = document.getElementsByClassName('jsColor');
const ctx = canvas.getContext('2d');
const range = document.getElementById('jsRange');

let painting = false;
let filling = false;

//Создаем объект изображения
var img = new Image();

//Загружаем файл изображения
img.src = "sun.jpg";

ctx.canvas.height = 700;
ctx.canvas.width = 700;
 
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = '#0c0c0c';

function onClear()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

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();
      }
	  
	  if(!painting)
	  {
		  ctx.drawImage(img, x, y);
	  }
}
 
//canvas.addEventListener('onclick', drawIfPressed);
canvas.onmousedown = 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);
}

Cuprum5 · 18.05.2022, 09:11

Код:

//Кнопки
const mode = document.getElementById('jsMode');  //Рисовать
const btn = document.getElementById('jsClear');
const canvas = document.getElementById('jsCanvas');
const colors = document.getElementsByClassName('jsColor');
const ctx = canvas.getContext('2d');
const range = document.getElementById('jsRange');

var painting = false;
var filling = false;

//Создаем объект изображения
var img = new Image();

//Загружаем файл изображения
img.src = "sun2.jpg";

ctx.canvas.height = 700;
ctx.canvas.width = 700;
 
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.strokeStyle = '#0c0c0c';

function onClear()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

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(painting)
	  {
	    if(e.buttons > 0)
	    {
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.lineTo(x-dx, y-dy);
          ctx.stroke();
          ctx.closePath();
        }
	  }
}

function drawIfClick(e)
{
      var x = e.offsetX;
      var y = e.offsetY;
      var dx = e.movementX;
      var dy = e.movementY;
 
      if(!painting)
	  {
		ctx.drawImage(img, x, y);
	  }
}
 
//canvas.addEventListener('onclick', drawIfPressed);
canvas.onmousemove = drawIfPressed;
canvas.onclick = drawIfClick;
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);
}

И картинку поменьше сделал.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Наложение штампа(оттиска) в готовом файле (XLS или PDF)	kammet_it	Общие вопросы по программированию, компьютерный форум	4	21.11.2017 21:52
функция javascript	ts-alan	JavaScript, Ajax	1	09.04.2014 17:39
Заполнение штампа	strannick	Microsoft Office Excel	4	30.04.2013 22:00
JavaScript - функция с параметрами	rustik24	JavaScript, Ajax	1	02.04.2012 22:07
Считывание почтового индекса (кодового штампа)	fly-fire-fox	Компьютерное железо	5	18.11.2011 08:10

17.05.2022, 11:09	#3
Cuprum5 Форумчанин Регистрация: 09.05.2017 Сообщений: 748	А где файл со стилями? Приложите, пожалуйста "Style.css"