image

  • フォト Amazonギフト券
    ※この時計の時刻は、閲覧しているパソコンのものであり、必ずしも正確な時間とは限りません

検索

最近のトラックバック

無料ブログはココログ

« 郵便番号検索ページをプログラムから利用してみる(その2) | トップページ | ピックアップ: RubyとWiiリモコンをつなぐ, グーグルが起こす第二の革命, etc... »

2007-09-02

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

Svgmouse

- 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
 > > SVGの勉強会
にある
  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>

</xvcd:xvcd>

« 郵便番号検索ページをプログラムから利用してみる(その2) | トップページ | ピックアップ: RubyとWiiリモコンをつなぐ, グーグルが起こす第二の革命, etc... »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/184434/16320444

この記事へのトラックバック一覧です: xfy/xvcd の svg でマウスイベントを扱う:

« 郵便番号検索ページをプログラムから利用してみる(その2) | トップページ | ピックアップ: RubyとWiiリモコンをつなぐ, グーグルが起こす第二の革命, etc... »

mokuji

2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

google

  • twitter
  • __
  • _
    Googleボットチェッカー

合わせて読む

  • 合わせて読む
    フィードメーター - katoy: cocolog あわせて読みたい

リンク