Нужна помощь в рисовании линий на холсте с использованием HTML - PullRequest
Новая
       6

Нужна помощь в рисовании линий на холсте с использованием HTML

0 голосов
/ 24 апреля 2019

Я пытаюсь нарисовать линию на холсте. Я могу нарисовать линию, но хочу, чтобы она была нарисована динамически.

Вот то, о чем я думал:

Как только левая кнопка мыши нажата, я получаю местоположение мыши и сохраняю в переменных x1, y1. Установите downflag = true.

Затем, если щелкнуть левой кнопкой мыши и пользователь перетаскивает мышь, я постоянно получаю местоположение мыши и сохраняю в x2, y2. Я надеялся использовать штрих () здесь, чтобы постоянно обновлять строку, но, похоже, не работает? Есть идеи??.

Затем, когда отпущена левая кнопка мыши, найдите окончательное местоположение мыши и сохраните в x2, y2. Используйте ход, чтобы нарисовать путь.

Извините, я плохо объясняю, что ищу ..

к 

<!DOCTYPE html>
<html>
<body>

<div style="border: 1px solid blue;">
    <p><strong>Tip:</strong> Click, Drag, Release</p>   
    <p id='coordinates'>null, null</p>
    <p id='downcoord'>undefined, undefined</p>  
    <p id='upcoord'>undefined, undefined</p>
</div>

<canvas width="500" height="500" onmousemove="coords(event)" onmousedown="mousedown(event)" onmouseup="mouseup(event)" id="myCanvas" style="position: absolute; border: 1px solid black;"> Your browser does not support the canvas element. </canvas>

<script>
 var x1,y1;
 var x2,y2; 
 var coorx,coory;
 var downflag;
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");

 function coords(event){
    if(downflag){ //check if clicked before drag
        x2 = event.clientX-9;
        y2 = event.clientY-200;  
    } 
    coorx = event.clientX-9;
    coory = event.clientY-200; //keep updating x and y coord while moving mouse

    var temp = document.getElementById("coordinates");
    temp.innerHTML = "current coord : " + coorx + ", " + coory;

    var temp = document.getElementById("downcoord");
    temp.innerHTML = "start point : " + x1 + ", " + y1;

    var temp = document.getElementById("upcoord");
    temp.innerHTML = "end point : " + x2 + ", " + y2;
}

function mousemove(event){
    if(downflag == true){
        x2 = event.clientX-9;
        y2 = event.clientY-200;
        ctx.lineTo(x2,y2);
        ctx.stroke();
    }
}

function mousedown(event){  
   x1 = event.clientX-9;
   y1 = event.clientY-200;
   ctx.beginPath();
   ctx.moveTo(x1,y1);
   downflag = true;   
}

function mouseup(event){
   x2 = event.clientX-9;
   y2 = event.clientY-200;      
   downflag = false;
   ctx.lineTo(x2,y2);
   ctx.stroke();
}

</script>

</body>
</html>

1 Ответ

0 голосов
/ 24 апреля 2019

Ваш код не работает, потому что вы рисуете новую очень короткую линию на каждом перемещении мыши, от предыдущей позиции мыши до текущей.

Вам нужно как минимум два слоя, каждый со своим холстом.

В нижнем слое вы, наконец, рисуете каждую линию. Верхний слой пуст.

При наведении курсора вы устанавливаете флажок вниз и сохраняете координаты мыши в точках x1 и y1. На этом шаге ничего не рисуйте.

При перемещении мыши, если установлен флаг downflag, вы сохраняете координаты мыши в x2 и y2, очищаете верхний слой и рисуете линию от (x1, y1) до (x2, y2) на верхнем слое.

При наведении курсора мыши вы убираете флажок вниз, очищаете верхний слой и рисуете линию от (x1, y1) до (x2, y2) на нижнем слое.

Редактировать : Пример кода (требуется jQuery). Смотрите это в действии на https://codepen.io/locoluis/pen/JVerqO

HTML 

<div id="arena">
  <canvas id="bg"></canvas>
  <canvas id="fg"></canvas>
</div>

CSS 

* {
    box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 5px;
}
#arena {
  position: relative;
  width: 100%;
  height: 100%;
  border: solid 1px black;
  background: white;
}
#bg, #fg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
#bg {
  z-index: 1;
}
#fg {
  z-index: 2;
  cursor: crosshair;
}

JS 

var x1, y1, x2, y2, downflag = false;
var fg, bg, ctxFg, ctxBg;
function pendown(e)
{
  x1 = e.offsetX;
  y1 = e.offsetY;
  downflag = true;
}
function penmove(e)
{
  if(!downflag) {
    return;
  }
  ctxFg.clearRect(0, 0, fg.width, fg.height);
  x2 = e.offsetX;
  y2 = e.offsetY;
  ctxFg.beginPath();
  ctxFg.moveTo(x1, y1);
  ctxFg.lineTo(x2, y2);
  ctxFg.stroke();
}
function penup(e)
{
  if(!downflag) {
    return;
  }
  downflag = false;
  ctxFg.clearRect(0, 0, fg.width, fg.height);
  x2 = e.offsetX;
  y2 = e.offsetY;
  ctxBg.beginPath();
  ctxBg.moveTo(x1, y1);
  ctxBg.lineTo(x2, y2);
  ctxBg.stroke();  
}
function init()
{
  fg = document.getElementById('fg');
  bg = document.getElementById('bg');
  bg.width = fg.width = jQuery(fg).width();
  bg.height = fg.height = jQuery(bg).height();
  ctxFg = fg.getContext('2d');
  ctxFg.strokeStyle = "red";
  ctxBg = bg.getContext('2d');
  ctxBg.strokeStyle = "black";
  jQuery(fg).on('mousedown', pendown);
  jQuery(fg).on('mousemove', penmove);
  jQuery(fg).on('mouseup', penup);
}
window.addEventListener('load', init, false);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...