2

キャンバスを PDF にエクスポートし、キャンバスに追加された要素のみをレンダリングしたいと考えています。例えば：

背景画像が設定されたこのキャンバスがあります。 http://i49.tinypic.com/n7lv.png

これは、PDF にレンダリングしたときの結果です (Bytescout ライブラリを使用) http://i50.tinypic.com/346ud7m.png

これは私がそれを次のようにしたい方法です: http://i50.tinypic.com/2q1s9hv.png

つまり、背景画像なしで、角が丸くならないようにしたいのです。キャンバスはファブリック フレームワークを使用して作成されます。私の考えは、背景画像を除くすべての要素をキャンバスに追加し、そこから PDF をレンダリングすることです。ガイドラインはありますか？それは行く方法ですか？

4

1 に答える 1

1

PDF に書きたくない部分を省略して、シーン全体を再描画するだけです。

再描画するすべてを追跡したくない場合は、2 番目のメモリ内キャンバスを作成し ( document.createElement('canvas'))、通常のキャンバスではなくそのキャンバスに対してすべての描画操作を行い、そのキャンバスを通常のキャンバスにユーザーとして描画します。通常のキャンバスに直接描画する代わりに編集します。

古い方法:

// First you round the corners permanently by making a clipping region:
ctx.roundedRect(etc)
ctx.clip();
//then a user draws something onto normal canvas, like an image
ctx.drawImage(myImage, 0, 0);

新しい方法:

// make a hidden canvas:
var hiddenCanvas = document.createElement('canvas');
var hCtx = hiddenCanvas.getContext('2d');
// First you round the corners permanently by making a clipping region:
ctx.roundedRect(etc)
ctx.clip();
//then a user draws something onto HIDDEN canvas, like an image
// This image never gets its corners cut
hCtx.drawImage(myImage, 0, 0);
// Then you draw the hidden canvas onto your normal one:
ctx.drawImage(hiddenCanvas, 0, 0);

印刷するときは、背景画像がなく、角が切り取られていない非表示のキャンバスを使用します。

于 2012-11-16T21:21:35.860 に答える