建站
咨詢
售后
建站咨詢
新聞中心
簡單入門 pixi.js。
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出烏蘇免費(fèi)做網(wǎng)站回饋大家。
pixi.js 是一個(gè)快速、靈活的 2D WebGL 渲染引擎。
該庫基于 Canvas 封裝，默認(rèn)優(yōu)先使用 WebGL 進(jìn)行二維圖形繪制，充分利用 GPU 硬件加速能力。如果不支持，會回退到 2D 模式，因?yàn)?2D 模式是上層的抽象，所以性能會差一些。
開始
首先創(chuàng)建一個(gè) Application 實(shí)例。
我們使用 PIXI.Application 類創(chuàng)建一個(gè)新 PixiJS 應(yīng)用。
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，默認(rèn)為黑色）、掛載的 canvas 元素（view，不提供 PixiJS 會創(chuàng)建一個(gè)）等。
app.view 可以得到 PixiJS 應(yīng)用掛載的 Canvas 元素。
繪制圖形
繪制圖形需要先創(chuàng)建 Graphics 實(shí)例，然后調(diào)用其下的方法。
一個(gè) Graphics 代表一個(gè)圖形，當(dāng)然也可以在單個(gè) Graphics 繪制多個(gè)圖形。
繪制紅色矩形：
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é)點(diǎn)，我們創(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); // 設(shè)置精靈圖中心點(diǎn)
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 寫法那樣，一步步繪制了。個(gè)人覺得很繁瑣，指令字符串言簡意賅多好的抽象。
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
使用容器，可以將多個(gè)圖形進(jìn)行組合，然后在其上添加位移、旋轉(zhuǎn)等屬性，其下的圖形會得到這些效果。
Container 不繪制圖形，它組合圖形，類似 SVG 的 group 元素。
const container = new PIXI.Container();
container.x = 80;
container.y = 80;
container.addChild(rect, circle);
app.stage.addChild(container);
結(jié)尾
一些基本的用法。
文章題目：一篇帶給你Pixi.js 入門 （一）：繪制圖形
地址分享：http://m.5511xx.com/article/coejdhh.html
