Q&A
図形というのは<div>で作ったボックスでしょうか？それともcanvasへの描画のことでしょうか？現状行き詰まっているところまでのコードを追記できますか？
ちょっとわかりづらりづらくて申し訳ないのですが、
例えば、
w:100,h:100の図形がx:0,y:0にあったとして、
これを徐々にscaleを拡大していくとします。
そして、基準点がx:0,y:0のときは
そのまま、w:110,h:110と拡大されて行っても問題ないのですが、
例えば、基準点がx:50,y:50の位置にあった場合、
（要は図形の中央を軸に拡大したい）
どのような計算式になりますでしょうか？
おそらく、xとyを基準点を基にマイナスする計算になると思うのですが、
どういう計算にすればよいかわからず・・・
//追記
全体が膨大で掲載が難しく該当箇所のみ抜粋いたします・・
var zoom = .1; //container.scaleの初期値は1 width:100 height:100 とします container.scale += container.scale + zoom; container.x -= ??? container.y -= ??? stage.update();
//追記2
拡大軸中央の場合は問題ない
【実現したいこと】拡大軸が中央からずれている場合
creatjs になります！追記いたしました！
例えば、scaleを.1追加した場合、xとyをどれくらいマイナスに移動させれば中央を起点に拡大したようにみえるのかということです・・・
回答1件
0
ベストアンサー
四角のオブジェクトが、containerであるならば、大きさが縦:10px 横:10px 増えたとしたら、
containerの左上の角のポジションを5px減らしてあげれば良いです。
つまり
container.x ="大きさが増えた分の半分減らす"
container.y ="大きさが増えた分の半分減らす"
です。
--追記--
creatjsは触ったことがないので、普通のjavascriptで、divを図形に見立てて例を書きますね。
creatjsも中身はjavascriptなので同じ考え方だと思います。
コメントにて、基準点が画面中央位置じゃない時を気にされていたので、起点 top:400px; left:200px; にしてあります。
わかりやすいように、動作をまとめず一つずつ書いてますので参考にしてください。
javascript
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <style> 6 7 </style> 8 <script> 9 function kakudai($width){ 10 var $target = document.getElementById('box'); 11 var orgWidth = $target.clientWidth;//元の幅 12 var orgHeight = $target.clientHeight;//元の高さ 13 var rect = $target.getBoundingClientRect();//元の座標取得（左上の角） 14 var orgTop = rect.top;//元座標 y 15 var orgLeft = rect.left;//元座標 x 16 17 18 var zoom = 1.1;//ボタンを押すたび1.1倍 19 var nextWidth = (orgWidth*zoom);//次のサイズは元の幅×zoom 20 var nextHeight = (orgHeight*zoom);//次のサイズは元の高さ×zoom 21 22 var diffWidth = (nextWidth)-orgWidth;//差を求めてdiffWidthに代入 23 var diffHeight = (nextHeight)-orgHeight;//差を求めてdiffHeightに代入 24 25 $target.style.width = nextWidth+'px';//幅を変更 26 $target.style.height = nextHeight+'px';//高さを変更 27 28 var nextTop = (orgTop-(diffWidth/2))+'px';//大きくなった分の半分を引く 29 var nextLeft = (orgLeft-(diffHeight/2))+'px';//大きくなった分の半分を引く 30 console.log(nextTop); 31 console.log(nextLeft); 32 //場所を新しい場所に移動 33 $target.style.position = 'absolute'; 34 $target.style.top = nextTop; 35 $target.style.left = nextLeft; 36 } 37 38 </script> 39</head> 40<body> 41 <input type="button" onclick="kakudai()" value="拡大"> 42 <div id="box" style="position:absolute;top:400px;left:200px;width:100px;height:100px;background-color:lightgray;"></div> 43</body> 44</html>
--追記--
この絵でわかっていただけると思うのですが、、。
投稿2018/11/24 07:59
編集2018/11/24 10:51総合スコア798
ありがとうございます！基準点が画面中央位置の場合はそれで行けました！
ただ、基準点が
例えば、x:76,y43 などの場合どういう計算式になりますでしょうか？
基準点がずれると、単純に半分ずらすだけではダメなようで、、、
同じですよ。増えた分の半分を元の起点からマイナスしてあげるです。
意図が伝わらず申し訳ありません・・・
画像を追加させていただいたのですが、拡大する軸となるxyがずれた場合に拡大するという感じで・・・
画像の配置起点はどこなんでしょうか？
拡大の起点ではなく、配置の起点からマイナスしてあげないとダメだと思うのですが？
はい。。すいません、最初からお伝えしてればよかったのですが、
最初は画面に対してx:0:y:0の位置なのですが、
ドラッグして画像を移動できまして、起点は変更できる状態にあります。。
配置の起点から（拡大した分の半分）と、（拡大起点のずれている分の半分）をマイナスしてみてください
ドラッグしても、配置起点（左上の角の座標）は取得できるんですよね？
はい！配置起点は基本的にマイナスになります！
現在、
var diff = before_width - after_width;
target.x = target.x -(diff / 2);
ですが、
こちらに（拡大した分の半分）と、（拡大起点のずれている分の半分）をマイナスするということですかね？？すいません、、（拡大起点のずれている分の半分）の計算式はどう求めるんでしたでしょうか・・・
配置の起点から（拡大した分の半分）と、（拡大起点のずれている分）をマイナス ですね
わかりやすく書きますと、拡大率１.0（そのまま）とした時を想像して絵を描きながら考えてください。
例えば
拡大起点が右に10pxずれているならば、左に10pxずらせばいいだけです。
先のコメントで
（拡大起点のずれている分の半分）は間違いでした、（拡大起点のずれている分）です。
拡大起点は図形の左上ではなく、画像の中央位置（つまり画像を半分にした数値）
って意味であってますかね！？
拡大起点が真ん中からずれていると書かれていますので、真ん中からずれた分として答えていますけど、、、。
本来のjavascriptなら拡大起点も左上の角だと思いますが、creatjsではどのように設定するのですか？
あ、すいません一緒です。。ただ、左上を0,0の状態だと
そのまま拡大すると左上を基準に拡大していってしまうので、
いったん、図形の軸を中央に移動してから拡大するイメージでした。。
では、拡大起点をずらした分も合わせてマイナスしてあげてください。
拡大起点のずらした分の計算方法は
target.x - target.width /2
であってますかね・・・・
質問の最初の問題点（要は図形の中央を軸に拡大したい）を実現するには、
拡大した分の半分を左上の角の座標から引いて描画してあげる。です。
拡大起点をずらした分は、半分にせず、そのまま引いてあげてください。
ほんとにすいませんん、、、
（拡大起点をずらした分）←これの算出方法がよく分かっておらず・・・・
target.x target.width が何を指しているのかは、質問にあげられているコトードだけでは判断つきません( > < ;
画像の中央を起点に拡大したいのではないのでしょうか？
はい！画面の中央です！
あ、じゃあ、画面の中央と図形の中央の差分が（拡大起点がずれている分）
であってますかね！！！？
もともとの拡大起点は左上の角になっているので、図形の中央を起点に拡大したい場合は、拡大したサイズの半分の長さを起点からマイナスしてあげる。です。
回答したコードを動かしてみて、コメントを読みながら順を追ってみてください。
ちょっとやってみます！！！ありがとうございました！！！
画面中央は考えなくていいと思います。画面の起点も左上の角です。
そうですね。ちょっと中央にとらわれてしまっていたかもしれません。
いったん、左上起点で考えてみます！
やっと、、、、できました。。。。
本当にありがとうございました！
あなたの回答
tips
プレビュー
