Unable to preload and display SVG with CreateJS

问题

I am trying to preload a set of SVG objects and display them using CreateJS/PreloadJS. So far I was able to display a SVG object without preloading, but as soon as I use the LoadQueue from PreloadJS, I can't get my sample to work.

Does somebody know what I am doing wrong here? Thanks!

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>

回答1:

There are a few issues with your sample, which prevent the preloading of the asset, but unfortunately if those are addressed, it still will not draw into the Canvas.

Getting Preloading to work: The asset will need to be hosted on a server with CORS enabled to do cross-domain loading. PreloadJS will use XHR to load SVG, which can not load cross-domain without some extra work. The updated sample below shows that in action.

// 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/

Once preloaded, the asset can be appended to the DOM, but not used as a source for an EaselJS Bitmap. It appears that Canvas can not use drawImage with a local SVG source. It CAN be appended to the DOM thought.

The reason your second approach did work was that it was automatically treating the source of the Bitmap as an image path, so it loaded it as an image (Bitmap creates an image behind the scenes when it is passed a string path)

It is probably a good idea to add image-based preloading to PreloadJS - I will add an issue to the GitHub.

回答2:

I found simple solution. Just force PreloadJS to use image loader, not SVGLoader.

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

Then you can convert it

var bg = new createjs.Bitmap(loader.getResult('bg'));  
stage.addChild(bg);

来源：https://stackoverflow.com/questions/25608721/unable-to-preload-and-display-svg-with-createjs

标签

javascript

createjs

preloadjs