elm - 如何将 onClick 事件处理程序添加到 Elm 中的 Canvas 形状？

Question

是否可以将 onClick 事件处理程序添加到 Graphics.Collage.square ?

我想知道点击的相对位置。

在 Javascript 中，我可以做类似 this 的事情:

var canvas = document.getElementById('canvas');
var canvasPosition = {
  x: canvas.offsetLeft,
  y: canvas.offsetTop
};

canvas.addEventListener('click', function(event) {
  console.log(event.x - canvasPosition.x, event.y - canvasPosition.y);
}, false);

在榆树中可以做类似的事情吗？

示例将不胜感激。

Answer 1

在 Elm 中，使用 Canvas 渲染，您应该使用 Mouse.clicks 信号并对信号的变化使用react。这是一个可运行的示例，说明如何工作:

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 产生一个信号，当第一个参数信号(此处为鼠标点击)发生变化时，该信号会随着第二个参数信号的值(此处为鼠标位置)而更新。

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

您也可以将此代码粘贴到 http://elm-lang.org/try ，编译并尝试单击右侧以查看它的工作情况。