首页 > 编程语言> > javascript – 无法使用CreateJS预加载和显示SVG

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

2019-10-08 16:42:18 作者：互联网

我试图预加载一组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>

解决方法:

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

让预加载工作：
资产需要托管在启用了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添加一个问题.

标签：javascript,createjs,preloadjs
来源： https://codeday.me/bug/20191008/1872870.html