爲什麼fillRect命令不允許創建一個命中區域，而rect和fill的組合呢？

我在與CanvasRenderingContext2D.addHitRegion()一起工作時偶然發現了這個問題，並且我正在努力解決它是否是預期的行爲，如果是的話，這是什麼原因。爲什麼fillRect命令不允許創建一個命中區域，而rect和fill的組合呢？

這是我的工作JSFIDDLE在那裏我創建了一個帶有命中區域的畫布，並且可以顯示點擊區域的ID。

這是我如何加入災區：

ctx.beginPath(); 
ctx.rect(0, i, canvasWidth, itemHeight); 
ctx.fill(); 
ctx.addHitRegion({'id': count, 'cursor': 'pointer'});

這裏是只用一個小的變化同樣的例子（，這就是我如何試圖做到這一點最初 - 爲什麼要用2個命令時，我可以使用一個做同樣的？）

ctx.fillRect(0, i, canvasWidth, itemHeight); 
ctx.addHitRegion({'id': count, 'cursor': 'pointer'});

不幸的是，這是行不通的，如本JSFIDDLE

控制檯顯示以下錯誤：

Uncaught NotSupportedError: Failed to execute 'addHitRegion' on 'CanvasRenderingContext2D': The specified path has no pixels.

因此它似乎以創建嚴重的地區，不能使用fillRect命令 - 我無法找到任何解釋這種行爲。

很高興聽到任何想法！

來源

2015-09-08 williwaw

fillRect是Context2D的直接命令之一：它在場景後面創建一個路徑並立即填充它。
這意味着當命中區域需要路徑時，它不會像rect那樣構建路徑。
請注意，您不需要填寫它，所以只有在需要時纔可以填寫。

作爲一個方面的說法，瀏覽器對點擊區域的支持不是很好，因爲你可以在這裏看到：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion，它仍然是實驗性的，所以如果你想/需要廣泛的支持，請檢查一下。

正如@MarkE引用的，實現命中區域的安全方法是自己處理鼠標（getBoundingClientRect是你的朋友！），路徑集合，並使用isPointInPath檢查座標。
再次說明，isPointInPath需要一個路徑，所以它不適用於直接命令（fillXXX/strokeXXX/ImageData的東西）。

來源

2015-09-08 23:16:46 GameAlchemist

非常感謝，我不知道Context2D有間接和直接的命令！現在我意識到rect會創建一個路徑，fillRect不會。希望這篇文章能夠節省一些人的時間。 – williwaw

Upvote for fillRect vs path命令的一個很好的解釋。你可能會提到'isPointInPath'可以用作「窮人」addHitRegion並且'isPointInPath'得到很好的支持。 – markE

爲什麼fillRect命令不允許創建一個命中區域，而rect和fill的組合呢？

回答

相關問題