マウス座標の中心で
画像を拡大縮小
させるJavascriptポインタやマウス座標の中心で
魔法のように自在に
画像を拡大縮小させるJavascript
ドラッグもできるよ

image: マウス座標の中心で画像を拡大縮小させるJavascript
Top›labo›
zoom in/out an image around the mouse coordinates

マウス座標を中心に拡大縮小するとはどういうことか

 | 2024/02/19

経緯

苦節5年の懸案事項

  • やっと構想を実現できるスキルが身についたようだ。

    実はこのマウス座標を中心に拡大縮小、思い立ったのは5年ほど前になります。画像のビュアーをjqueryを利用して制作した時です。
    当時はスキルが追い付かず、というかマウス座標を中心に拡大縮小するロジックが解析できず、実際に着手したのは去年の12月頃です。
    着想からだと実に5年以上になります。感慨深いですね。
    その間、google検索や、ChatGPTなどで「マウス座標を中心に拡大縮小」を調べましたが、ろくな検索結果がありませんでした。サンプルあっても、デモページが無かったり、動かないデモだったり、最初の拡大だけのサンプルだったり、GIFアニメだったり・・・全部ブロックしました。
    一番参考になったのはphotoshopです。photoshopをじっくり眺め解析しました。
    大事なのはロジック。photoshopを眺めていて気が付いたのがドラッグと拡大縮小が分離すればいいじゃんってこと。そしてその順番。これが一番のヒントがなりました。実際にphotoshopそうなってるかは知りませんが・・・。

  • どんなものかのデモ

    ホイールを使って画像をマウス座標を中心に拡大縮小し、ドラッグ移動ができるサンプルです。
    ES6以上で制作してあります。jQueryなどは無しです。※一番下にもリンクを置いてます。
    当然ですが、スマホには、すでに同様機能があるので対応していません。
    マウス座標を中心に拡大縮小のデモ。ドラッグにも対応：https://labo.studio-happyvalley.com/interactjs/center/

基本

transform-origin: を考える

  • WEBでは拡大縮小はtransformを使うのが一般的。

    WEBでは拡大縮小はtransformを使うのが一般的で効率も良いです。
    そしてその変更の基準がtransform-originです。
    transform-origin: X座標 Y座標;　とすることでX,Yを変形の原点とすることができます。（この場合は拡大縮小の原点）
    keywordも用意してあり、trasform: top left;で左上を基準に拡大縮小や回転、移動ができます。
    trasform: center;でその基準が要素の中心になります。
    この場合、基準は変形する要素であり、ブラウザではありません。
    そこで最初に考えるのはマウスの座標をtransform-originにすればよいという方法です。
    ところがこの方法はうまくいきません。その理由を次で説明します。

    fig2-1-1fig2-2-1fig2-3-1fig2-4-1

    1. 任意のマウス座標を中心に2倍に拡大した仮想図。 マウス座標をtransform-originの基点と仮定。

    2. マウス座標を基点に2倍の矩形に変換される

    3. 次に任意の座標、たとえば左上あたりにマウスを移動し、 マウスホイールをスクロール

    4. ホイールスクロールの瞬間。直前の拡大処理がキャンセルされ、今の座標をtransform-originの基点とする拡大に置き換わります。

  • transform-originを変更した瞬間、移動した座標をtransform-originにした変形に変更されます。
    これはransformの変形が終了しても変形前のパラメータが随時保持されているためです。
    なんとなく変形ごとに元の要素のデータも変更されるのかと思ってしまいますが、常にもともとの要素のwidthとheightを基準に変更されます。

探求

transform-origin: を使わない方法を考える

  • 他の方法を探求

    マウス座標をtransform-originに設定する方法が使えないのであれば、面倒ですが移動用のtranslateを使ってなんとかするしか方法はありません。
    つまり座標が変動するたびにその差分をtranslateしてやるという考えです。
    また、transform-originは左上に固定します。
    WEBの座標は左上が基準なのでこれが一番効率が良いです。

    さて、下図をご覧あれ。図Aが元画像。画像内の右下の十字点が仮のマウス座標です。
    BはAを左上を基点に2倍に拡大した画像。
    そして、Cはマウス座標を基準した場合の2倍の拡大画像。
    つまりBがCになればよいわけです。そのためにはD分のX座標、Y座標を移動すればよいことになります。
    ということで使用するメソッドは、transform-ogrigin: left top固定で、transform: scale(), transform: translate()の二つということになります。

    fig4-6

実証

