More than 5 years have passed since last update.

riot.jsでマウスムーブイベントでグリグリ動かす方法

Posted at 2018-03-06

最初

riotとsvgを使って手軽にぐりぐりできないかと思った。

onclickイベント？

公式のドキュメントとかを見ていると日本語ではonclickとかoninputとかのイベントしか記載がない…
試しにonmousemoveを下記のようにしてみたら動いた。

<circle onmousemove={move} cx="10" cy="20" r="20" fill="blue" />

マウスの場所…

通常、マウスのイベントの戻り値としてマウスの情報が飛んで来るのだが、riotは...？
適当に引数を追加し参照したところそれっぽい物が戻ってきていた。

move(e){
  console.log(e);
}

要素への参照

マウスイベントの戻り値のpathに要素をみつけたので下記のように記載

    move(e){
      e.path[0].setAttribute("cx",e.offsetX);
      e.path[0].setAttribute("cy",e.offsetY);
    }

これでうまく動きました。

全体のソース

sample.tag

<sample>
<svg id="svg" width="300" height="340" style="border-width: thick; border-color: #EEE; border-style: solid; display: block; margin: auto;">
    <circle onmousemove={move} onmousedown={down} cx="10" cy="20" r="20" fill="blue" />
</svg>
  <script>
    var self=this;
    move(e){
      e.path[0].setAttribute("cx",e.offsetX);
      e.path[0].setAttribute("cy",e.offsetY);
    }
  </script>
</sample>

index.html

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <sample></sample>
    <script type="riot/tag" src="sample.tag"></script>
    <script src="https://cdn.jsdelivr.net/npm/riot@3.8/riot+compiler.min.js"></script>
    <script>riot.mount('sample')</script>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up