如何选择在HTML5画布上绘制的线条？
我正在使用HTML5画布绘制线条。通过在多个中间点上调用drawLine()可以形成一条线。例如：
(0,0) -> (10，10) -> (10，5) -> (20，12)
会在图上显示为一条线。
一条线的所有(x，y)坐标都存储在一个数组中。
我希望为用户提供当他们单击一条线时选择它的能力。在HTML5画布中很难做到这一点，因为线条不是由对象表示的。留给我的唯一选择是首先找到与mousedown事件的(x，y)最接近的任何线的(x，y)坐标。一旦我检测到用户选择了哪条线，那么我需要用粗体颜色或在它周围放置半透明颜色来重绘这条线。但是，我假设这将是非常耗时的，因为它涉及到遍历所有行的所有(x，y)坐标。
我正在寻找能够帮助我以更省时的方式实现上述目标的方法。我应该考虑在HTML5中使用SVG吗？
如有任何建议，我们将不胜感激。
回答 3
Stack Overflow用户
发布于 2011-11-19 04:35:31
在HTML5画布中执行此操作的最简单方法是为画布拍摄图像数据的快照，并在鼠标移动期间查看鼠标下方的像素的alpha颜色。
我已经在我的网站上提供了一个工作示例：
http://phrogz.net/tmp/canvas_detect_mouseover.html
这是我写的核心代码。向它传递一个上下文和一个函数，它将调用您的函数，并在像素下使用RGBA组件。
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);
}下面是它在测试页面上的用法：
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;
});Stack Overflow用户
发布于 2011-11-19 00:03:57
我认为在SVG中您会发现这一点要容易得多。每一行都有一个<polyline>，您可以添加一个onclick处理程序来执行您想要的操作。例如..。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:5"
onclick="this.style.stroke='red'" />
</svg>Stack Overflow用户
发布于 2011-11-19 00:08:25
在画布上执行此操作的唯一方法是检测像素颜色并跟随路径，或者将路径另存为对象并检测在该路径上的单击。
https://stackoverflow.com/questions/8184452
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号