Html5 Canvas方法isPointInPath只确定最后一个对象

问题描述：

示例here。Html5 Canvas方法isPointInPath只确定最后一个对象

var context=document.getElementById("canvas").getContext("2d"); 

//Red Box 
context.beginPath(); 
context.fillStyle="Red"; 
context.rect(10,10,50,50); 
context.fill(); 

//Pink circle 
context.beginPath(); 
context.lineWidth="3"; 
context.fillStyle="Pink"; 
context.arc(250,250,50,0,Math.PI*2,false); 
context.fill(); 
context.stroke(); 

context.font="1.2em Verdana"; 
context.fillStyle="Black"; 
context.fillText(context.isPointInPath(35,35),35,35); 
context.fillText(context.isPointInPath(250,250),250,250);

如果你乱写beginPath方法检测到的所有对象。如何识别画布上的对象或省略beginPath？

+1一种简单，大方，并适当削减的测试案例，解释你的问题。 – Phrogz

答

如果要使用该功能，则需要在每次要执行测试时重新生成路径（不要拨打fill或stroke）。

如果有很多物体和速度很重要，我通常会做的是使用我自己的点多边形测试函数或我自己的空间数据结构。

请注意，画布仅仅是一个位图，它并不存储您用来绘制的命令。这就是为什么在绘制形状后无法进行检查，只能测试当前路径。

一旦您呼叫beginPath，以前的路径几何图形将被丢弃，如果您调用fill或stroke，则只有受影响的像素具有。

可能对你的情况下，它可能是有意义的检查画布像素的颜色...

我在我的代码中有类似的需求，正如6502所建议的那样，我将这些点存储在我自己的数据结构中，并使用我自己的点中多边形函数进行点击测试。 canvas API实际上不支持非平凡的命中测试。 – dgvid

...或者您可能要考虑使用像SVG这样的保留图形模式API而不是'

答

我刚读了一个新的除了画布规范路径（）对象。推测这些可以被存储并且随后被测试和/或重放。可能有用。如果我已经正确理解了这个规范。

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#path-objects

是的，新的Path2D对象现在可以将路径存储为变量。看到这个问题并回答http://stackoverflow.com/a/28913470 –

Html5 Canvas方法isPointInPath只确定最后一个对象

相关推荐