PreloadJS不適用於Angular（createjs-module）

我遇到了與角& createjs-module有關的問題。PreloadJS不適用於Angular（createjs-module）

的createjs模塊的工作，因爲你可以在代碼中看到的，形狀的方法和補間工作（我可以想像它在瀏覽器成功）：

https://www.npmjs.com/package/createjs-module

但是當我嘗試使用從createjs官方文檔，開始預加載和使用圖像，沒有任何反應：

http://createjs.com/docs/preloadjs/classes/LoadQueue.html

隊列不加載。我在可以工作的「ngOnInit」的末尾放置一個控制檯日誌，但沒有事件從「隊列」對象中分派。我在代碼中看不到任何錯誤，並且在控制檯上看不到任何錯誤/警告。

代碼：

 

import { Component, OnInit, ViewChild } from '@angular/core'; 
import * as createjs from 'createjs-module'; 

@Component({ 
    selector: 'app-mycomp', 
    templateUrl: './mycomp.component.html', 
    styleUrls: ['./mycomp.component.css'] 
}) 
export class MyClass implements OnInit { 

    public stage; 

    public queue; 

    public queueManifest = [ 
    {id:"header", src:"header.png"}, 
    {id:"body", src:"body.png"}, 
    {id:"footer", src:"footer.png"} 
    ]; 
    constructor() { } 

    ngOnInit() { 
    ///THIS CODE WORKS! 
    this.stage = new createjs.Stage("myCanvas"); 

    createjs.Ticker.setFPS(60); 
    createjs.Ticker.addEventListener("tick", this.stage); 

    var circle = new createjs.Shape(); 
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50); 
    circle.x = 10; 
    circle.y = 10; 
    this.stage.addChild(circle); 

    createjs.Tween.get(circle, { loop: true }) 
    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)) 
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ alpha: 0, y: 225 }, 100) 
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

    this.stage.update(); 

    ///THIS CODE DOES NOT WORK! 
    this.queue = new createjs.LoadQueue(); 
    this.queue.on("progress", this.queueProgress, this); 
    this.queue.on("complete", this.queueComplete, this); 
    this.queue.on("error", this.queueError, this); 
    this.queue.loadManifest(this.queueManifest); 

    ///THIS LINE IS ON CONSOLE! 
    console.log("queue START"); 
    } 
    ///NONE OF THIS IS DISPATCHING 
    public queueProgress() 
    { 
    console.log("queue progress"); 
    } 
    public queueError() 
    { 
    console.log("queue error"); 
    } 
    public queueComplete() 
    { 
    console.log("queue finished"); 
    } 
}

來源

2017-06-29 Icelafox

你試圖聲明createJs是在組件的構造函數的窗口對象的對象？

我遇到了一些問題，預緊JS在我的角2項目，角CLI和我弄清楚，在預壓的過程中一個名爲方法_isCanceled嘗試用window.createjs對象，因爲處理這，整個事件過程總是被停止。但在我的項目中，createjs對象沒有被聲明爲窗口的對象。所以，我想這一點：

constructor() 
{ 
    (<any>window).createjs = createjs; 
    this.queue = new createjs.LoadQueue(); 
}

來源

2017-08-20 02:21:40

隨着現代的JavaScript /打字稿，該preloadjs包也許不那麼重要的？

我已經成功地與Promise.then()

static 
loadImage(url: string): Promise<HTMLImageElement> { 
    return new Promise((res, rej) => { 
     const img: HTMLImageElement = new Image(); 
     img.onload=(evt => res(img)); 
     img.onerror=(() => rej("failed to load "+url)); 
     img.src = url; // start loading 
    }); 
} 
loadImage(url).then((img) => processImage(img))

來源

2018-01-02 03:56:59

PreloadJS不適用於Angular（createjs-module）

回答

相關問題