実際に理論通りか構築し実験してみる

  • さて、理論は構築できたので、実際にその通りになるか試してみます。

    準備したのは基画像とそれを2倍にし、上図のD分だけ移動したサンプルです。これのそれぞれの座標がぴったり重なれば理論は正しかったことになります。
    まず画像の準備。1200ⅹ800の画像を準備、それぞれの同じ箇所に仮想のクリック座標を記入。次に最初の倍率をscale:1で考え何倍にするか？
    複数パターンの材料が欲しかったので4～5回変倍することに。
    ということで次のような式を構築。
    複数の画像にそれぞれ倍率を設定し、それらを配列へ格納、forEachで個別に構築した式を割り当てます。
    これですべての画像の仮想クリック座標同じ座標になれば構築した式が正しいことになります。

    const p={
	_orgX: 1,
	get orgX(){return this._orgX},
	set orgX(v){this._orgX = v},
	_orgY: 1,
	get orgY(){return this._orgY},
	set orgY(v){this._orgY = v},
	_scale: 1,
	get scale(){return this._scale},
	set scale(v){this._scale = v},
	_mousePoints: {x: 999, y: 598},
	get mousePoints(){
		return this._mousePoints;
	},
	set mousePoints(v){
		if(v){
			this._mousePoints= v;
		}else{
			this._mousePoints= {x: this._wW / 2, y: this._wH / 2};
		}
	},
};

const zoomImgs= document.querySelectorAll('#prvBlc img');
zoomImgs.forEach( (item, ) => {
	const scale = Math.round( item.dataset.scale *100) / 100;
	p.scale= scale;
	p.orgX= p.mousePoints.x * (scale - 1) * -1;
	p.orgY= p.mousePoints.y * (scale - 1) * -1;
	item.style.transform= 'translate( '+p.orgX+'px, '+p.orgY+'px) scale('+scale+')';
});
  • HTMLの解説

    それぞれ、画像要素（imgタグ）を6点準備しています。画像はすべて同じです。
    画像自体には仮想のマウス座標に相当する印、十字座標と同心円が記載されています。
    画像要素（imgタグ）はすべてposition: absolute で重なるようにしています。
    座標はすべて同じなので何も変更くわえなければピッタリと重なります。
    それぞれの画像の座標などが分かるように透明度を入れています。
    これに、data属性で倍率を設定します。
    それぞれ
    0.2、0.5、1、1.2、1.5、2倍になるように設定しています。
    これをJSで処理すると拡大率に応じた移動距離を付与され、拡大・移動表示されます。
    各画像の十字の印がピッタリ重なれば、検証OKということです。

    <div id="prvBlc" class="draggable">
	<img data-scale=0.2 src="/assets/labo/interactjs/simple/images/img1.jpg" alt="">
	<img data-scale=0.5 src="/assets/labo/interactjs/simple/images/img1.jpg" alt="">
	<img data-scale=1 src="/assets/labo/interactjs/simple/images/img1.jpg" alt="">
	<img data-scale=1.2 src="/assets/labo/interactjs/simple/images/img1.jpg" alt="">
	<img data-scale=1.5 src="/assets/labo/interactjs/simple/images/img1.jpg" alt="">
	<img data-scale=2 src="/assets/labo/interactjs/simple/images/img1.jpg" alt="">
</div>
  • どうやら成功しました。

    ブラウザで表示してみてください。
    きちんと座標が重なっているでしょう。式は正しかったことになります。
    次は実際にwheelイベントで拡大機能と一緒にしてみます。

    下層マウス座標を中心とした拡大縮小テスト：https://labo.studio-happyvalley.com/interactjs/simple/

    img1

    1. 使用している画像。右下に十時の印を入れてます。

注意点

Transformの注意すべき点。(重要）

  • 実装の前に基本を検証

    transformを使うとき非常に重要なことがあります。それは順番。変形方法にはtranslate, scale,rotateの三つありますがこの順番次第で変形結果の形状はまったく違ってきます。たとえば今回使用予定のtranslate, scale,。これらも順番を正しくしないと期待通りの結果は得られません。
    次にその検証です。先にscaleを先するサンプルと後にscaleするサンプルを組み合わせたコードです。

    /*Aが元画像、*/
#prvBlc img#normal{
	transform: scale(1) translate(0, 0);
}

/*B左上が先にsacle2それからtranslate*/
#prvBlc img#scale{
	transform: scale(2) translate(-300px, -200px);
}

/*C右下が先にtranslateそれからsacle2*/
#prvBlc img#translate{
	transform: translate(-300px, -200px) scale(2);
}

    fig5-2

  • ここまで変わるのわかりますか？

    transformの順番による違い：https://labo.studio-happyvalley.com/interactjs/test/

  • もうひとつの注意点、初期画像のサイズ

    もうひとつの注意点として、初期画像のサイズがあります。
    つまり、最初の画像が小さいサイズだと、拡大してもぼそぼその画像になるだけです。ドット絵を拡大するようなものです。
    拡大した後に高解像度画像と差し替える方法もありますが、スマートではないです。
    今回はもともとの高解像度画像を初期表示ではブラウザサイズに縮小して表示する仕様にしています。
    これで拡大してもきれいな画像が表示されます。
    PC専用だし、1点だけなので重くはなりません。
    このプログラムではベストな選択だと思います。

完成

マウス座標を中心に拡大縮小とドラッグにも対応したコード

『マウス座標の中心で画像を拡大縮小させるJavascript』関連のお薦め

このサイトで紹介しているコード、プログラムなどは個人の学習目的で作成されたものであり、いかなる保証も行いません。
利用はすべて自己責任でお願いします。
ただし、このページで紹介しているプログラムやビジュアルなどはご依頼いただければ実装を賜ります。
お問い合わせはこちら