如何选择在HTML5画布上绘制的线？ [英] How to select lines that are drawn on a HTML5 Canvas?

问题描述

我使用HTML5 Canvas绘制线条。通过在多个中间点上调用drawLine（）形成单个行。例如：

（0,0） - >（10，10） - >（10，5） - >

一行的所有（x，y）坐标都存储在数组。

我想为使用者提供点击线条时选择线条的功能。在HTML5 Canvas中这样做变得很困难，因为该行不是由对象表示的。我剩下的唯一选择是首先找到最接近mousedown事件的（x，y）的任何行的（x，y）坐标。一旦我检测到用户选择了哪一行，那么我需要用粗体颜色重新绘制线条或在其周围放一个半透明的颜色。但是，我假设这将是太费时间，因为它涉及循环所有行的所有（x，y）坐标。

我在寻找方法这可以帮助我以更加时间有效的方式实现上述。我应该考虑在HTML5中使用SVG吗？

任何建议都会感激。

解决方案

在HTML5 canvas中最简单的方法是为canvas创建图像数据的快照，在mousemove中查看鼠标下像素的alpha颜色。

我在我的网站上提供了一个这样的工作示例：

http://phrogz.net/tmp/canvas_detect_mouseover.html

这是我写的核心代码。传递一个上下文和一个函数，它将调用你的函数与RGBA组件下面的像素。

  function pixelOnMouseOver ，callback）{
 var canvas = ctx.canvas; 
 var w = canvas.width，h = canvas.height; 
 var data = ctx.getImageData（0,0，w，h）.data; 
 canvas.addEventListener（'mousemove'，function（e）{
 var idx =（e.offsetY * w + e.offsetX）* 4; 
 var parts = Array.prototype.slice .call（data，idx，idx + 4）; 
 callback.apply（ctx，parts）; 
}，false）; 
} 
  

以下是测试页面上的用法：

  var wasOver; 
 pixelOnMouseOver（ctx，function（r，g，b，a）{
 var isOver = a> 10; //任意阈值
 if（isOver！= wasOver）{
 can.style.backgroundColor = isOver？'＃ff6'：''; 
 wasOver = isOver; 
} 
 out.innerHTML =r：+ r +，g： g +，b：+ b +，a：+ a; 
} 
  

I am using using HTML5 Canvas to plot lines. A single line is formed by calling drawLine() on multiple intermediate points. For example:

(0,0) -> (10, 10) -> (10, 5) -> (20, 12)

would show up as one line on the plot.

All the (x,y) co-ordinates of a line are stored in an array.

I want to provide the users with the ability to select a line when they click on it. It becomes difficult to do this in HTML5 Canvas as the line is not represented by an object. The only option that I am left with is to first find that (x,y) coordinate of any line that is closest to the (x,y) of a mousedown event. Once I detect which line the user has selected, then I need to redraw the line with a bold color or put a translucent color around it. But, I am assuming that this would be too time-intensive, as it involves looping over all (x,y) coordinates of all lines.

I am looking for ways that can help me achieve the above in a more time-efficient manner. Should I consider using SVG in HTML5?

Any suggestions would be appreciated.

解决方案

The simplest way to do this in HTML5 canvas is to take a snapshot of the image data for the canvas, and during mousemove look at the alpha color at the pixel under the mouse.

I've put up a working example of this on my site here:
http://phrogz.net/tmp/canvas_detect_mouseover.html

Here's the core code I wrote. Pass it a context and a function, and it will call your function with the RGBA components underneath the pixel.

function pixelOnMouseOver(ctx,callback){
  var canvas = ctx.canvas;
  var w = canvas.width, h=canvas.height;
  var data = ctx.getImageData(0,0,w,h).data;
  canvas.addEventListener('mousemove',function(e){
    var idx = (e.offsetY*w + e.offsetX)*4;
    var parts = Array.prototype.slice.call(data,idx,idx+4);
    callback.apply(ctx,parts);
  },false);
}

And here's how it's used on that test page:

var wasOver;
pixelOnMouseOver(ctx,function(r,g,b,a){
  var isOver = a > 10; // arbitrary threshold
  if (isOver != wasOver){
    can.style.backgroundColor = isOver ? '#ff6' : '';
    wasOver = isOver;
  }
  out.innerHTML = "r:"+r+", g:"+g+", b:"+b+", a:"+a;
});

这篇关于如何选择在HTML5画布上绘制的线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！