5

SVG アニメーションを作成したいのですが、Canvas にレンダリングします。CanVGについては知っていますが、必要なことを行うかどうかはわかりません.「ネイティブ」SVGウィンドウではなく、キャンバスdiv内でjavascriptを使用してアニメーション化されたSVG要素を表示します。CanVG のサンプル コードを見ると、同じファイルの一部である SVG コードを利用するのではなく、JavaScript によってリアルタイムで操作されている SVG ファイルを指しているようです。何か助けはありますか？

4

2 に答える 2

5

I faced this issue me too some time ago and tried every possibilities mentioned above, unfortunately without results. After some research I found a method to inject SVG into Canvas, with a little pain and extra work it's possible. So the solution is to define svg elements then push it to an array then render that SVG as an image.

Here is a short code snippet:

SVG part: 

var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'>" +
        "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml' style='font: bold 160px Myriad Pro, Arial, Helvetica, Arial, sans-serif'>" +
                "<span style='color:rgb(32,124,202); opacity: 0.8; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 2px'>" + letters[pos] + "</span>" +
             "</div>" +
            "</foreignObject>" +
    "</svg>";
characters.push(data);

and JS part:

var letters = [...] // a pool of characters 
var images = new Array(letters.length);

for (var i=0; i< letters.length; i++) {
    var textPosition = WIDTH/2 - (letters.length * CHAR_DISTANCE)/2;
    var txt = new Text(letters[i], textPosition + (i*CHAR_DISTANCE), HEIGHT/2,
    (Math.random() * 3) + 5 , (-Math.random() * 10) + 5);
    images[i] = new Image();
    images[i].src = characters[i];
    textArray.push(txt);
}

You may check the whole source code here: https://esimov.com/experiments/javascript/404/

于 2012-09-08T05:18:19.580 に答える
2

SVG を Canvas 描画コマンドに変換するだけのライブラリ (CanVG など) がいくつかあります。アニメーションではあまり役に立ちません。

アニメーションの場合は、自分で行う必要があります。CanVG を使用して、アニメーション化されているキャンバスに SVG を描画し、タイマーを使用してキャンバスを更新しようとすることもできますが、これは非常に厄介であり、ブラウザーも SVG をサポートしていない限り実行できません (サポートしている場合、なぜやりたい？）

SVG をリアルタイムで操作したい場合は、適切な SVG に固執する必要があります。それ以外の場合は、キャンバス上で独自の状態と対話性をすべてロールする必要があります。ショートカットはありません[1]、申し訳ありません。

[1] そうですね、fabric.js など、SVG オブジェクトをオブジェクトとして使用できるキャンバス オブジェクト インタラクション用のライブラリがいくつかあります。しかし、あなたが望むものによっては、これでは不十分かもしれません。

于 2012-09-08T03:43:08.773 に答える