iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0

建立 canvas

今天開始我們一步步來看怎麼使用 PixiJS 吧!

在開始之前,要先提醒各位需要先運行 webserver ,否則將會遇到一些奇怪的問題喔!

最基本的 canvas 畫布是肯定需要的,Pixi 提供了 PIXI.Application 建構式方便我們建立。

let app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});

document.body.appendChild(app.view);

PIXI.Application 在被建立同時也會自動建立 renderer, ticker 和 root container。

  • renderer - 優先使用 WebGL 渲染如果不允許則用 Canvas 渲染
  • ticker - 渲染的更新頻率
  • stage - PIXI 容器物件,是所有可見物件的根容器

PIXI.Application 會取決於瀏覽器支援程度選擇使用 WebGL 或 Canvas 渲染圖片。

如果想要確認是用 WebGL 還是 Canvas 模式的話,最快速的方式就是打開 console 觀看。

當然也能用程式來判斷:

console.log(PIXI.utils.isWebGLSupported()); // 回傳目前頁面是否支援 WebGL;
console.log(app.renderer.type); // 回傳目前 PixiJS app 的renderer 模式:
                                 // PIXI.RENDERER_TYPE,值為 0、1、2
console.log(PIXI.RENDERER_TYPE); // {UNKNOWN: 0, WEBGL: 1, CANVAS: 2}

PIXI.Application 物件可以傳入 options 物件的引數來設定寬、高、背景顏色等等。
想全部了解可以看 官方文件

背景顏色要注意到只能使用「十六進制顏色」,是 0x000000 ~ 0xffffff 數字。

在創立完後透過 document.body.appendChild 添加到 HTML body 後就可以看到說,
一張 canvas 就這樣被輕鬆建立出來了(我覺得這是在廢話...)。

接著,我們來嘗試添加圖片到 canvas 中。

添加圖片

要能讓圖片顯示在 Pixi 的 canvas 中必須把圖片添加進 PIXI 的stage 物件中。
可以這樣使用:

app.stage

在把圖片放進 stage 前,需要先把圖片轉成 Sprite 的特殊圖片物件。

我們能利用程式控制 Sprite 的大小及位置,可以透過下列三種方式建立 Sprite

  1. 單一圖片
  2. Sprite 圖片
    這種類型的圖片稱作 Sprite 圖片

    圖片來源 : How to build a simple sprite animation in JavaScript
  3. texture atlas - 經由 JSON 定義大小和位置的 Sprite 圖片

這邊我們先用單一圖片來簡單講解

let app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
let imageURL = "./image/bunny.png";
let bunny = PIXI.Sprite.fromImage(imageURL);

document.body.appendChild(app.view);
app.stage.addChild(bunny);

我們先用 PIXI.Sprite.fromImage 把圖片轉成 Sprite 物件後,再經由 app.stage.addChild 將圖片顯示在 canvas 上。

原始圖有點小,就擷取一小部分顯示了。

這邊要注意到的是,如果圖片來源使用外部來源像是 imgur 或其他網址的話,會遇到 CORS 跨域問題。

由於本篇是在講解如何使用 PixiJS ,在之後的範例都會採引入本機圖片的方式,對 CORS 有興趣的各位可以看這篇文章的講解喔!
前端菜焦阿日記 |D10| Web Server - 跨域請求

那麼今天就先到這邊,一樣如果有錯誤及來源未附上歡迎留言指正,我們明天見!

參考資料:
Pixi Basics example
Pixi 教程
PixiJS - Day-07 stage、PIXI.Container 與父子結構
Pixi.js 中文教學


上一篇
學JS的心路歷程 Day26 - PixiJS - 入坑
下一篇
學JS的心路歷程 Day28 - PixiJS - 基礎(二)
系列文
學JS的心路歷程30

尚未有邦友留言

立即登入留言