AddEventListeners有什么问题

本文介绍了AddEventListeners有什么问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

数据-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>

有什么

AddEventListeners有什么问题

问题描述

推荐答案