画像拡大とともにエレメントもあわせて動かすには

締切済

質問者：noname#136767
質問日時：2011/02/21 10:42
回答数：3件

画像拡大をすると、その上に配置している、画像が
そのままのため、ずれてしまいます。
googlemapみたいに、拡大縮小しても、ポイントや吹き出しがずれないようになっていますが
あれと同じことを実現できる方法を教えて頂きたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2011/02/22 14:10

#1、#2です。

＞ダブルクリックした場所を基点として～
そこまで、読み取っていませんでした。すみません。

#map内の構成がどのようになり得るのかわかりませんが、入れ子がいろいろあると個々の要素に対して座標計算をするのはネストの状態を考慮しなければならないので面倒そうですね。

処理対象が兄弟要素のみであるとか決まっているのなら、簡単な計算ですむのでどちらでも良いですが、もしそうでないのなら、
ラッパーである#mapの位置は全体座標系に対して移動してあげて、残りの要素はラッパーに対しての相対座標（←拡大/縮小比率）で操作してあげることにすれば、処理が比較的簡単になると思います。
この場合、ラッパーがposition:absoluteかrelativeかによっても計算が変わりそうなので、どちらかに決めておいた方が簡単そうですね。
そうしてしまえば、後半はほぼ#2と同じような処理でいけるのではないかと思います。

座標計算するときに、#mapの親要素がoffsetを持っている可能性が考慮されていないみたいですが、body直下に決め打ちでよいのかしらん？
（790とか262や40も決め打ちなのが気になりますが・・・）

例えば（jqueryがよくわかんないけれど）
　　offset = $("#map").offset();
　　p_offset = $("#map").parent().offset();
とすれば、移動する結果のleft値は
　　event.pageX - (event.pageX - offset.left) * ratio - p_offset.left
みたいになるのではないでしょうか。（←検証していません）

「ダブルクリックした場所を基点として～」だと、拡大するほうは問題ないですけれど、縮小する方も同じロジックで処理してしまうと（クリック位置を基点に縮小）永遠に元の位置には戻ってこないことになりそう。
もし、元の位置に戻すのであれば、最初の位置を記憶しておくとかしておいて、縮小処理は拡大とは別処理にしないとならなさそう。（あるいは縮小の場合はクリック位置を逆算して決めるとか・・・）

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

本機能について実装できていませんが、
これ以上時間をさくことができなくなりましたので、
今回はあきらめることにいたします。

ご協力ありがとうございました

通報する

お礼日時：2011/02/23 10:44

No.2

回答者： fujillin
回答日時：2011/02/21 22:14

#1です。

ライブラリをご利用のようですが、jqueryでしょうか？
jqueryはよく知らないので、かなり適当ですが、似たようなものでごく簡単なサンプルを…
（divとimgだけ対象にするようにしています）

要領のみのサンプルなので、以下のように簡略化しています。
各要素で共通にするために比率で設定。（2倍、1/2倍）
そのままベタで、width、height、top、left、fontSizeの属性のみ変更。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#map { position:relative; width:790px; height:262px; }
#map * { position:absolute; }
#map. #map * { left:0; top:0; margin:0; padding:0; }

#map #imgmap { width:790px; height:262px; }
#map .p_div { top:50px; left:100px; background-color:#ff0; }
#map .p { top:100px; left:200px; width:40px; height:40px; }
#map .q { top:200px; left:50px; width:50px; height:20px; }
</style>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

</script>
</head>

<body>
<div id="map">
<img id="imgmap" src="map.gif" alt="マップ">
<div class="p_div">test<img class="p" src="hoge.gif" alt=""></div>
<img class="q" src="point.gif" alt="">
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
簡潔明瞭なサンプルいただきまして大変助かります。

>ライブラリをご利用のようですが、jqueryでしょうか？
はい使用しております。

ダブルクリックした場所を基点として、拡大縮小していますのでいただいた
サンプルを元に作成が可能か技術力不足もあり判断つきませんが、
引き続き、コードに反映してみて思考錯誤いたします。

通報する

お礼日時：2011/02/22 11:26

No.1

回答者： fujillin
回答日時：2011/02/21 12:57

拡大/縮小はスクリプトで行なうってことでしょうか？

という仮定のもとで、例えば対象が<div id="hoge">～</div>内にあるとすれば、それぞれを{ padding:0; margin:0; position:absolute; }でdiv内座標で配置してあるとします。
原則的には、各要素の座標、サイズ（w、h)、文字サイズを拡大/縮小の比率に応じて拡大/縮小してあげればよろしいかと。
position:absoluteでなくとも普通のマークアップでも可能だと思いますが、その場合は、行間隔やpadding、marginなど調整すべき範囲が拡大するのでいろいろと面倒になりそう。

また、座標やサイズは連続数ではなくピクセル単位になっているので、何度も拡大/縮小して結果的に元のサイズに戻した時に、計算誤差で若干比率が乱れることが起こり得ます。
これを防ぐには、オリジナルをdisplay:noneなどでどこかに残しておいて、常にそれを元に計算するようにすれば比率がおかしくなることはないでしょう。

とはいうものの、一番手っ取り早そうなのは、全体を一枚の画像にしておいてそれを拡大/縮小するという方法。
これなら、単純に画像のサイズを変えてあげればいいだけなので、計算する必要もありません。

この回答への補足

回答ありがとうございます
回答頂いた内容をソースに反映してみましたが、
うまく動作してくれません。
ご面倒だと思いますが、下記スクリプトでもし
おわかりになるようでしたら、ご指摘いただけますでしょうか。

jQueryを使用して拡大縮小しています。
//画像ズーム用スクリプト
$(function() {
var zoomin = true;
var g_x;
var g_y;
$('#imgmap').dblclick(function(e) {
if (zoomin) {
　　　　　//マップ
var x = (e.pageX - $(this).offset().left) * 2 - 395;
if (x < 0) x = 0;
if (x > 790) x = 790;
var y = (e.pageY - $(this).offset().top) * 2 - 131;
if (y < 0) y = 0;
if (y > 262) y = 262;
$(this).animate({width: 1580, height: 524, left: -x, top: -y}, 500);

　　　　　//ポイント←これがうまく動作してくれません
var p_x = (e.pageX - $('#p').offset().left) * 2 - 20;
if (p_x < 0) p_x = 0;
if (p_x > 40) p_x = 40;
var p_y = (e.pageY - $('#p').offset().top) * 2 - 20;
if (p_y < 0) p_y = 0;
if (p_y > 40) p_y = 40;
$('#p').animate({width: 80, height: 80, left: -x, top: -y}, 500);
g_x =p_x;
g_y =p_y;

zoomin = false;
} else {
$(this).animate({width: 790, height: 262, left: 0, top: 0}, 500);
$('#p').animate({width: 40, height: 40, left: g_x, top: g_y}, 500);
zoomin = true;
}
});
});


<div id="map" style="position:relative" width="790" height="262" >
<img id="imgmap" name="imgmap" src="map.gif" STYLE="POSITION:absolute;" alt="マップ" />
<div id="p_div" STYLE="POSITION:absolute;">
<img name="p" id="p" src="point.gif" width="40" height="40" />
</div>
</div>