専門分野応用►IoTシステム開発

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

最初

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

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