Paper.jsの更新後に呼ばれるコールバックをつける
Paper.jsの再描画は非同期に行われているっぽい
それ自体はよいこと？なのだが
PaperのZoomの値を設定
Imageを消す
Paperを表示
って処理をすると
Imageが消える
ズーム前のPaperが表示される
その後ズームされたPaperが表示される
ってなって見栄えが最悪。
Paperに再描画終了後に呼ばれるハンドラとかあるかな、Imageを消すのを遅らせたい。
setZoomはMatrixの変更を引き起こしてる
それが_changedを呼ぶ
これが画面全体を削除して再描画している
これがおそらく非同期に呼ばれるのだと思うがどこで呼ばれているのか
ここでDomEvent.requestAnimationFrameしている
なので今僕が求めている「描画完了時にコールバックしてほしい」って点に関しては
ここにコールバックの呼び出しがあってほしいわけだが、現状ない。
→モンキーパッチを当てる
ts window.app.paper.project.view.__proto__.update = function() {
if (!this._needsUpdate)
return false;
var project = this._project,
ctx = this._context,
size = this._viewSize;
ctx.clearRect(0, 0, size.width + 1, size.height + 1);
if (project)
project.draw(ctx, this._matrix, this._pixelRatio);
this._needsUpdate = false;
if(window.app.callbackAfterCanvasViewUpdate){
window.app.callbackAfterCanvasViewUpdate();
}
return true;
}とやっておいて
ts window.app.callbackAfterCanvasViewUpdate = () => {
image.style.display = "none";
let canvas = document.getElementById("myCanvas") as HTMLElement;
canvas.style.display = "inline";
window.app.callbackAfterCanvasViewUpdate = null;
}って感じ。
Related Pages
- →regroup×プロジェクトのタスク管理をscrapboxでやる×オフラインでも新規マップの作成が出来る×モバイル書き出しツール×共同編集ほんとに必要？×保存のテスト×pkakidashi×ptegaki×ノートテイク実験×図には3種類ある×考えるための図×自分の知的生産性向上×伝えるための図×共有するための図×まずは徹底して自分のニーズを満たさなければいけない×今選択してるスタイルが画面上で表示されているべき×regroup2020-01-27×regroupを使いたくなるシチュエーション×scrapboxからのインポート×scrapbox通りの見栄えを目指さない×画像付箋の原寸表示×スタイル変更uiの改善×投げ縄選択はゴーストにならない×フィードバック×パスの自動グループ化×pregroup2019×pregroup-done-2020×pRegroup-done-2019→
- →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]