我在使用 CanvasRenderingContext2D.addHitRegion()
时偶然发现了这个问题,我试图了解这是否是预期的行为,如果是,其背后的原因是什么。
这是我的工作 JSFIDDLE 我创建了一个带有点击区域的 Canvas ,并且可以显示点击区域的 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
命令 - 而且我找不到对此行为的任何解释。
很高兴听到任何想法!
最佳答案
fillRect
是 Context2D
的直接命令之一:它创建一条“场景后面”的路径并立即填充它。
这意味着当命中区域需要路径时,它不会像 rect 那样构建路径。
请注意,您不需要填写它,因此仅在需要时才填写。
顺便说一句,浏览器对点击区域的支持不是很好,正如您在这里看到的:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion ,它仍处于实验阶段,因此如果您想要/需要广泛的支持,请查看此内容。
正如 @MarkE 引用的,实现点击区域的一种安全方法是自己处理鼠标(getBoundingClientRect
是你的 friend !)、你的路径集合,并使用 检查坐标isPointInPath
。
再次请注意,isPointInPath
需要一个路径,因此它不适用于直接命令(fillXXX/strokeXXX/ImageData 之类的东西)。
关于javascript - 为什么 fillRect 命令不允许创建命中区域,而 rect 和 fill 的组合却可以?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32468330/