Javascript 无法使用CreateJS预加载和显示SVG
我正在尝试预加载一组SVG对象，并使用CreateJS/PrelodJS显示它们。到目前为止，我能够在不预加载的情况下显示SVG对象，但只要使用PreloadJS中的LoadQueue，我就无法让我的示例正常工作 有人知道我做错了什么吗？谢谢 JavascriptJavascript 无法使用CreateJS预加载和显示SVG,javascript,createjs,preloadjs,Javascript,Createjs,Preloadjs,我正在尝试预加载一组SVG对象，并使用CreateJS/PrelodJS显示它们。到目前为止，我能够在不预加载的情况下显示SVG对象，但只要使用PreloadJS中的LoadQueue，我就无法让我的示例正常工作 有人知道我做错了什么吗？谢谢 Javascript var imageManifest = [ { id: "MySvgImage", src: "http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/check.svg" }
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();
}
<!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>
您的示例中存在一些问题，这些问题妨碍了资产的预加载，但不幸的是，如果这些问题得到解决，它仍然无法进入画布 开始预加载工作： 资产将需要托管在启用CORS的服务器上，以便进行跨域加载。PreloJS将使用XHR加载SVG，如果不做一些额外的工作，就无法跨域加载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.
drawImage在PreloadJS中添加基于图像的预加载可能是个好主意-我将在GitHub中添加一个问题。我找到了简单的解决方案。只需强制PreloadJS使用图像加载程序，而不是SVGLoader
{src:"img/bg.svg", id:"bg", type: createjs.LoadQueue.IMAGE}
var bg = new createjs.Bitmap(loader.getResult('bg'));
stage.addChild(bg);
你好，兰尼！谢谢你提供的所有细节！我试图建立一个人们可以用来测试的样本。如果SVG文件与Javascript代码托管在同一个站点上，它能让我的示例正常工作吗？不，您不能将SVG实例传递给位图——它似乎不适用于
drawImage