画像の拡大・縮小で基点となる場所を変えたい

Question

やりたいこと：

画像の拡大・縮小イベントを作成したが、左上を基点にしか拡大・縮小できない。
左上以外の要素の四隅(右上、右下、左下)を基点にして拡大・縮小が出来る様にしたい。

試してみた内容：

transform-originプロパティをを試してみたが要素を回転させる時の基点だったので、カーソルの座標位置を取得しての拡大・縮小時の基点には対応してなかった。

参考資料：

https://www.conifer.jp/csstest/Image-resize-crop/Js-resize-crop.html
※参考資料はjQuery

全体ソースコード：

https://codepen.io/mio-rei/pen/xxqZxGq

ソースコード抜粋：

// マウスダウン(要素の移動　初期動作)
    const mouseDown = (e) => {
        let t =e.target;
        if(t.nodeName != 'IMG' && t.nodeName != 'TEXTAREA') return;
        obj.elm = t;
        obj.setOffset(e);
        if ( e.offsetX < 5 || e.offsetX > t.offsetWidth -5 ||
             e.offsetY < 5 || e.offsetY > t.offsetHeight -5) {
                console.log('test成功です');
                element.addEventListener('mousemove', mousemove);
        } else {
              element.addEventListener('mousemove', mouseMove);
        }
    };

     
// マウスムーブ(要素の移動)
    const mouseMove = (e) => {
        if(!obj.elm ) return;
        obj.setPos(e, obj);
        obj.setOffset(e);
        };


    const mousemove = (e) => {
        const elmsubX = obj.elm.getBoundingClientRect().left - cRect().left;
        const elmsubY = obj.elm.getBoundingClientRect().top - cRect().top;

        obj.elm.style.width = e.clientX - cRect().left - elmsubX + 'px';
        obj.elm.style.height = e.clientY - cRect().top - elmsubY + 'px';
    }

Comments

[hoshi-takanori]

transform-origin は transform: scale にも効くと思いますが、たぶんやりたいこととは違いますよね。
ドラッグの開始が左上や右上や左下の場合は、setPos とか setOffset も必要なのでは。

Answer 1

ご提示のコードは、要素のCSSleft topで位置をコントロールしています。
ですので、width heightの増減分だけ、符号を反転させてleft topを増減させれば右下基準になると思われます。
同様に、垂直水平の符号をそれぞれ入れ替えることによって四隅に対応できるはずです。

Comments

[rei78087487]

回答ありがとうございます。
回答者様のアドバイスを元に作成した内容が下記になります。

作成したのは(右上)基準
https://codepen.io/mio-rei/pen/bGqpgEm

作成することはできたのですが、回答者様とは違う作成方法です。
回答者様はwidth heightの増減分だけ、符号を反転させてleft topを増減させれば右下基準になると
と回答頂きました。
そうなるとCSSのleft.topのプロパティを変えることなく基準点を変えることができる。
私が作成したのはCSSのプロパティをleft→right、top→topに変えて作成しました。
プロパティ(left.top)を変えることなく,増減のみでやる方法がどうしてもわからなかったので
教えて頂きたくお願い致します。

const pos = (e, d={x:0, y:0}) => ({
x: cRect().right - e.clientX - obj.elm.clientWidth - d.x,
y: e.clientY - cRect().top - d.y
});

// オブジェクト内関数
const obj = {};

obj.setPos = (e, o={x:0, y:0}) =>{
let p = pLim( pos(e, o) );
obj.elm.style.right = p.x + 'px';
obj.elm.style.top = p.y + 'px';
};

// マウスムーブ(画像の拡大・縮小)
const mousemove = (e) => {
const elmsubX = obj.elm.getBoundingClientRect().right - cRect().right;
const elmsubY = obj.elm.getBoundingClientRect().top - cRect().top;
const test = e.clientX - cRect().right - elmsubX;
const test2 = e.clientY - cRect().top - elmsubY;
obj.elm.style.width = -test + 'px';
obj.elm.style.height = test2 + 'px';
}

[Lhankor_Mhy]

> 私が作成したのはCSSのプロパティをleft→right、top→topに変えて作成しました。

もちろん、それでも問題ないと思いますよ。
ご解決ですか？

[rei78087487]

解決ではありますが、回答者様のleft.topを変えずに基準点を変える方法が知りたいです。
何卒お願い致します。

[Lhankor_Mhy]

私の回答も left top の値を変更するものですが……？

[rei78087487]

そうだったのですね。
てっきりleft.topを変えないで基点を変えられるものと思っていました。
ご教示ありがとうございます。