我遇到了angular&createjs-module的问题。
createjs-module正在工作,正如您在代码上看到的那样,形状方法和补间工作正常(我可以在浏览器上成功地将其可视化):
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");
}
}
您是否尝试在组件的构造函数中声明createJs
是窗口对象的对象?
我在使用Angular CLI的Angular 2项目上预装js时出现了一些问题,我发现在预加载过程中,一个名为_isCanceled的方法尝试使用window.createjs对象进行处理,因此,整个事件过程正在进行中总是停下来但在我的项目中,createjs对象未被声明为窗口的对象。所以,我试过这个:
constructor()
{
(<any>window).createjs = createjs;
this.queue = new createjs.LoadQueue();
}
使用现代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))