javascript初心者です。

質問

javascript初心者です。

http://www.awaseba.com/sample/index.html

の様に画像を組合せ、ドラッグで位置の移動、サイズの変更をやりたいのですが
javascriptでの実現方法をどなたか教えていただけないでしょうか。
またはサンプルを掲載しているサイトか実現しているサイトを教えていただけないでしょうか。

よろしくお願い致します。

回答No.2

fujillin

#1です。

＞あと、上記の実装方法で、画像のサイズの変更をやりたいのですが
＞どちらでもいいのでサンプルがないでしょうか？
単に、画像のサイズを指定するだけで良さそうに思いますが？

http://www.bing.com/search?srch=105&FORM=AS5&q=javascript+%e7%94%bb%e5%83%8f%e3%82%b5%e3%82%a4%e3%82%ba%e5%a4%89%e6%9b%b4

ドラッグの場合は、そのためのインターフェースをを作成する必要があるかも…
ライブラリを利用すると言う手もありますが。
　http://jqueryui.com/demos/resizable/

回答No.1

fujillin

かなり範囲が広い質問なので、回答がつきにくいみたいですね…

ご提示のサイトではflashで実現しているみたいです。
＞またはサンプルを掲載しているサイトか実現している
＞サイトを教えていただけないでしょうか。
ご提示のサイト自体が（方法は違いますが）、そのままサンプルになっているのではないでしょうか？

全体的にＵＩが主体のものとなるので、
＞javascript初心者です。
とおっしゃるかたが作るには大変だと想像されます。
また、ブラウザごとに仕様が違う部分もあるので、ブラウザ限定ならまだしも、jqueryなどのライブラリを利用なさったほうが結果的に楽なように思われます。

以下、全体的に…
1）対象画像をクリックした時の処理
　画像を特定し、ベースとなる画像を表示。（すでに表示されているのなら不要）
2）画像の区分を特定し、重ね順などを設定。
3）ユーザの入力に応じて、画像を移動、拡大縮小、色変更などの処理。
4）必要に応じて、ベース画像の登録（ご提示のサイトにはあるみたい）、完成画像の登録などの機能

みたいなのを作成する必要があります。
3）あたりが作れるようであれば、あとはなんとかなるでしょう。

検索すれば、似たようなサンプルはいろいろあるみたい。
（処理の方法・内容はきちんと確認していませんので悪しからず）
◆同じものをベースにしていると推測される
　http://kisekaemarisa.iza-yoi.net/
　http://soleil-lielos.net/kisekae/kisekae.html
◆javascript版、flash版の両方を用意している
　http://www.h7.dion.ne.jp/~ozon/
◆多分flashベース
　 http://licca.takaratomy.co.jp/play/pink/
◆色の変更のみ？
　http://www.hi-ho.ne.jp/douton/coordinate.html
◆着せ替えを作成するソフト？（↑の最初の元ネタかも？）
　http://www.vector.co.jp/soft/other/java/se253891.html

お礼

fujillinさん
着せ替えを作成するソフト
　http://www.vector.co.jp/soft/other/java/se253891.html
は大変参考になりました。
やりたいことは、この動きです。
ソース見て地道に勉強します。
ありがとうございました。

あと、上記の実装方法で、画像のサイズの変更をやりたいのですが
サンプルがないでしょうか？
・画像をクリックして、画像の四隅にマウスポインタを合わせてドラッグして、サイズ変更
・サイズ変更したい画像をクリックして、サイズ小/サイズ大ボタンでサイズ変更
どちらでもいいのでサンプルがないでしょうか？

よろしくお願いします。