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

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

Знает ли кто-нибудь, что я делаю неправильно здесь? Благодаря!

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 Bitmap. Похоже, что Canvas может не использовать drawImage с локальным источником SVG. Он может быть добавлен к мысли DOM.

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

Возможно, это хорошая идея добавить предварительную загрузку изображений на PreloadJS - я добавлю проблему в GitHub.

источник

2014-09-02 16:20:19 Lanny

Здравствуйте Лэнни! Спасибо за все эти подробности! Я пытался создать образец, который люди могли бы использовать для тестирования. Если SVG-файл был размещен на том же сайте, что и код Javascript, сможет ли он получить мой образец? – Martin

Нет, вы не можете передать экземпляр SVG в Bitmap - он не работает с 'drawImage'. Я думал, что так будет, так что стоит посмотреть дальше. Вы можете предварительно загрузить SVG, но для использования в DOM. – Lanny

Я не использую CreateJS, но меня интересует прелоадер и так оглядывается. Видел это и просто думал, что Id указывает на работу ... http://jsfiddle.net/pphd9tmy/. Просто имейте в виду, что если ваша картина svg для изображения, подобного этому, тогда теги изображений в svg с внешними ссылками не будут работать, вам нужно встроить изображение с помощью dataURL (по-видимому .... все еще havent обернулся, чтобы попробовать, лучше кровавый Работа;). Который как раз и является причиной того, что я ищу предварительный загрузчик;) – PAEz

Я нашел простое решение. Просто вынудите 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

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

ответ

Смежные вопросы