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