3

キャンバスに描画する必要のあるSVGテキストの行がたくさんあります。SVGオブジェクトをSVGデータURIに変換し、それを画像のソースに適用してから、その画像をキャンバスに描画していますが、何らかの理由で特定の幅と高さの後にテキストがクリッピングされています。

他の画像も最初にキャンバスに描画しているので（テキストよりもはるかに幅が広く、背が高い）、問題はキャンバスのサイズではないことを私は知っています。もう一つの奇妙なことは、私が画像を撮ってそれを体に追加すると、それが完全に出てくるということです。

var imageText = new Image();
imageText.src = "data:image/svg+xml;base64," + btoa($("#text_container").html());
imageText.onload = function() { context.drawImage(imageText, 0, 0); };

#text_containerは、すべてのSVGコードを保持する私のDIVです。

編集：詳細を説明するために、以下にコメントを書きました。ユーザーがカスタムサッカーを作成できるJSアプリケーションを構築しています。ボールとテキストのさまざまな色と機能を変更できるため、SVGテキストを含むいくつかのDIVに要約されます（テキストは円弧状のパスに沿っているため）。DIVの背景画像を取得し、それをキャンバスにうまく描画して、サッカーを作成できます。テキストがトリミングされているため、テキストをキャンバスに描画しようとすると問題が発生します。次に、そのキャンバス要素を取得して、ユーザーが保存できるようにPNGに変換します。

テキストを上下に移動して、トリミングがよく見えるようにしました。ご覧のとおり、ボールはうまく描画されます。 http://i.imgur.com/Sngu4.png

4

3 に答える 3

0

暗闇でのショット....drawImage()設定できるサイズ パラメータはありますか? おそらく、デフォルトのサイズで描画し、残りをクリッピングするというデフォルトがあります。ちょっとした考え...

また、画像が動的に作成されるため、drawImage()関数が探している.jpgなどに通常含まれる何らかの画像サイズパラメーターが欠落している可能性もあります。

于 2012-12-07T19:51:00.253 に答える
0

これがキャンバスの RenderingContext ("2D") であると仮定すると、 context.drawImage()関数contextに "destiny width" および "destiny height" パラメータを含める必要があります。

context.drawImage(image, dx, dy, dw, dh)

myCanvas がキャンバス オブジェクトの ID である場合 (および $ が jQuery の関数である場合)、次のように呼び出すことができます。

var dw = $('myCanvas').width();
var dh = $('myCanvas').height();
context.drawImage(image, 0, 0, dw, dh);

これにより、キャンバス全体に合わせて画像が拡大縮小されます。私のアドバイスは、最初に svg 画像が何であるかを「確認」することです (つまり、それを本文に追加し、上記のリンクでテキストがどの座標にあるかを測定します: sx、sy、sw、sh)。必要な場所に配置するために「意図的に」：

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
于 2012-12-08T03:53:03.273 に答える
0

これとまったく同じ問題がありましたが、解決策を見つけたと思います。

SVG 要素にawidthと aを設定するだけでは十分ではありません。heightどうやら、以下も設定する必要がありますviewBox。

<svg width="720" height="400" viewBox="0 0 720 400"></svg>

これにより、キャンバス上で画像が正しくレンダリングされます。:)

于 2016-04-29T23:46:48.180 に答える