Невозможно предварительно загрузить и отобразить SVG с помощью CreateJS

Я пытаюсь предварительно загрузить набор объектов SVG и отобразить их с помощью CreateJS/PreloadJS. До сих пор мне удавалось отображать объект SVG без предварительной загрузки, но как только я использую LoadQueue из PreloadJS, я не могу заставить свой образец работать.

Кто-нибудь знает, что я здесь делаю не так? Спасибо!

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>
Источник

2 ответа

Решение

В вашем образце есть несколько проблем, которые препятствуют предварительной загрузке актива, но, к сожалению, если они будут устранены, он все равно не попадет в 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.

Причина, по которой ваш второй подход сработал, заключалась в том, что он автоматически рассматривал источник растрового изображения как путь к изображению, поэтому он загружал его как изображение (растровое изображение создает закулисное изображение, когда передается строковый путь)

Вероятно, хорошей идеей будет добавить предварительную загрузку на основе изображений в 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);
Источник
Другие вопросы по тегам