HTML5 Canvas рисовать линии между двумя кликами

Question

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

В настоящее время я работаю над веб-приложением плана этажа, где вы можете просто рисовать линии, чтобы создать план вашего здания.housing.

Требуемый эффект: при нажатии один раз пользователь рисует временную линию, где начальная точка X - это точка щелчка, а целевая точка Z - мышь, по которой пользователь может перемещаться.В настоящее время я использую холст для этого эффекта, но каким-то образом линия невидима или просто не существует.Я попробовал некоторую отладку, которая привела меня сюда.

Это текущий код:

    function drawLineXY(fromXY, toXY) {
    if(!lineElem) {
        lineElem = document.createElement('canvas');
        lineElem.style.position = "absolute";
        lineElem.style.zIndex = 100;
        document.body.appendChild(lineElem);
        console.log("Added line element");

    }
    var leftpoint, rightpoint;
    if(fromXY.x < toXY.x) {
      leftpoint = fromXY;
      rightpoint = toXY;
    } else {
      leftpoint = toXY;
      rightpoint = fromXY;
    }

    var lineWidthPix = 4;
    var gutterPix = 0;
    var origin = {x:leftpoint.x-gutterPix, 
                  y:Math.min(fromXY.y, toXY.y)-gutterPix};
    lineElem.width = "1000px";
    lineElem.height = "1000px";
    lineElem.style.left = "0px";
    lineElem.style.top = "0px";
    var ctx = lineElem.getContext('2d');
    // Use the identity matrix while clearing the canvas
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, lineElem.width, lineElem.height);
    ctx.restore();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#09f';
    ctx.beginPath();
    ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
    ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
    ctx.stroke();
    console.log("drawing line..");
}

    function moveHandler(evt) {
    var startCentre, startBounds;
    var targets = [];

    if(clicked.length === 2) {
      targets = clicked;
    } else if(clicked.length === 1) {
      targets.push(clicked[0]);
      if(typeof hoverElement !== 'undefined') {
        targets.push(hoverElement);
      }
    }

    if(targets.length == 2) {
        var start = {x:targets[0], y:targets[0]};
        var end = {x:targets[1], y:targets[1]};
        drawLineXY(start, end);

    } else if(targets.length == 1) {
        var start = {x:targets[0], y:targets[0]};

        drawLineXY(start, {x:evt.clientX, y:evt.clientY});
    }  
};

    function clickHandler(e) {
    if(clicked.length == 2) {
        clicked = [];
    }
    clicked.push(e.target);
};

document.onclick = clickHandler;   
document.onmousemove = moveHandler;

Как вы можете видеть в последней строке drawLineXY, я сделал отладочный журнал журнала "Рисованиеline "Это работает, когда я перемещаю мышь.Как и должно быть.Но нет строки, у кого-то есть помощь?

PS: #canvas указан в style.css.

Answer 1

Я создал очень простой пример того, чего вы пытаетесь достичь:

let c, ctx, fromXY, toXY;

window.onload = function(){
  document.onclick = clickHandler;   
  document.onmousemove = moveHandler;
  c = document.getElementById("myCanvas");
  ctx = c.getContext("2d");
  reset();
}

function draw(){
  clear();
  ctx.beginPath();
  ctx.moveTo(fromXY.x, fromXY.y);
  ctx.lineTo(toXY.x, toXY.y);
  ctx.stroke();
  ctx.closePath();
}

function clear(){
  ctx.clearRect(0, 0, c.width, c.height);
}

function reset() {
  fromXY = {};
  toXY = {};
}

function moveHandler(e) {
  if(typeof fromXY.x !== "undefined"){
    toXY.x = e.clientX;
    toXY.y = e.clientY;
    draw();
  }
}

function clickHandler(e) {
  if(typeof fromXY.x === "undefined"){
    fromXY.x = e.clientX;
    fromXY.y = e.clientY;
  }else{
    reset();
  }
}

<canvas id="myCanvas" height="500" width="500"></canvas>

Вы можете установить параметры строки в функции draw(), и если вы хотите, чтобы строки сохранялись, вы бы сохранили их fromXY и toXYв массиве, а также перерисовать их.