原点中心の拡大縮小平行移動を画面中央中心に変換する
画像のドラッグ結果をPaper.jsのキャンバスの平行移動に反映したい。
画像の拡大縮小は原点中心、キャンバスの拡大縮小は画面中央中心なので変換が必要。
画像原点の移動量をvとする。
画像原点が移動していたとしても、例えば画面中央に対してのズームの場合は、キャンバス上での移動はない。
というわけで、原点から画面中央へのベクトルをa、拡大率をs、拡大後のキャンバスのズーム率をzとすると
c ← c - ((s - 1)a + v) / z
tsnewCenter = currentCenter.subtract(
rect.center.multiply(s - 1).add(V2(imageLeft, imageTop))
.multiply(1.0 / newZoom));となる。
Related Pages
- →regroup×プロジェクトのタスク管理をscrapboxでやる×オフラインでも新規マップの作成が出来る×モバイル書き出しツール×共同編集ほんとに必要？×保存のテスト×pkakidashi×ptegaki×ノートテイク実験×図には3種類ある×考えるための図×自分の知的生産性向上×伝えるための図×共有するための図×まずは徹底して自分のニーズを満たさなければいけない×今選択してるスタイルが画面上で表示されているべき×regroup2020-01-27×regroupを使いたくなるシチュエーション×scrapboxからのインポート×scrapbox通りの見栄えを目指さない×画像付箋の原寸表示×スタイル変更uiの改善×投げ縄選択はゴーストにならない×フィードバック×パスの自動グループ化×pregroup2019×pregroup-done-2020×pRegroup-done-2019→
- →regroup×pRegroup-done-2019×2020_年、_react_軸で学ぶべき技術×typescript×react×webpack×visual_studio_code×styled-components×reactmodal×iPadはfocusを無視することがある×paper.js×パスドロー×パスの形がおかしい×付箋・パスの投げ縄選択×firestore×websocket×amazon_s3×netlify×apple_pencil×ipad上でのダイレクトタッチとpencilタッチの区別×二本指ジェスチャでズームと平行移動×redux×reactn×undoの実装×キャンバス汚染×キャンバス汚染解決編×cssで条件分岐と変数と計算を使う×100vhだと縦にはみ出す×メニューアイコンがiPhoneなどの狭い画面ではみ出す×ズームアウトした状態でペンで描くとガタガタになる×線の太さを一定にする×Paper.jsの更新後に呼ばれるコールバックをつける×バルーンメニュー×投げ縄選択→削除×付箋の自動フォントサイズ調整×gが下に突き出す×OKR問題×regroup2019→
- →pRegroup-done-2019×講演スライドの流し込まれたマップを作る×反響まとめをマップにする×ユースケースメモ:発表資料をゼロから作る×ユースケースメモ:パネルディスカッションの準備×ユースケースメモ:過去のスライドの整理×ユースケース:ボットとの会話ログの整理→
- →付箋・パスの投げ縄選択×選択されたもののグループ化×表札の表示×グループの子要素の位置を再帰的に更新×コネクタ×グループの中の付箋をドラッグで出し入れ・配置変更×表札の編集×バルーンメニュー×グループ化×regroup2018×付箋の圧縮展開×圧縮付箋の展開時どうなるべきか×既存グループの付箋追加削除ui×pRegroup-done-2019→
- →スライドpdfからのインポート×付箋の自動フォントサイズ調整×複数行テキストを個別の付箋としてインポート×良いアイコンにする×「編集」ではなく「再利用」×stateにamend×付箋編集モード中に他の付箋をドラッグした場合×新規付箋は他の付箋と重ならないように×gが下に突き出す×paper.js×pRegroup-done-2019→
- →付箋をたくさん出すと重い×今表示している画像の取得×画像化してズームする際にずれる問題の解決×ズーム完了時にPaperに反映する×なぜかツールバーにかぶる問題×pRegroup-done-2019→
- →pRegroup-done-2019×付箋の追加をPaper.js上で実装する×100枚付箋のiPad上での拡大縮小×hosting×二本指ジェスチャ時に一本指での描画が同時に発生する問題×ios上のchromeでデバッグ出力→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]