3

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>
Martin
  • 39,309
  • 62
  • 192
  • 278

2 Answers2

13

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);
Enthusiast
  • 694
  • 1
  • 7
  • 15
3

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.

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • Hello Lanny! Thank you for all those details! I was trying to build a sample that people could use to test. If the SVG file was hosted on the same site as the Javascript code, would it be able to get my sample to work? – Martin Sep 02 '14 at 20:11
  • No, You can not pass an SVG instance to Bitmap -- it doesn't seem to work with `drawImage`. I thought it would, so it is worth looking into further. You CAN preload SVG though for use in the DOM. – Lanny Sep 02 '14 at 22:16
  • I dont use CreateJS but am interested in a preloader and so looking around. Saw this and just thought Id point out a work around.... http://jsfiddle.net/pphd9tmy/ . Just be aware that if your painting an svg to an image like this then image tags in the svg with external links wont work, youll need to embed the image using dataURL (apparently....still havent got round to trying it, better bloody work;). Which just happens to be the reason Im looking for a preloader ;) – PAEz Oct 17 '14 at 12:12