ElmのキャンバスシェイプにonClickイベントハンドラーを追加するにはどうすればよいですか?

ミシャモロシュコ

onClickイベントハンドラーをに追加することは可能Graphics.Collage.squareですか?

クリックの相対位置を知りたいのですが。

JavaScriptでは、私のような何かを行うことができ、これを

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);

Elmで同様のことをすることは可能ですか?

例をいただければ幸いです。

オハンヒ

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私たちが関心を持っている実際の「イベント」であるため、発生するたびに、Mouse.position信号を「サンプリング」してクリック位置を取得します。

Signal.sampleOn 最初のパラメータ信号(ここではマウスクリック)に変化があるたびに、2番目のパラメータ信号(ここではマウスの位置)の値で更新される信号を生成します。

ここで、結果を表示するために、位置をのshow関数にマッピングしていますmain

このコードをhttp://elm-lang.org/tryに貼り付け、コンパイルして右側をクリックしてみて、機能することを確認することもできます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

単純なonClickイベントハンドラーをキャンバス要素に追加するにはどうすればよいですか?

分類Dev

ブートストラップdatepickerでイベントハンドラーのバインドを解除するにはどうすればよいですか?

分類Dev

Elmのbody要素にイベントハンドラーを追加するにはどうすればよいですか?

分類Dev

スペースキーをリッスンするキーイベントハンドラーを追加するにはどうすればよいですか?

分類Dev

このイベントハンドラーをjQueryプラグインにバインドするにはどうすればよいですか?

分類Dev

リーフレットのコンテキストメニューイベントをキャッチするイベントハンドラーを追加するにはどうすればよいですか?

分類Dev

イベントハンドラーを使用してボックスシャドウの色を操作するにはどうすればよいですか?

分類Dev

アップロードする前に画像にハイパーリンクとキャプションを追加するために使用するバックエンドシステムを作成するにはどうすればよいですか?

分類Dev

Vueループの最初のアイテムにイベントハンドラーを追加するにはどうすればよいですか?

分類Dev

Minecraft Forgeのブロックレバーにイベントハンドラーを追加するにはどうすればよいですか?

分類Dev

アクションハンドラーで元のイベントオブジェクトを取得するにはどうすればよいですか?

分類Dev

カフェインキャッシュでライトビハインドを設定するにはどうすればよいですか?

分類Dev

onClickイベントハンドラーをcanvas要素(arc)に追加するにはどうすればよいですか?

分類Dev

Axonイベントハンドラー/インターセプターを追加して、ハンドラーに到達する前にイベントをインターセプトするにはどうすればよいですか?

分類Dev

Canonプリンターまたはスキャナードライバーをインストールするにはどうすればよいですか?

分類Dev

キャンバスに描かれた長方形にイベントリスナーを追加するにはどうすればよいですか?

分類Dev

コントロールのEventHandlerListにイベントハンドラーを適切に追加するにはどうすればよいですか?

分類Dev

LinuxのバックグラウンドでPythonを使用してマウスイベントとキーイベントをキャプチャするにはどうすればよいですか

分類Dev

Reactのイベントハンドラーの外でバインドされた関数を実行するにはどうすればよいですか?

分類Dev

onClickイベントの値をElmのアクションにマップするにはどうすればよいですか?

分類Dev

c ++ winrtUWPアプリのコードビハインドからRichTextBlockにテキストを追加するにはどうすればよいですか。

分類Dev

func(... x)... yにキャストされるインターフェイス{}を取り、結果をポインタ値にバインドする関数プロキシをどのように記述すればよいですか?

分類Dev

キャンバス要素の画像にハイパーリンクを追加するにはどうすればよいですか?

分類Dev

派生抽象クラス内でイベントハンドラーを追加および削除するにはどうすればよいですか?

分類Dev

ハイチャート-チャートのベースラインの色を変更するにはどうすればよいですか?

分類Dev

シェルスクリプトの複数のイベントにワイルドカードを使用するにはどうすればよいですか?

