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信号并对信号中的变化作出反应。这是一个可运行的例子，说明了它的工作方式：

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是实际的＆＃34;事件＆＃34;我们感兴趣，所以无论什么时候发生，我们＆＃34;样品＆＃34;获取点击位置的Mouse.position信号。

只要第一个参数信号发生变化（这里是鼠标点击），

Signal.sampleOn就会产生一个信号，该信号会使用第二个参数信号的值（此处为鼠标位置）进行更新。

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

您也可以将此代码粘贴到http://elm-lang.org/try，编译并尝试点击右侧以查看其是否有效。

Answer 2

我实施了proof-of-concept backbuffer test。它非常hacky但它可能会起作用。

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

您还可以考虑使用elm-svg，其中包含典型的DOM事件，例如catalog$msg[i]，但我不确定事件发送的可靠性如何。凸形。或者你可以完全放弃Elm（嗅探）并使用带有SVG的D3.js。

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

2 个答案: