Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Рисовалка JavaScript, функция штампа (https://javascript.ru/forum/misc/84029-risovalka-javascript-funkciya-shtampa.html)

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

Вот код
<!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);
}


вот изображение, которое должно быть штампом

рони 16.05.2022 20:30
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>

wweelltt 16.05.2022 22:49
рони,
Спасибо вам большое. А можете подсказать пожалуйста как эту функцию поменять, чтобы штамп срабатывал только там где я кликнул и не рисовался дальше при зажатой кнопке мыши. И чтобы он был всегда только с заданным размером, а не изменял свой размер от ползунка.

рони 16.05.2022 23:14
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>

wweelltt 17.05.2022 00:01
рони,
Спасибо большое за помощь:thanks:


Часовой пояс GMT +3, время: 12:23.