addEventListeners 有什么问题

Question

向量应该可以被拉动和重新定位。啊！。我在 fiddle

上有它

var canvas = document.getElementById('cv2'),
  c = canvas.getContext('2d');

var wide = canvas.width;
var high = canvas.height;

var p0 = {
  x: 50,
  y: 250
};

var p1 = {
  x: 250,
  y: 270
};

var p2 = {
  x: 250,
  y: 150
};


draw();

function draw() {
  c.clearRect(0, 0, canvas.width, canvas.height);
  drawPoint(p0);
  drawPoint(p1);
  drawPoint(p2);
  drawLines();

}


function drawPoint(p) {
  c.beginPath();
  c.lineWidth = 2;
  c.arc(p.x, p.y, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fill();

}

function drawLines() {
  c.beginPath();
  c.lineWidth = 2;
  c.moveTo(p1.x, p1.y);
  c.lineTo(p0.x, p0.y);
  c.lineTo(p2.x, p2.y);
  c.stroke();
}

canvas.addEventListener('mousedown', onMouseDown);
var dragPoint;

function findDragPoint(x, y) {
  if (hitTest(p0, x, y)) return p0;
  if (hitTest(p1, x, y)) return p1;
  if (hitTest(p2, x, y)) return p2;
  return null;
}

function onMouseDown(event) {
  dragPoint = findDragPoint(event.clientX, event.clientY);
  if (dragPoint) {
    dragPoint.x = event.clientX;
    dragPoint.y = event.clientY;
    draw();
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseup", onMouseUp);
  }
}

function onMouseMove(event) {
  dragPoint.x = event.clientX;
  dragPoint.y = event.cleintY;
  draw();
}

function onMouseUp() {
  canvas.removeEventListener("mousemove", onMouseMove);
  canvas.removeEventListener("mouseup", onMouseUp);
}



function hitTest(p, x, y) {
  var dx = p.x - x,
    dy = p.y - y;
  return Math.sqrt(dx * dx + dy * dy) <= 10;
}

<canvas id='cv2' width=800 height=500></canvas>

Answer 1

JavaScript没有什么乱七八糟的，你只是需要多多练习...

您的代码中的一些内容，正如他们在评论中指出的那样，您有一个拼写错误 cleintY，您还必须减去 canvas.offset 以获得鼠标的正确位置。

这些点应该是一个数组，这样你可以添加更多，一切都会起作用。

这是你的代码工作

var canvas = document.getElementById('cv2');
canvas.addEventListener('mousedown', onMouseDown);
var c = canvas.getContext('2d');

var points = [{x:18, y:12},{x:50, y:50},{x:180, y:90},{x:250, y:50}];
var dragPoint = null;
draw();

function draw() {
  c.clearRect(0, 0, canvas.width, canvas.height);
  points.forEach(p => drawPoint(p));
  drawLines();
}

function drawPoint(p) {
  c.beginPath();
  c.lineWidth = 2;
  c.arc(p.x, p.y, 10, 0, 2 * Math.PI, false);
  c.stroke();
  c.fill();
}

function drawLines() {
  c.beginPath();
  c.lineWidth = 2;
  points.forEach(p => c.lineTo(p.x, p.y));
  c.stroke();
}

function findDragPoint(x, y) {
  for (i = 0; i < points.length; i++) {
    if (hitTest(points[i], x, y)) return points[i];
  };  
  return null;
}

function onMouseDown(event) {
  dragPoint = findDragPoint(event.clientX- canvas.offsetLeft, event.clientY- canvas.offsetTop);
  if (dragPoint) {
    dragPoint.x = event.clientX- canvas.offsetLeft;
    dragPoint.y = event.clientY- canvas.offsetTop;
    draw();
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseup", onMouseUp);
  }
}

function onMouseMove(event) {
  dragPoint.x = event.clientX- canvas.offsetLeft;
  dragPoint.y = event.clientY- canvas.offsetTop;
  draw();
}

function onMouseUp() {
  canvas.removeEventListener("mousemove", onMouseMove);
  canvas.removeEventListener("mouseup", onMouseUp);
}

function hitTest(p, x, y) {
  var dx = p.x - x, dy = p.y - y;
  return Math.sqrt(dx * dx + dy * dy) <= 10;
}

<canvas id='cv2' width=400 height=120></canvas>

Answer 2

最简单的解决方法是分别用 offetX 和 offsetY 替换事件的 clientX / clientY。这些属性为您提供 canvas 上的实际鼠标光标位置，与 canvas 和 canvas 边距的滚动位置无关。

另见 How do I get the coordinates of a mouse click on a canvas element?

var canvas = document.getElementById('cv2'),
      c = canvas.getContext('2d');
  
  var wide = canvas.width;
  var high = canvas.height;

var p0 = {
  x: 50,
  y: 250
};

var p1 = {
  x: 250,
  y: 270
};
  
  var p2 = {
  x: 250,
  y: 150
};
  
  
  draw();
  
  function draw() {
    c.clearRect(0,0,canvas.width,canvas.height);
  drawPoint(p0);
  drawPoint(p1);
  drawPoint(p2);
  drawLines();
    
  }
  
  
  function drawPoint(p) {
    c.beginPath();
    c.lineWidth=2;
    c.arc (p.x, p.y, 10, 0, 2*Math.PI, false);
    c.stroke();
    c.fill();
    
  }
  
  function drawLines() {
    c.beginPath();
    c.lineWidth=2;
    c.moveTo(p1.x, p1.y);
    c.lineTo(p0.x, p0.y);
    c.lineTo(p2.x, p2.y);
    c.stroke();
  }
  
  canvas.addEventListener('mousedown', onMouseDown);
var dragPoint;

function findDragPoint(x,y) {
  if(hitTest(p0, x, y)) return p0;
  if(hitTest(p1, x, y)) return p1;
  if(hitTest(p2, x, y)) return p2;
  return null;
}

function onMouseDown(event) {
  dragPoint = findDragPoint(event.offsetX, event.offsetY);
  if(dragPoint) {
    dragPoint.x = event.offsetX;
    dragPoint.y = event.offsetY;
    draw();
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseup", onMouseUp);
  }
}
function onMouseMove(event) {
   dragPoint.x = event.offsetX;
   dragPoint.y = event.offsetY;
   draw();
}

function onMouseUp() {
  canvas.removeEventListener("mousemove", onMouseMove);
  canvas.removeEventListener("mouseup", onMouseUp);
}



function hitTest(p, x, y) {
  var dx = p.x - x,
      dy = p.y - y;
      return Math.sqrt(dx*dx + dy*dy) <=10;
}

<canvas id='cv2' width=800 height=500></canvas>

https://jsfiddle.net/z6t2jw5d/

addEventListeners 有什么问题

What's wrong with the addEventListeners

javascript

addeventlistener

html5-canvas