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）

回答

相关问题