Question

我正在尝试预加载一组SVG对象并使用CreateJS / PreloadJS显示它们。到目前为止，我能够在没有预加载的情况下显示SVG对象，但是一旦我使用PreloadJS的LoadQueue，我就无法使我的样本工作。

有人知道我在做错了什么吗？谢谢！

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

Answer 1

我找到了简单的解决方案。只需强制PreloadJS使用图像加载器，而不是SVGLoader。

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

然后你可以转换它

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

Answer 2

您的示例存在一些问题，这会阻止资产的预加载，但不幸的是，如果这些问题得到解决，它仍然不会进入画布。

让预加载工作： 资产需要托管在启用了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可以不使用drawImage本地SVG源。它可以附加到DOM思想中。

你的第二种方法起作用的原因是它自动将Bitmap的源处理为图像路径，因此它将其作为图像加载（Bitmap在传递字符串路径时在幕后创建图像）< / p>

向PreloadJS添加基于图像的预加载可能是个好主意 - 我将向GitHub添加一个问题。

无法使用CreateJS预加载和显示SVG

2 个答案: