3

SVG オブジェクトのセットをプリロードし、CreateJS/PreloadJS を使用して表示しようとしています。これまでのところ、プリロードなしで SVG オブジェクトを表示できましたが、PreloadJS から LoadQueue を使用するとすぐに、サンプルを動作させることができません。

誰かが私がここで間違っていることを知っていますか? ありがとう！

http://jsfiddle.net/trudeo/05eqqp49/

Javascript

var imageManifest = [
  { id: "MySvgImage", src: "http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" }
];

var stage = new createjs.Stage(document.getElementById('gameCanvas'));

var assetQueue = new createjs.LoadQueue(true);
assetQueue.loadManifest(imageManifest);
assetQueue.on('complete', complete);

function complete(e) {   
    // DOESN'T WORK
    var svgImage = new createjs.Bitmap(assetQueue.getResult('MySvgImage'));    
    stage.addChild(svgImage);

    // WORKS
    var svgImage2 = new createjs.Bitmap("http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/circles1.svg");
    stage.addChild(svgImage2);

    stage.update();    
    createjs.Ticker.setFPS(40);
    createjs.Ticker.addListener(tick);
}

function tick() {
    stage.update();
}

HTML

<!DOCTYPE html>

<html lang="en">
<head>
    <script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
    <script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="800"></canvas>
</body>
</html>
4

2 に答える 2

13

簡単な解決策を見つけました。SVGLoader ではなく、PreloadJS がイメージ ローダーを使用するように強制するだけです。

{src:"img/bg.svg", id:"bg", type: createjs.LoadQueue.IMAGE}

その後、変換できます

var bg = new createjs.Bitmap(loader.getResult('bg'));  
stage.addChild(bg);
于 2016-05-15T19:53:30.567 に答える
3

サンプルにはアセットのプリロードを妨げるいくつかの問題がありますが、残念ながらそれらが解決されたとしても、キャンバスに描画されません。

プリロードを機能させる: アセットは、クロスドメインのロードを行うために、CORS が有効になっているサーバーでホストされる必要があります。PreloadJS は XHR を使用して SVG をロードしますが、追加の作業なしではクロスドメインをロードできません。以下の更新されたサンプルは、実際の動作を示しています。

// Note: Requires very latest PreloadJS (NEXT in GitHub)
var assetQueue = new createjs.LoadQueue(true, null, true);
// 3rd parameter is "crossOrigin", and requires a CORS server.

http://jsfiddle.net/lannymcnie/hhd4fwks/

プリロードされたアセットは DOM に追加できますが、EaselJS ビットマップのソースとしては使用できません。Canvas はローカルの SVG ソースでは使用できないようです。drawImageDOM の考えに追加できます。

2番目のアプローチが機能した理由は、ビットマップのソースを画像パスとして自動的に扱っていたため、画像としてロードしたためです(ビットマップは、文字列パスが渡されると舞台裏で画像を作成します)

画像ベースのプリロードを PreloadJS に追加することはおそらく良い考えです。GitHub に問題を追加します。

于 2014-09-02T16:20:19.860 に答える