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

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

{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 似乎无法drawImage与本地 SVG 源一起使用。它可以附加到 DOM 思想中。

您的第二种方法确实有效的原因是它自动将位图的源视为图像路径，因此将其加载为图像（位图在传递字符串路径时会在幕后创建图像）

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

于 2014-09-02T16:20:19.860 回答