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

Unable to preload and display SVG with CreateJS

本文关键字：加载 显示 SVG CreateJS      更新时间：2023-09-26

我正在尝试预加载一组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>

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

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

然后你可以将其转换为

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

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

准备工作：资产将需要托管在启用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中添加一个问题。

相关文章：