html5 画布中的鼠标交互。画线答案

【问题标题】：Mouse interaction in html5 canvas. drawing lineshtml5 画布中的鼠标交互。画线
【发布时间】：2014-03-16 19:05:13
【问题描述】：

只处理 HTML5 画布。我需要完成一些鼠标交互。就像画一个矩形或一条线。具体来说，我需要做的是在 mousemove 调用期间绘制一条动态线。它的意思是。 mousemove 1 从 x1,y1 到 x2,y2 画一条线 mousemove 2 删除上一行。设置 x1 = x2 和 y1 = ys 并重复前面的过程，直到我赶上 mouseup 并巩固线。

从我在 windows api 编程的时代开始，我记得 xoring 那些行工作得很好。在 jscript 画布上是否有类似的方法？

另外：从 mousedown 到 mouseup 捕获鼠标会很棒。那可能吗？。如果无法做到这一点，只会在鼠标移出时终止进程。

有什么帮助吗？

【问题讨论】：

当您使用鼠标绘图时，mousemove 事件将连续触发，您打算如何区分上述鼠标移动 1 和鼠标移动 2，如果两者之间没有触发类似 mouseup 的事件?
在鼠标按下时我设置了一个 var drawing=true。然后设置 x2=x1=mousex 和 y 相同。然后在每次鼠标移动中更新 x2。我的帖子有错误。 x1 在此过程中应始终保持不变。在每次 mousemove 中删除旧线并设置 x2 = mousex 和 y2=mousey 然后绘制新线。在 windows api 中有一种方法可以画线异或像素。我想知道我是否可以对画布做同样的事情。

标签： javascript html canvas

【解决方案1】：

一个基本的演示（可能需要 tweeking）：http://jsfiddle.net/m1erickson/H7vRw/

您可以请求浏览器将鼠标事件（mousedown、mouseup、mousemove）发送到处理这些事件的函数。

// add an html canvas element

<canvas id="canvas" width=300 height=200></canvas>

// ask the browser to send mouse events to handler functions
// for example, mousedown events will be sent to the handleMouseDown function
// this example uses jQuery for browser compatibility

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseUp(e);});

在 mousedown 处理程序中：

获取鼠标位置。
设置一个标志，指示拖动已开始
保存鼠标位置（它将是行的起点）

鼠标按下代码：

function handleMouseDown(e){

  // let the browser know we will handle this event

  e.preventDefault();   

  // get the mouse position

  var mouseX=parseInt(e.clientX-offsetX);
  var mouseY=parseInt(e.clientY-offsetY);

  // set an isDown flag to indicate dragging has started

  isDown=true;

  // save the starting mouse position 
  // (it will be the beginning point of the line);

  startX=mouseX;
  startY=mouseY;

}

在 mousemove 处理程序代码中：

获取鼠标位置
清除画布并从保存的起始位置画一条线到此鼠标位置

鼠标移动代码：

function handleMouseMove(e){

  // if we're not dragging, ignore this mousemove

  if(!isDown){ return; }

  // let the browser know we will handle this event

  e.preventDefault();   

  // get the mouse position

  var mouseX=parseInt(e.clientX-offsetX);
  var mouseY=parseInt(e.clientY-offsetY);

  // draw the current line
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke()

}

在 mouseup 处理程序中：

在拖动完成后清除拖动标志。

鼠标代码：

function handleMouseUp(e){

  // let the browser know we will handle this event

  e.preventDefault();   

  // clear the dragging flag since the drag is donw

  isDown=false;

}

【讨论】：

【解决方案2】：

检查这个fiddle，不完全是你需要的，但希望它会有所帮助......

var el = document.getElementById('canvasId');
var ctx = el.getContext('2d');
var isDrawing;
el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
  }
};
el.onmouseup = function() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  isDrawing = false;
};

【讨论】：