Paper.jsの更新後に呼ばれるコールバックをつける

Paper.jsの再描画は非同期に行われているっぽい

それ自体はよいこと？なのだが

PaperのZoomの値を設定

Imageを消す

Paperを表示

って処理をすると

Imageが消える

ズーム前のPaperが表示される

その後ズームされたPaperが表示される

ってなって見栄えが最悪。

Paperに再描画終了後に呼ばれるハンドラとかあるかな、Imageを消すのを遅らせたい。

setZoomはMatrixの変更を引き起こしてる

それが_changedを呼ぶ

これが画面全体を削除して再描画している

これがおそらく非同期に呼ばれるのだと思うがどこで呼ばれているのか

なので今僕が求めている「描画完了時にコールバックしてほしい」って点に関しては

ここにコールバックの呼び出しがあってほしいわけだが、現状ない。

→モンキーパッチを当てる

code: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;

}

とやっておいて

code:ts

window.app.callbackAfterCanvasViewUpdate = () => {

image.style.display = "none";

let canvas = document.getElementById("myCanvas") as HTMLElement;

canvas.style.display = "inline";

window.app.callbackAfterCanvasViewUpdate = null;

}

って感じ。