generated at
miyanokomiya

最近作っているもの
SVGベースのボーンアニメーション作成ソフト

これすごいmiyamonz

前回の成果
野望
切断面を再結合させていきたい(頓挫中)

作りかけなもの
生SVGで作るリッチアイコン集
動きが気持ち良いですね。特に鍵がかかった事がわかりやすくて良いshokai

停滞中なもの
前回から継続中のマインドマップサービス
GUI無関係の環境整備をやり遂げて力尽きる
gitlab -> github移植、依存パッケージアプデ、firebase関連アプデ、CI整備、デプロイ整備
課題
大量にノードがあるとスクロールが重くなってくる(特にモバイル)
ブラウザネイティブのスクロール、ズーム挙動からの劣化が激しい

今回の話題
無限平面でいい感じのスクロールを実現したい
無限平面実現方法
SVG平面が基準
SVG平面の一部を切り取る窓としてwindow平面(造語)を作る
SVG平面上における窓の始点 { x: number, y: number }
SVG平面とwindow平面の単位比率 scale: number
viewBoxを活用
html
<div class="svg-canvas-wrapper" :style="{ width: `${width}px`, height: `${height}px` }"> <svg :viewBox="`${x} ${y} ${width / scale} ${height / scale}`">

スクロールの挙動
ドラッグ追従型 -> 簡単
すっとぶ型
方法模索中
座標フラグタイマーのオンパレードでひたすらコードが汚くなる
トラックパッドの挙動が神すぎて再現できない
パフォーマンス改善案 keima
Vueのupdatedが発火しすぎてるのが一番影響大きそう
改善案
頻度が高いイベントはVueのstateを更新させずに直接viewboxを変更
debounce待ってからVueのstateを更新
これはSTUDIOでも使ってます!keima

そもそも無限平面である必要があったのか・・?
ブラウザネイティブのスクロールに任せるが正義かもしれない
ズームは?