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

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

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

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>

来源

2014-09-01 Martin

有与样品的几个问题，其中防止资产的预载，但不幸的是，如果这些被解决，它仍然不会画入画布。

获取预加载工作： 该资产需要托管在启用了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在传递字符串路径时在后台创建图像）

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

来源

2014-09-02 16:20:19 Lanny

你好兰尼！感谢您的所有细节！我试图建立一个人们可以用来测试的样本。如果SVG文件与Javascript代码位于同一站点，是否可以使我的示例正常工作？ – Martin 2014-09-02 20:11:13

不，您无法将SVG实例传递给位图 - 它似乎无法与“drawImage”一起使用。我认为它会，所以值得进一步研究。您可以预先加载SVG，以便在DOM中使用。 – Lanny 2014-09-02 22:16:57

我不使用CreateJS，但对预加载器感兴趣，所以四处张望。看到这个，只是想Id指出了一个工作.... http://jsfiddle.net/pphd9tmy/。要知道，如果你的图像是这样的图像然后图像标签在svg与外部链接不会工作，你需要使用dataURL嵌入图像（显然....还没有轮到尝试它，更好的血腥工作;）。这恰好是我寻找preloader的原因;） – PAEz 2014-10-17 12:12:55

我找到了简单的解决方案。只需强制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-15 19:53:30 Enthusiast

这工作就像一个魅力:) – HeberLZ 2016-09-27 16:16:34

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

回答

相关问题