2

完全なキャンバス (キャンバスの外に移動された要素を含む) を画像にキャプチャする方法を探しています。私は KineticJS ライブラリを使用しており、toDataURL機能を認識しています。問題は、画像がキャンバスの境界にクリップされていることです。

回避策として、キャンバス上のすべての要素を、すべての要素に収まる大きさの一時的な非表示のキャンバスにコピーしてから、toDataURL関数を使用することを考えました。よりクリーンなアプローチがあるかどうか疑問に思っていましたか？

4

2 に答える 2

2

興味深い問題です。一時的なキャンバスのアイデアが気に入っています。また、メイン キャンバスのサイズを変更し、オフセット変換をすべての子要素に適用し、画像をキャプチャしてから、逆変換してサイズを元に戻すこともできます。これは、非表示のキャンバスにコピーするよりも複雑ではありません。さらに、単一キャンバスのアプローチはメモリ効率が高くなります。

ちょうど私の 3 セント。

于 2013-01-17T20:24:40.600 に答える
0

私はアルビンに同意します。キャンバスのサイズを変更するだけです。方法は次のとおりです。

 stage.setWidth(window.innerWidth);  // inner width of your window
 stage.setHeight(window.innerHeight); // inner height of your window
 stage.draw();    //redraw

これにより、ウィンドウの幅と高さに合わせてステージのサイズが変更されますが、要素がウィンドウよりも遠くにある可能性は考慮されませんが、.set 関数内の数値を変更して、最も右/ 1つ残しました。

キャンバス内のすべての要素を別のステージにコピーする簡単な方法を探している場合は、それをシリアル化できます。

  var json = stage.toJSON();
  var newStage = Kinetic.Node.create(stageJson, 'newContainer');
于 2013-01-18T15:03:46.173 に答える