SVG/square - a羅針盤

正方形の回転 †

正方形をマウスの動きで回転させるサンプルを作成してみました。
現在の角度を左上に記録しておき、マウスの左右の動きで角度を左回転(+,マウス右方向)、右回転(-,マウス左方向)します。角度の表示は前章textで説明した文字列の読取りと変更を使用しています。正方形の回転はtransform属性のrotateを使用してを中心座標を指定して回転させています。
注意が必要なのは座標のX,Yと角度はSVGと表示とでプラス・マイナスが反対なことです。
マウスのイベントからその時のX座標を取得しその移動量を計算しています。
このサンプルの目的は、図形の回転はもちろんですが、図形をSVGの描画領域に表示する時のパラメータの設定、マウスのイベントの取得と処理、テキストの取得と書換えなどのテクニックの確認です。

以下がソースの内容です。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
        width="600px" height="400px"
        onmousedown="MsDown(evt)"
        onmouseup="MsUp()"
        onmousemove="MsMove(evt)"
        onmouseout="MsUp()"
    >
<script type="text/ecmascript"><![CDATA[
    var moveX = 0;
    var moveY = 0;
    var bMs = false;
    var xPos = 0;
    var yPos = 0;

    function MsDown( e ) {
        bMs = true;
        xPos = e.screenX;
        yPos = e.screenY;
    }

    function MsUp( ) {
        bMs = false;
        moveX = 0;
        moveY = 0;
    }

    function MsMove( e ) {
        if (bMs == true) {

            var element = e ? e.target : window.event.srcElement;

            if ( element.nodeName == "svg" ) {
                moveX = e.screenX - xPos;
                xPos = e.screenX;
                moveY = e.screenY - yPos;
                yPos = e.screenY;

                var txtAngle = element.getElementById("angle").textContent;
                var work = txtAngle.substring(0, txtAngle.length - 1);
                var intAngle = parseInt( work ) + moveX;

                if ( 360 <= intAngle ) {
                    intAngle = intAngle - 360;
                } else if ( intAngle <= -360 ) {
                    intAngle = intAngle + 360;
                }

                txtAngle = intAngle + "°";
                element.getElementById("angle").textContent=txtAngle;
                intAngle = 0 - intAngle;

                var transform = "rotate(" + intAngle + ",150,150)"

                var svgobj = element.getElementById("global");

                set_transform( svgobj, transform);
            }
        }
        return;
    }

    function set_transform ( svgobj, value ) {
        svgobj.setAttribute ('transform', value);
    }

]]></script>

    <desc>Square Rotation</desc>
    <rect id="canvas" x="1" y="0" width="598" height="399" stroke="black" stroke-width="0.5" fill="none"/>
    <text id="angle" x="0" y="20" text-anchor="right">0°</text>
    <g id="global">
        <rect id="square" x="50" y="50" width="200" height="200" stroke="black" stroke-width="1" fill="none"/>
        <path stroke="black" stroke-width="1" fill="none" d="M 150 150 L 250 50"/>
    </g>

</svg>

↑

サンプル †

SVGが使えるブラウザーだと次に正方形が表示されます。viewBox内でマウスを左右に動かして正方形を回転してみて下さい。

前へ　 SVG目次　次へ

Last-modified: 2014-03-11 (火) 01:58:42 (3701d)