时间戳

首页 > 解决方案 > 我正在尝试主动跟踪用户坐标并在 js 中显示一行

javascript - 我正在尝试主动跟踪用户坐标并在 js 中显示一行

问题描述

我正在尝试从 autocad 中复制一个像这样的特征，它是 line 函数。我做的事情：

  1. 求第一坐标
  2. 求第二个坐标
  3. 显示最后一行

我想知道该怎么做：

  1. 第一次单击后（对于第一个坐标），我想每 50 毫秒显示一条线，即使他没有单击，用户也将光标放在其中
  2. 每次更改光标位置时删除该行，直到用户单击

这是我现在拥有的：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function drawLine(first, last) {
    ctx.beginPath();
    ctx.moveTo(first.x, first.y);
    ctx.lineTo(last.x, last.y);
    ctx.fill();
    ctx.stroke();
}

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
    return {x, y};
}

function lFunction(e) {  
    const clicked = getCursorPosition(canvas, e);
    itteration++;
    if (itteration % 2 != 0) {
        firstClick = clicked;
    } else if (itteration % 2 == 0) {
        drawLine(firstClick, clicked);
    }
}

lFunction();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas" height="400" width="400" style="border: 1px solid black"></canvas>
    <script src="script.js"></script>
</body>
</html>

如果它不起作用，那是因为我从一个更大的文件中获取它，我不想分享它。

感谢您提前提供任何帮助。我还是一个初学者，所以请不要苛刻。

PS：如果有人可以帮助我解决学位和自动刷新长度。

标签： javascripthtmldom

解决方案

实现此目的的一种方法是“记住”您的画线动作，在鼠标移动时对其进行更新，并且每 50 毫秒清除一次画布并重新绘制最近的线。

var currentLine = {
  start: null,
  finish: null
}

var currentlyDrawing = false;

var mouseTracker = function(e){
  currentLine.finish = getCursorPosition(canvas, e);
}

canvas.addEventListener('click', e => {
  if(!currentlyDrawing) {
    let position = getCursorPosition(canvas, e);
    currentLine.start = position;
    currentLine.finish = position;
    canvas.addEventListener('mousemove', mouseTracker);
    currentlyDrawing = true;
  } else {
    currentlyDrawing = false;
    canvas.removeEventListener('mousemove', mouseTracker);
  }
})

setInterval(() => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawLine(currentLine.start, currentLine.finish);
}, 50);

现在，显然这只适用于单行。

下一步是替换currentLine为line. 然后您的 click 事件处理程序将创建一个新的line（如果不是currentlyDrawing）并将其附加到 的列表中line，并将mouseTracker该finish属性设置line为数组中的最后一个。然后您的计时器函数将清除屏幕，然后遍历line数组并调用drawLine它们中的每一个。

推荐阅读