分類Dev

QLineEditでキーが押されたイベントなどのイベントを継承せずに、自分でハードコーディングせずにオーバーライドするにはどうすればよいですか?

分類Dev

ブラザーのオールインワンプリンター/スキャナー/ファックス用のプロプライエタリドライバーをインストールするにはどうすればよいですか?

分類Dev

@ContentChildrentからイベントハンドラーを取得するにはどうすればよいですか?

Related 関連記事

  1. 1

    単純なonClickイベントハンドラーをキャンバス要素に追加するにはどうすればよいですか?

  2. 2

    ブートストラップdatepickerでイベントハンドラーのバインドを解除するにはどうすればよいですか?

  3. 3

    Elmのbody要素にイベントハンドラーを追加するにはどうすればよいですか?

  4. 4

    スペースキーをリッスンするキーイベントハンドラーを追加するにはどうすればよいですか?

  5. 5

    このイベントハンドラーをjQueryプラグインにバインドするにはどうすればよいですか?

  6. 6

    リーフレットのコンテキストメニューイベントをキャッチするイベントハンドラーを追加するにはどうすればよいですか?

  7. 7

    イベントハンドラーを使用してボックスシャドウの色を操作するにはどうすればよいですか?

  8. 8

    アップロードする前に画像にハイパーリンクとキャプションを追加するために使用するバックエンドシステムを作成するにはどうすればよいですか?

  9. 9

    Vueループの最初のアイテムにイベントハンドラーを追加するにはどうすればよいですか?

  10. 10

    Minecraft Forgeのブロックレバーにイベントハンドラーを追加するにはどうすればよいですか?

  11. 11

    アクションハンドラーで元のイベントオブジェクトを取得するにはどうすればよいですか?

  12. 12

    カフェインキャッシュでライトビハインドを設定するにはどうすればよいですか?

  13. 13

    onClickイベントハンドラーをcanvas要素(arc)に追加するにはどうすればよいですか?

  14. 14

    Axonイベントハンドラー/インターセプターを追加して、ハンドラーに到達する前にイベントをインターセプトするにはどうすればよいですか?

  15. 15

    Canonプリンターまたはスキャナードライバーをインストールするにはどうすればよいですか?

  16. 16

    キャンバスに描かれた長方形にイベントリスナーを追加するにはどうすればよいですか?

  17. 17

    コントロールのEventHandlerListにイベントハンドラーを適切に追加するにはどうすればよいですか?

  18. 18

    LinuxのバックグラウンドでPythonを使用してマウスイベントとキーイベントをキャプチャするにはどうすればよいですか

  19. 19

    Reactのイベントハンドラーの外でバインドされた関数を実行するにはどうすればよいですか?

  20. 20

    onClickイベントの値をElmのアクションにマップするにはどうすればよいですか?

  21. 21

    c ++ winrtUWPアプリのコードビハインドからRichTextBlockにテキストを追加するにはどうすればよいですか。

  22. 22

    func(... x)... yにキャストされるインターフェイス{}を取り、結果をポインタ値にバインドする関数プロキシをどのように記述すればよいですか?

  23. 23

    キャンバス要素の画像にハイパーリンクを追加するにはどうすればよいですか?

  24. 24

    派生抽象クラス内でイベントハンドラーを追加および削除するにはどうすればよいですか?

  25. 25

    ハイチャート-チャートのベースラインの色を変更するにはどうすればよいですか?

  26. 26

    シェルスクリプトの複数のイベントにワイルドカードを使用するにはどうすればよいですか?

  27. 27

    QLineEditでキーが押されたイベントなどのイベントを継承せずに、自分でハードコーディングせずにオーバーライドするにはどうすればよいですか?

  28. 28

    ブラザーのオールインワンプリンター/スキャナー/ファックス用のプロプライエタリドライバーをインストールするにはどうすればよいですか?

  29. 29

    @ContentChildrentからイベントハンドラーを取得するにはどうすればよいですか?

ホットタグ

アーカイブ