Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2010-06-27

uupaa2010-06-27

MultiTouch +SVG + DragAndDrop + Gesture

MultiTouch と SVG で遊んでみました。

PCならマウスホイールで拡大/縮小, シフトキーを押しながらホイールで回転。

iPhoneならピンチで拡大/縮小と回転。

トリプルタップやトリプルクリックで元のサイズに戻ります。

SVG DOM I/F

今のところ、こんな感じで考えてます

  • uu.svg(x, y, width, height, { attr }, { css })
  • uu.svg.g(translateX, translateY, { attr }, { css })
  • uu.svg.rect(x, y, width, height, rx, ry, { attr }, { css })
  • uu.svg.circle(cx, cy, r, { attr }, { css })
  • uu.svg.text(txt, x, y, { attr }, { css })

{ attr } と { css } はオプションです。最初の Hash が attr として解釈され、次の Hash が css として解釈されます。

引数は uu.svg.rect({ fill: "black"}, 10, 20, 100, 200) のような順番でも指定できます。この場合は、attr={ fill: "black" }, x=10, y=20, width=100, height=200 として解釈します。

現在のところドラッグターゲットは、svg:g で囲む必要があります。ドラッグで動かすのは親要素の g になります。

(function(uu, svg) {
    var n = [];

    uu.body(
        svg(100, 100, 600, 600,
            n[0] = svg.g(100, 10,
                svg.g(
                    n[1] = svg.circle({ cx: 50, cy: 50, r: 40, fill: "skyblue" }),
                    n[2] = svg.circle(60, 60, 25, { fill: "springgreen" }),
                    n[3] = svg.rect(60, 60, 100, 100, 20, 20, { fill: "hotpink" }),
                    n[4] = svg.text("drag me !", 30, 50, { stroke: "none", fill: "#000" }))),

            n[10] = svg.g(400, 10,
                    n[11] = svg.g(0, 0,
                                svg.circle({ cx: 50, cy: 50, r: 40, fill: "skyblue" })),
                    n[12] = svg.g(0, 0,
                                svg.circle(60, 60, 25, { fill: "springgreen" })),
                    n[13] = svg.g(0, 0,
                                svg.rect(60, 60, 100, 100, 20, 20,
                                         { fill: "hotpink" })),
                    n[14] = svg.g(0, 0,
                                svg.text("drag me !", 30, 50, { stroke: "none", fill: "#000" })))));
    var option = {
        mousedown: function(evt, node, option, dragInfo) {
            uu.fx.skip(node, 1, 1);
            uu.fx(node, 100, { o: 1 });
        },
        mouseup: function(evt, node, option, dragInfo) {
            uu.fx(node, 400, { o: 0.4 });
        }
    };

    uu("SVGDrag", n[0], null, option);
    uu("SVGDrag", n[11], null, option);
    uu("SVGDrag", n[12], null, option);
    uu("SVGDrag", n[13], null, option);
    uu("SVGDrag", n[14], null, option);

})(uu, uu.svg);

反省会

  • 初めての SVG なので、図形の中心で回転させる方法がいまいち把握できてない
    • まぁ、そのうちに
  • 肝心の SVG の実装は svg, rect, g, circle, text だけ。残りはこれから