🤔原寸でスクリーンショットを作る

全体が見えるようにズームアウトしてスクリーンショットを撮ると小さい文字が見えない、拡大すると一画面に収まらない→ならば原寸でマップ全体のスクリーンショットを撮れる機能があれば良い

前回試した時は「既に描画に使われているキャンバスのサイズを後から変更」した

そして謎の描画ズレなどが起きた

そうではなく新しいキャンバスを作ってそこに描画して破棄すれば良い

そのためには描画対象のキャンバスを変える機能が欲しい

---

canvasを画像にするところは既にやってる

image.src = canvas.toDataURL();

スケールを1にして、コンテンツの範囲に合わせてcanvasを大きくしてからやれば良い

コンテンツの範囲の計算は未実装

キャンバスのサイズを変更して、再描画をし、それが完了するまで待ってから画像にする必要がある

キャンバスサイズの変更、期待したように動かない

縦に伸びたり、付箋と文字の位置がズレる不可解な壊れ方

https://gyazo.com/48d97dcd8b9b6762bb4bfa818b0bcdab

code:ts

test: () => {

// @ts-ignore

const b: paper.Bound = app.paper.project.activeLayer.getBounds();

console.log(b, b.width, b.height);

const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;

canvas.width = b.width;

canvas.height = b.height;

updatePaperZoomCenter(b.center, 1);

},

'feature/fullscreenshot'に入れて保留

？？

https://gyazo.com/1d55791f71522408e58acf9f44281efd

縦横比がおかしくなる問題は直った

オフセットがおかしい

これはまあわかる

付箋のテキストの位置とレクトの位置がズレる

これはなぜなのか不可解

実装したらURLでビューポートの指定がされてない時の処理にも使える

遅延させる必要がある

自動ダウンロードもできそう

code:js

link.href = canvas.toDataURL()

link.download = 'filename.png'

link.click()

IEとEdgeで動かない説があるが、まあいいや