Q&A
Canvasで表示したときの画像を生成する方法を書いてください。
前提・実現したいこと
Canvas毎のデータ(位置やサイズ、色の情報を持つクラスのリスト)を読込み、
図形をCanvasに表示するようなツールを検討しています。
複数のデータを持つときに、Canvasにまだ表示していない状態で、
Canvasで表示したときと同じ画像を生成する方法はありますでしょうか。
ご教示お願いいたします。
追記 ※過去の追記は一度削除させていただきました。
目的：スライド一覧(画像一覧)と編集スライド(エディタ)を表示させたい
編集スライドはItemsControl(Canvas)でModelのデータとバインドして表示することができました。
データが既に存在していて、まだ編集スライドとして開いていないものを画像化させるための方法が分からず、当初の質問に至りました。
すみません。まだ画像化させるところまでは実装できておりませんが、補足を追記しました。
よろしくお願いします。
そこまで出来てるなら、UserControlでもなんでもいいから配置して、
UserControlのインスタンスを作ってCanvasを取得すればいいのでは？
Xamlに配置せずに、、、と考えていましたが、
UserControlのインスタンスをコードビハインドで作って、
ItemsSourceを与えれば同じものがCanvasに作られるのですね。
MeasureとArrangeを実行すればCanvas内には表示されるのと
同じものが作られている認識であっていますか？
ちなみに、少し脱線してしまいますが、MVVMで考えた場合でも
本件のようなCanvasの表示を画像化させる実装は
コードビハインド(View)で行うこともでしょうか。
> UserControlのインスタンスをコードビハインドで作って
何故コードビハインド？
単純にUserControlのインスタンスをnewで作ったら中身が配置されませんか？
やったことないので想像ですが…
コードビハインドはコントロールに依存性プロパティを生やす時ぐらいしかつかいませんねぇ
> Canvasを表示せずに
> Canvasにまだ表示していない
は全然違いますよね。
Canvasを見せたくないだけなら、何かの背後に回すなりWindow範囲外にずらしたりでいいですが、
Canvasに入っていないものを描画（保存）するとなると、Canvasと同等のものを実装するってことでしょうか？
ならCanvasでいいんでは？と思ってしまいますが、大量にアイテムがあったり等何か問題が出ているのでしょうか。
題意に至ったまでのシナリオと言うか、本当の目的を書いてくれたらもっといい案が出てきそうですね。
言っちゃなんですが、「Canvasを表示せずにCanvas全体を画像として生成したい」ってだけで手段が根本的に間違っている印象を受けてしまいます。
TN8001さん、hihijijiさん
＞題意に至ったまでのシナリオと言うか、本当の目的を書いてくれたらもっといい案が出てきそうですね。
追記しました。再度確認いただけないでしょうか。
スライドが何なのかよくわからないけど、要するに大きい画像を一つとサムネイルを複数表示して、サムネイルは選択することで大きい画像として開くことができ、大きい画像は Canvas で実装し、ユーザーによる編集を受け付ける。質問はサムネイルをどういう形で保持すればいいのか。ということなんでしょうか？
そうだとしたら、Canvas をたくさん並べればいいだけでは？
スライド一覧が、いわゆるサムネイル表示の事なら、
サムネイル表示の為の縮小画像は本体を保存する時に一緒に作成するのがスマートです。
一々生成したらそこそこ重い処理のうえ数が多いので起動後暫く表示されません。
そんなの使い勝手が悪いでしょ？
＞Zuishinさん
回答ありがとうございます。
やりたいことは概ねおっしゃる通りです。
画像表示と固執しておりましたので、Canvasを並べることも一度試してみます。
性能的には、画像生成→表示とCanvasに表示することはそこまで大きく変わらないでしょうか。
Canvasは大量のデータを配置すると遅かったため、画像生成→表示する方法と考えていました。(実際に遅いかを試してはいませんが…。)
＞hihijijiさん
回答ありがとうございます。
おっしゃる通り、本体と同時に生成することが一般的な操作になると想定しています。
ただし、特定なケースで「サムネイルは作られていないが、本体のデータがある」という状況のケースを想像しておりました。
重ければキャッシュするのが常套手段なので、一度動くものを作ってからリファクタリングと思っていたんですが、すでに試していて重いのがわかっているなら、表示用のサムネイル画像を別に作ってキャッシュするのがいいと思います。
作るタイミングは、サムネイルとして表示される時でどうでしょうか。
プロパティの作り方で、はじめて get が呼ばれる時に初期化するという方法がありますが、それと同じ要領です。編集された時点でサムネイルを null にし、サムネイルプロパティが読みだされた時に null ならば画像を作ってフィールドに保存し、そうでなければフィールドを返すようにします。
「サムネイルは作られていないが、本体のデータがある」
その場合は固定画像じゃダメなの？
＞hihijijiさん
その場合の固定画像を作る方法が分からず、本体のデータ(スライドの背景色やCanvasに描かれる図形の情報)からCanvasと同じような見た目の固定画像を作る方法をご教示いただけないでしょうか。
固定画像ってのは本体によらず固定の画像って意味です。
作っている物はベクターグラフィックスのエディタですよね。
だとしたら編集物のロードにそれなりに時間がかかるはずです。
ユーザはその時間には仕事ができません。
一方、サムネイルは無くても仕事が出来るように設計すべき物なので、
あると便利ですが無くても仕事ができます。
ロード時間の短縮は顧客満足度に直結するので、ロード時には極力
処理を減らすべきです。
で、結局サムネイルなんですよね？
Canvas によるサムネイル化は可能で、それが重いので軽量化するためにビットマップ化したいと。つまり Canvas をビットマップ化する方法さえわかれば解決ということでいいですか？
https://qiita.com/tricogimmick/items/894914f6bbe224a45d49
Canvas を作らずにというのは、Canvas と同機能のものを自分で作らなければならないので、非現実的です。Canvas を作りましょう。この場合は View 層のライブラリ作成に当たるので、MVVM の出番はありません。ガリガリコードを書いてください。
それで実際にビットマップ化するコードを使うには、Behavior を作るなりコードビハインドを使うなり好きにすればいいと思いますが、それはまた別の話ですね。
hihijijiさん
＞ロード時間の短縮は顧客満足度に直結するので、ロード時には極力
処理を減らすべきです。
上記を念頭に置いて、初期動作(Load)時の仕様を検討してみます。
ありがとうございました。
Zuishinさん
＞Canvas を作らずにというのは、Canvas と同機能のものを自分で作らなければならないので、非現実的です。
Canvasを使用して、ViewにはCanvasそのものは表示せずに、生成したBitmapを表示するということですね。
一度実装してみることにします。
ありがとうございました。
あなたの回答
tips
プレビュー
