マウスポインタの位置を中心としたズーム
from pRegroup-done-2019
マウスポインタの位置を中心としたズーム
ズームは現状、画面中心を起点としているが、人間にとって自然なのはマウスポインタの位置を中心としたズーム
こんな感じ
tsexport function zoomAroundMousePointer(
initZoom: number, initCenter: paper.Point,
zoomCenter: paper.Point, scale: number,
) {
const v = initCenter.subtract(zoomCenter);
let newZoom = initZoom * scale;
let newCenter = initCenter.add(v.multiply((1 - scale) / scale));
return [newZoom, newCenter];
}Shift+ドラッグだけではなく、マウスホイールやMacBookでの二本指上下スワイプにも対応するため括り出した。
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]