SVGを諦めて、HTML5 Canvasを使用することにしました。

延々とSVGファイルをブラウザ上で自由にパンしたりズームする良い方法を探していたのだけれど、それはもう諦めました。

諦めた理由：
●SVGイメージはCacooで作成していたのだけれど、サイズの上限に達してしまった。
●SVG用のパン＆ズームツールで思うように動くものが見つけられなかった（ズームしても再描画されないので、表示が汚いなど）。

なので、Flash CCがHTML5 Canvasが使えるようになったので、イメージはFlashで作成し、パン＆ズームはCreateJSのEASELJSを使うことにした。

最初、

こちらの記事を参考に作ってみたのだけれど、
●ドラッグアンドドロップする際に、ムービークリップが分割されてしまう。
●座標が常にムービークリップの中心になってしまう。

という状態になってしまったので、こちらのソースを見て作成してみましたら、思うようにいきました。

/demos/dragdrop

ステージに「obj」というインスタンス名を付けたムービークリップを配置した状態で、[js]this.obj.on("mousedown", function (evt) {
this.parent.addChild(this);
this.offset = {
x: this.x - evt.stageX,
y: this.y - evt.stageY
};
});

// the pressmove event is dispatched when the mouse moves after a mousedown on the target until the mouse is released.
this.obj.on("pressmove", function (evt) {
this.x = evt.stageX + this.offset.x;
this.y = evt.stageY + this.offset.y;
// indicate that the stage should be updated on the next tick:
update = true;
});

this.obj.on("rollover", function (evt) {
this.scaleX = this.scaleY = this.scale * 1.2;
update = true;
});

this.obj.on("rollout", function (evt) {
this.scaleX = this.scaleY = this.scale;
update = true;
});[/js]と、スクリプトに書きます。

ちゃんとCreateJSを勉強するために、こちらを注文しました。