xfy/xvcd の svg でマウスイベントを扱う: katoy: cocolog

2007-09-02

xfy/xvcd の svg でマウスイベントを扱う

- https://www.xfytec.com/community/modules/mydownloads/singlefile.php?cid=58&lid=166
> > xfy Community - xfeyes
として、xfy/xvcd で svg を使った描画による xeye アプリの例が公開された。
これをみて svg でマウスイベントを扱う方法が判った。
(徐々に実験を続けて、オセロゲームの盤面を扱えるようになろうと思う)

そこで、
　- http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/index.html
　> > ＳＶＧの勉強会
にある
svgsample7.svg
>> マウスを追いかけるサンプルです。
を xfy/xvcd で真似してみた。
svg 全体では、マウス移動イベントを扱い、
描画する円では、マウスクリックとドラッグイベントを扱うようにした例を作成してみた。

$ cat xfeye.xml
<?xml version="1.0" encoding="UTF-8"?>
<?com.xfy vocabulary-connection href="xfeyes.xvcd" ?>
<eyes:root xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes">
<eyes:eyes>
</eyes:eyes>
</eyes:root>

$ cat xfeye.xvcd
<?xml version="1.0" encoding="UTF-8"?>
<!--
2007-09-02 katoy

xfy/xvcd をつかって
http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/index.html
にある
http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/svgsample7.svg
と同様のものを実装した。
マウスの移動とクリックに反応して、SVG 描画が変化する。
-->

<xvcd:xvcd version="1.0"
exclude-result-prefixes="#all"
xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes"
xmlns:function="http://xmlns.xfy.com/function"
xmlns:event="http://xmlns.xfy.com/event"
xmlns:inst="http://xmlns.xfy.com/instruction"
xmlns:xvcd="http://xmlns.xfy.com/xvcd"
xmlns:svg="http://www.w3.org/2000/svg">

<xvcd:variable name="WIDTH" select="'400'" />
<xvcd:variable name="HEIGHT" select="'300'" />
<xvcd:variable name="radiusS" select="'30'" />
<xvcd:variable name="COLOR0" select="'red'" />
<xvcd:variable name="COLOR1" select="'blue'" />

<xvcd:user-data name="X" value="{$WIDTH * 0.5}" />
<xvcd:user-data name="Y" value="{$HEIGHT * 0.5}" />
<xvcd:user-data name="COLOR" value="{$COLOR0}" />

<xvcd:vocabulary name="xfeyes" match="eyes:root" call-template="root" />

<xvcd:command name="Move">
      <inst:param name="event"/>
      <xvcd:set-user-data name="X" value="{$event/event:*/@component-x}" />
      <xvcd:set-user-data name="Y" value="{$event/event:*/@component-y}" />
</xvcd:command>

<xvcd:command name="ChangeColor">
      <inst:param name="event"/>
      <inst:choose>
         <inst:when test="xvcd:user-data('COLOR')=$COLOR0">
            <xvcd:set-user-data name="COLOR" value="{$COLOR1}" />
         </inst:when>
         <inst:otherwise>
            <xvcd:set-user-data name="COLOR" value="{$COLOR0}" />
         </inst:otherwise>
      </inst:choose>
</xvcd:command>

<xvcd:template name="root">
      <svg:svg width="{$WIDTH}" height="{$HEIGHT}">
         
         <xvcd:action event="event:mouse-moved">
            <inst:param name="event:event" />
            <inst:call name="Move">
                  <inst:with-param name="event" select="$event:event"/>
            </inst:call>
         </xvcd:action>
         <xvcd:call-template name="draw" />
      </svg:svg>
</xvcd:template>

<xvcd:template name="draw">
      
      <svg:g>
         <svg:circle cx="{xvcd:user-data('X')}" cy="{xvcd:user-data('Y')}" r="{$radiusS}"
            style="fill:{xvcd:user-data('COLOR')};
            stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:2;stroke-linecap:butt;
            stroke-linejoin:miter;fill-opacity:1;
            fill-rule:nonzero;">
            
            <xvcd:action event="event:mouse-pressed[@button=1]">
                  <inst:param name="event:event" />
                  <inst:call name="ChangeColor">
                     <inst:with-param name="event" select="$event:event"/>
                  </inst:call>
            
            </xvcd:action>
                  <xvcd:action event="event:mouse-dragged">
                     <inst:param name="event:event"/>
                  <inst:call name="Move">
                     <inst:with-param name="event" select="$event:event"/>
                  </inst:call>
            </xvcd:action>
         </svg:circle>
      </svg:g>
</xvcd:template>