iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 15

[PixiJS - Day-15] PIXI 的 resize

很多時候 PixiJS 需要 resize,使用方式相當簡單

window.onresize = function (event){
  var w = window.innerWidth;
  var h = window.innerHeight;

  app.renderer.resize(w,h);
};

由於 PixiJS 的座標預設左上是 (0, 0);

所以在 window.onresize 時,放在 (0, 0) 的物件不會改變看起來的位置
alt

alt


由於所有可視物件都是放在 app.stage 裡,而 app.stage 本身是一個 PIXI.Container

如果是以畫面中心為延伸與縮放的情形時,可以直接將 app.stage 放在 renderer 一半寬高的位置
在 window.resize 時,就會是從畫面中間延伸了

需注意的是,物件本身的中心點也要設定在物件中心,非預設的左上角

window.onresize = function (event){
  var w = window.innerWidth;
  var h = window.innerHeight;

  app.renderer.resize(w,h);

  // 將畫面的正中間放在 app.renderer 一半寬高的位置
  app.stage.x = app.renderer.width * 0.5; 
  app.stage.y = app.renderer.height * 0.5;
};

alt

alt

適合情形:萬花筒效果
alt


不同情境下,也不一定都需要調整 app.stage 的座標

alt
以這類型的使用情境來說,
我會維持 app.stage 的 (0, 0) 在左上角
演算的程式就直接以 app.renderer 的寬與高來撰寫即可

由於 app.stage 也可以設定 scale 與 rotation 等,可視情況調整


上一篇
[PixiJS - Day-14] PIXI 與使用者互動
下一篇
[PixiJS - Day-16] 使用 dat.GUI 工具除錯
系列文
PixiJS,方便好用的 WebGL 內容產生工具31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言