Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.05.2022, 20:32   #1
wweelltt
Новичок
Джуниор
 
Регистрация: 16.05.2022
Сообщений: 2
По умолчанию Рисовалка JavaScript, функция штампа

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

Вот код
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
wweelltt вне форума Ответить с цитированием
Старый 17.05.2022, 10:50   #2
Cuprum5
Форумчанин
 
Регистрация: 09.05.2017
Сообщений: 729
По умолчанию

Цитата:
Сообщение от wweelltt Посмотреть сообщение
Код:
</div>
- закрыл div, но открывающего нету.
Cuprum5 вне форума Ответить с цитированием
Старый 17.05.2022, 11:09   #3
Cuprum5
Форумчанин
 
Регистрация: 09.05.2017
Сообщений: 729
По умолчанию

А где файл со стилями? Приложите, пожалуйста "Style.css"
Cuprum5 вне форума Ответить с цитированием
Старый 17.05.2022, 13:40   #4
Cuprum5
Форумчанин
 
Регистрация: 09.05.2017
Сообщений: 729
По умолчанию

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   #5
Cuprum5
Форумчанин
 
Регистрация: 09.05.2017
Сообщений: 729
По умолчанию

Код:
//Кнопки
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);
}
И картинку поменьше сделал.
Cuprum5 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Наложение штампа(оттиска) в готовом файле (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