如何在Elm中将onClick事件处理程序添加到画布形状？

是否可以将onClick事件处理程序添加到

Graphics.Collage.square

我想知道点击的相对位置

在Javascript中，我可以执行以下操作：

var canvas=document.getElementById（'canvas'）；
var canvasPosition={
x:canvas.offsetLeft，
y:帆布，斜线
};
canvas.addEventListener（'click'，函数（事件）{
日志（event.x-canvasPosition.x，event.y-canvasPosition.y）；
}，假）；

在Elm中也可以做类似的事情吗

---

示例将不胜感激。

在Elm中，使用画布渲染，您应该使用

鼠标。单击信号并对信号中的更改作出反应。下面是一个可运行的示例，说明了该方法的工作原理：

import Graphics.Element exposing (Element, show)
import Mouse

clicks : Signal (Int, Int)
clicks =
  Signal.sampleOn Mouse.clicks Mouse.position

main : Signal Element
main =
  Signal.map show clicks

本质上，
Mouse.clicks
是我们感兴趣的实际“事件”，因此无论何时发生，我们都对
Mouse.position
信号进行“采样”以获得单击位置

Signal.sampleOn
产生一个信号，每当第一个参数信号发生变化（此处，鼠标点击）时，该信号就会随着第二个参数信号的值（此处，鼠标位置）更新

现在，为了得到显示的结果，我们还将位置映射到
main
中的
show
函数

您还可以将此代码粘贴到，编译并尝试单击右侧以查看其工作。
我实现了一个。这是一个相当粗糙的程序，但它可能会起作用

如果你不喜欢这样，你唯一的选择就是找到鼠标点击的位置（这涉及到从鼠标左上角的原点y向下到图形的非常恼人的转换。拼贴的居中原点y向上），然后进行几何碰撞检测。这对于圆和轴对齐的矩形来说并不太糟糕，但我明白了，你需要一个通用的解决方案

您也可以考虑使用典型的DOM事件，如<代码>鼠标器< /代码>，虽然我不确定事件调度对于例如凸形状的可靠性。或者您可以完全放弃Elm（sniff），将D3.js与SVG一起使用。
我不确定，但我认为如果您需要这样的处理程序，您应该使用它，而不是（有点过时的）拼贴。我想知道用户单击的画布形状的确切位置。知道形状在屏幕上的位置、尺寸和鼠标单击的位置（
mouse.position
），我可以计算形状是否被单击，如果是，具体位置。但是，如果形状不简单，计算起来就不是那么简单了。我想知道是否有更自动化的方法来实现这一点。是的，你可能知道形状在哪里。如果我没有弄错的话，
Mouse.position
默认是相对于Elm画布的。唯一缺少的是碰撞检测，例如，您可以使用它。