我编写了一个 Angular 组件,用于创建和渲染(渲染一次)Pixi Canvas 。
这是组件(请原谅这个不好的名字,我对 Angular 还是新手):
import { Component, OnInit } from '@angular/core';
declare var PIXI: any;
declare var $: any;
@Component({
selector: 'pixi-component',
templateUrl: './pixi-component.component.html',
styleUrls: ['./pixi-component.component.css']
})
export class PixiComponentComponent implements OnInit {
constructor() { }
ngOnInit() {
this.generatePixiCanvas();
console.log("pixi component is created");
}
generatePixiCanvas() {
//Create the canvas and add it the DOM...
var renderer = PIXI.autoDetectRenderer(this.getParentDivWidth(), this.getParentDivHeight());
document.getElementById('pixi-canvas-container').appendChild(renderer.view);
renderer.autoResize = true;
//Create a container object called the `stage` and render it...
var stage = new PIXI.Container();
renderer.render(stage);
}
getParentDivHeight() {
return $('#pixi-canvas-container').height();
}
getParentDivWidth() {
return $('#pixi-canvas-container').width() + 1;
}
}
您可以看到该组件在 ngOnInit 函数中创建了 pixi Canvas ,但它使用设置的高度和宽度(从 stub 辅助函数返回)创建它。
我想做的有两个:
页面加载时,创建 pixi Canvas ,使其大小等于其父容器的大小。类似于CSS{height: 100%; width: 100%}
就可以了。- 调整窗口大小时,pixi Canvas 会随着网页的其余部分动态调整大小,就像 CSS 弹性框所做的那样。
我最初的想法是使用这两个 stub 函数 getParentDivHeight
和 getParentDivWidth
来处理第一个问题,但我无法找到 Angular-y 的方法这。我想我可以使用 JQuery?
对于第二个问题,我不确定如何让 Angular 组件监听窗口大小调整事件。
如何解决这个问题?
另外,这里是上述组件的 HTML 和 CSS 代码,以防有帮助:
<div id="pixi-canvas-container">
</div>
#pixi-canvas-container {
height: 100%;
width: 100%;
}
编辑:
经过一些研究,似乎观察窗口大小调整的自定义指令可以解决这个问题。我是否需要编写一个自定义指令来以某种方式调整 pixi Canvas 的大小?这样做的问题是,该指令需要在创建时(在运行时)附加到 pixi Canvas ,这对于 Angular 来说可能是不可能的。
编辑2:
好的,我已经使用 JQuery 解决了问题 1。我已经继续编辑了我的代码以反射(reflect)这一点。问题 2 仍然存在,因为 pixi Canvas 不响应页面大小调整或分辨率更改。
最佳答案
解决第一个问题的方法目前看来效果很好,所以我不会在这里解决这个问题。
解决问题二的最佳方法是为 Angular 的 window:resize
事件附加一个方法。此方法将重新计算 Canvas 父容器的大小,然后调整其大小 - 您可以使用 pixi 的内置 .resize()
方法。
这是您需要的代码:
adjustCanvasSize(){
this.renderer.resize(this.getParentDivWidth(), this.getParentDivHeight());
}
在 HTML 模板中:
<div (window:resize)="adjustCanvasSize()" id="pixi-canvas-container">
</div>
简单!
关于javascript - 如何在 Angular 组件中动态调整 PixiJS (HTML) Canvas 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40985957/