鼠标位置 canvas 上的描边线阵列

Question

我试图在我的鼠标坐标 canvas 上相对划线。

所以当点击时，在鼠标坐标处绘制线阵。

示例：我有一个 canvas 这个线条笔画

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var linearray = [
  { x: 195, y: 104 },
  { x: 197, y: 104 },
  { x: 201, y: 102 },
  { x: 203, y: 100 },
  { x: 205, y: 98 },
  { x: 206, y: 103 },
  { x: 206, y: 106 },
  { x: 207, y: 108 },
  { x: 211, y: 106 },
  { x: 214, y: 103 },
  { x: 216, y: 102 },
  { x: 216, y: 102 }
];

function strokeArrayPoints(point, index) {
    ctx.lineTo(point.x, point.y);
    ctx.stroke();
}

linearray.forEach(strokeArrayPoints);

<canvas id="myCanvas" width="600" height="600" style="border: 1px solid #d3d3d3;"></canvas>

我怎样才能简单地重新定位这个数组的坐标，这样我就可以相对地在鼠标点击 canvas 的任何地方抚摸它。

您可以在下面看到我尝试过的内容，并了解我要实现的目标的基本概念：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var x = 0;
var y = 0;

var linearray = [
  { x: 195, y: 104 },
  { x: 197, y: 104 },
  { x: 201, y: 102 },
  { x: 203, y: 100 },
  { x: 205, y: 98 },
  { x: 206, y: 103 },
  { x: 206, y: 106 },
  { x: 207, y: 108 },
  { x: 211, y: 106 },
  { x: 214, y: 103 },
  { x: 216, y: 102 },
  { x: 216, y: 102 }
];

function strokeArrayPoints(point, index) {
  ctx.lineTo(point.x + x, point.y + y);
  ctx.stroke();
}

c.addEventListener(
  "click",
  function (e) {
    console.log(e.clientX, e.clientY);
    x = e.clientX;
    y = e.clientY;

    ctx.moveTo(x, y);
    linearray.forEach(strokeArrayPoints);
  },
  false
 );

<canvas id="myCanvas" width="600" height="600" style="border: 1px solid #d3d3d3;"></canvas>

Answer 1

你真的很接近！主要需要做的就是先把点相对设置为0，然后我们就可以添加鼠标位置了。

我们可以通过减去 linearray 中第一个元素的 x 和 y 来实现。请注意，它也不必设置在第一点上，您可以选择数组的中间来获取差异。最后我们所做的就是将我们的观点转化为基于 0, 0.

第一点会变成0, 0
第二点会变成2, 0
第三点会变成6, -2

然后当我们应用鼠标位置的偏移量时，它会添加鼠标位置作为偏移量。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var x = 0;
var y = 0;

var linearray = [
  { x: 195, y: 104 },
  { x: 197, y: 104 },
  { x: 201, y: 102 },
  { x: 203, y: 100 },
  { x: 205, y: 98 },
  { x: 206, y: 103 },
  { x: 206, y: 106 },
  { x: 207, y: 108 },
  { x: 211, y: 106 },
  { x: 214, y: 103 },
  { x: 216, y: 102 },
  { x: 216, y: 102 }
];

function strokeArrayPoints(point, index, arr) {
  // Make points relative to our reference. This is probably better put somewhere outside
  // of this function, just here for readability.
  const relX = point.x - arr[0].x;
  const relY = point.y - arr[0].y;
  
  ctx.lineTo(relX + x, relY + y);
  ctx.stroke();
}

c.addEventListener(
  "click",
  function (e) {
    console.log(e.clientX, e.clientY);
    x = e.clientX;
    y = e.clientY;

    ctx.moveTo(x, y);
    linearray.forEach(strokeArrayPoints);
  },
  false
 );

<canvas id="myCanvas" width="600" height="600" style="border: 1px solid #d3d3d3;"></canvas>

鼠标位置 canvas 上的描边线阵列

Stroke line array on canvas at mouse position

javascript

canvas