建站
咨詢
售后
建站咨詢
新聞中心
簡單入門 pixi.js。
公司主營業(yè)務：成都網(wǎng)站設計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出烏蘇免費做網(wǎng)站回饋大家。
pixi.js 是一個快速、靈活的 2D WebGL 渲染引擎。
該庫基于 Canvas 封裝，默認優(yōu)先使用 WebGL 進行二維圖形繪制，充分利用 GPU 硬件加速能力。如果不支持，會回退到 2D 模式，因為 2D 模式是上層的抽象，所以性能會差一些。
開始
首先創(chuàng)建一個 Application 實例。
我們使用 PIXI.Application 類創(chuàng)建一個新 PixiJS 應用。
import * as PIXI from "pixi.js";
const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);
// 繪制內(nèi)容
// ...
該類可以傳入配置對象，比如畫布寬高（width / height）、背景色（backgroudColor，默認為黑色）、掛載的 canvas 元素（view，不提供 PixiJS 會創(chuàng)建一個）等。
app.view 可以得到 PixiJS 應用掛載的 Canvas 元素。
繪制圖形
繪制圖形需要先創(chuàng)建 Graphics 實例，然后調(diào)用其下的方法。
一個 Graphics 代表一個圖形，當然也可以在單個 Graphics 繪制多個圖形。
繪制紅色矩形：
const rect = new PIXI.Graphics();
rect.beginFill(0xff0044); // 填充色
rect.lineStyle({ width: 2, color: 0x0000ff }); // 描邊
rect.drawRect(10, 10, 100, 50);
rect.endFill();
app.stage.addChild(rect);
app.stage 是圖形渲染的根節(jié)點，我們創(chuàng)建的 graphics 需要添加到 stage 下，這樣才會被渲染出來。
繪制圓形：
const circle = new PIXI.Graphics();
circle.beginFill(0x00ff00);
circle.drawCircle(200, 10, 50);
circle.endFill();
app.stage.addChild(circle);
繪制精靈：
const bunny = PIXI.Sprite.from('examples/assets/bunny.png');
bunny.anchor.set(0.5); // 設置精靈圖中心點
bunny.x = app.screen.width / 2; // 將精靈圖繪制在畫布正中央
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);繪制曲線不支持 SVG 的那種方便的 指令字符串 寫法：
// 不支持
const trackPath = new Path2D("M10 10 h 80 v 80 h -80 Z");
只能用類似原生 Canvas 寫法那樣，一步步繪制了。個人覺得很繁瑣，指令字符串言簡意賅多好的抽象。
const path = new PIXI.Graphics();
path.lineStyle({ width: 1, color: 0x0000ff });
path.moveTo(10, 10);
path.lineTo(20, 100);
path.bezierCurveTo(40, 120, 60, 120, 80, 100)
app.stage.addChild(path);
容器 Container
使用容器，可以將多個圖形進行組合，然后在其上添加位移、旋轉等屬性，其下的圖形會得到這些效果。
Container 不繪制圖形，它組合圖形，類似 SVG 的 group 元素。
const container = new PIXI.Container();
container.x = 80;
container.y = 80;
container.addChild(rect, circle);
app.stage.addChild(container);
結尾
一些基本的用法。
分享標題：一篇帶給你Pixi.js 入門 （一）：繪制圖形
本文網(wǎng)址：http://www.dlmjj.cn/article/coejdhh.html
