6

コアの問題:

目標は、SVG の一部を Web ページ上の固定サイズの Canvas 要素にレンダリングすることです。

私の試みた解決策：

CanVGが Canvas で SVG 画像をレンダリングする最も簡単な方法であるように見えるので、CanVGのレンダリングの前にviewBox属性を利用して画像をトリミングできると考えました。この点、ずっと悩んできました。

質問：

SVG 画像が提供された場合、その画像の一部を Canvas 要素にレンダリングするにはどうすればよいでしょうか?

4

2 に答える 2

3

  1. オフスクリーン キャンバスを作成し、CanVGを使用してレンダリングします。

    var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full, '<svg>…&lt;/svg>');

  2. 次を使用して、この canvas-as-image の一部を別のキャンバスの領域にコピーしdrawImageます (パラメーターの詳細についてはリンクを参照)。

    var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,80,60);

編集: ただし、SVG ソースに (JS で直接または XMLHTTP 要求を介して) アクセスでき、viewBoxレンダリング前に属性を変更できる場合、上記は必要ありません。あるキャンバスに直接レンダリングされた SVG ファイルを示すこのデモを参照してから、viewBox属性を変更し、クリップされた領域を別のキャンバスにレンダリングします。

于 2012-04-05T02:45:32.730 に答える
1

あなたが得る問題はどれですか？context.drawImage 関数には、優れたトリミング機能が組み込まれています。標準の 3 つのパラメーター (画像オブジェクト、x 位置、y 位置) の代わりに、9 つのパラメーターを渡すだけで、画像がトリミングされます。パラメータは次のとおりです。

context.drawImage(
imageObject,
original image x crop position,
original image y crop position,
original image crop width,
original image crop height,
canvas image x crop position,
canvas image y crop position,
canvas image crop width,
canvas image crop height
)

これが CanVG で機能するかどうかはわかりませんが、画像オブジェクトを関数 drawImage() に渡すことができる限り、コードに記載されているようにトリミングできます。

于 2012-04-05T02:07:41.150 に答える