AddEventListeners有什么问题 [英] What's wrong with the addEventListeners

问题描述

该向量应该能够被拉出和重新定位。啊！我有小提琴在

jsFiddle

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

推荐答案

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

正如他们在注释中指出的那样，您的代码中几乎没有什么东西，您有一个拼写错误cleintY，您还必须减去画布。偏移以获得鼠标的正确位置。

这些点应该是一个数组，这样您就可以添加更多，一切都会正常工作。

以下是您的代码正在运行

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于AddEventListeners有什么问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！