PixiJS學習之常見圖形的繪制詳解
pixijs 是一個強大的 Web Canvas 2D 庫，以其強大性能而著稱。其底層使用了 WebGL 實現(xiàn)了硬件加速，當然如果不支持的話，也能回退為 Canvas。
本文使用的 pixijs 版本為 7.1.2。
Application
Application 代表一個 pixijs 應用，對應一個 Canvas。
創(chuàng)建一個 Application 實例：
const app = new PIXI.Application({ width: 640, height: 360 });
支持的構造參數(shù)很多，這里列舉一些常用選項：
- width / height：設置 Canvas 的寬高；
- background：背景色，可以是數(shù)字或字符串，默認為
0x000000，即黑色； - view：指定要應用的 Cavans 元素，可以不提供，pixijs 會給你創(chuàng)建一個新的，你將它添加到 body 元素下就好；
- resizeTo：跟隨某個容器元素的尺寸變化進行自適應，比如 window。設置后 width / height 配置項目失效；
更多高階配置看 官方 API 文檔。
這里我沒有提供 view，所以我們要將 pixijs 給我們生成的 Canvas 元素掛到頁面上：
document.body.appendChild(app.view);
下面我們開始繪制圖形。
Graphics
Graphics 類常用于繪制一些比較基礎的圖形，比如矩形、圓形、線段等。除了繪制圖形，還可以用它來設置遮罩（mask）或點擊區(qū)域（hitArea）。
在一個 Graphics 下，不只是只能畫一個圖形，也可以畫多個圖形。
繪制矩形
繪制紅色填充色的矩形。
const rect = new PIXI.Graphics(); rect.beginFill(0xFF0044); // 設置填充色 rect.lineStyle(5, 0xFFFFFF); // 設置描邊線寬和顏色 rect.drawRect(100, 100, 200, 100); // 參數(shù)分別為 x, y, width, height // 添加到 stage 下 app.stage.addChild(rect);
app.stage 是放置圖形的地方，也就是 “舞臺”。這里我們要通過 addChild 將創(chuàng)建的圖形加入進去，之后 pixijs 的渲染器會讀取到這個圖形進行繪制。
drawRect 是一種舊的寫法，看起來是直接在畫布上繪制矩形，但其實底層是創(chuàng)建一個 Rect 對象添加到圖形樹上，先不繪制，然后在圖形樹準備好之后的渲染階段，再讀取該對象的數(shù)據(jù)并且繪制。這和 CanvasRenderingContext2D.fillRect 屬于不同的繪制機制，后者不會維護圖形樹狀態(tài)。
Graphics 本質并不是繪制工具，而是構建樹的工具，繪制的實現(xiàn)在其他地方。
另一種寫法，首先創(chuàng)建 PIXI.Rectangle 實例，這個實例只是描述一個矩形的屬性，本身并不能直接添加到 stage 上，需要通過 Graphics 的 drawShape 添加到 Graphics 上。
const rect = new PIXI.Graphics(); rect.beginFill(0xFF0044); // 設置填充色 rect.lineStyle(5, 0xFFFFFF); // 設置描邊線寬和顏色 const s = new PIXI.Rectangle(100, 100, 200, 100); rect.drawShape(s); // 記得添加到 stage 下 app.stage.addChild(rect);
繪制圓形
繪制圓形同理：
const circle = new PIXI.Graphics(); circle.beginFill(0x00FF44); circle.lineStyle(5, 0xFFFFFF); // 參數(shù)：cx（中點）, cy, radius circle.drawCircle(100, 100, 50); app.stage.addChild(circle);
效果：
有種嚴重的鋸齒感，這是因為 pixijs 默認是不開抗鋸齒的，因為抗鋸齒處理要消耗額外的性能。
可以開啟全局的抗鋸齒能力：
const app = new PIXI.Application({ antialias: true, /* 其他配置項 */ });
開啟抗鋸齒后的圓形，肉眼可見地圓潤了：
繪制圓角矩形
代碼：
const roundedRect = new PIXI.Graphics(); roundedRect.beginFill(0xff0044); roundedRect.lineStyle(5, 0xffffff); // 參數(shù)為：x, y, width, height, radius roundedRect.drawRoundedRect(100, 100, 200, 100, 16); // 添加到 stage 下 app.stage.addChild(roundedRect);
效果：
繪制橢圓
代碼：
const ellipse = new PIXI.Graphics(); ellipse.beginFill(0xff0044); ellipse.lineStyle(5, 0xffffff); // 參數(shù)：cx, cy, width, height ellipse.drawEllipse(100, 100, 80, 40); // 添加到 stage 下 app.stage.addChild(ellipse);
效果：
繪制線條
代碼：
const line = new PIXI.Graphics(); line.lineStyle(5, 0xffffff); line.moveTo(100, 100); line.lineTo(300, 250); // 添加到 stage 下 app.stage.addChild(line);
效果：
繪制多邊形
代碼：
const polygon = new PIXI.Graphics(); polygon.beginFill(0xff0044); polygon.lineStyle(5, 0xffffff); // x1, y1, x2, y2, ... polygon.drawPolygon(100, 100, 300, 250, 350, 50); // 添加到 stage 下 app.stage.addChild(polygon);
效果：
繪制三階貝塞爾曲線
代碼：
const curve = new PIXI.Graphics(); curve.beginFill(0xff0044); curve.lineStyle(5, 0xffffff); curve.moveTo(100, 180) // cpX, cpY, cpX2, cpY2, toX, toY curve.bezierCurveTo(90, 100, 210, 100, 300, 180) // 添加到 stage 下 app.stage.addChild(curve);
效果：
到此這篇關于PixiJS學習之常見圖形的繪制詳解的文章就介紹到這了,更多相關PixiJS繪制常見圖形內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS棧stack類的實現(xiàn)與使用方法,結合實例形式分析了棧的原理,以及javascript定義與使用棧的基本操作技巧,需要的朋友可以參考下2019-01-01
微信小程序使用input組件實現(xiàn)密碼框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用input組件實現(xiàn)密碼框功能,涉及input組件布局設置相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
在這篇文章里，我會實現(xiàn)一個可重用的函數(shù)來處理 JavaScript 延時異步操作。有需要的小伙伴們可以參考借鑒，下面來一起看看。2016-08-08
Bootstrap 支持的另一個特性，輸入框組,輸入框組擴展自表單控件.下面小編給大家介紹bootstrap輸入框組的代碼，非常不錯具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
簡單通過settimeout看javascript的運行機制
這篇文章主要給大家介紹了關于如何通過settimeout看javascript的運行機制的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
網(wǎng)絡之美 JavaScript中Get和Set訪問器的實現(xiàn)代碼
前兩天IE9 Beta版發(fā)布了，對于從事Web開發(fā)的朋友們來說真是個好消息啊，希望將來有一天各個瀏覽器都能遵循統(tǒng)一的標準。今天要和大家分享的是JavaScript中的Get和Set訪問器，和C#中的訪問器非常相似。2010-09-09
cookie是有有效期的，cookie的默認有效期是從cookie生成至瀏覽器關閉，也可以通過設置cookie的有效期來指定其失效日期；用戶也可以禁止cookie也可以手動刪除cookie2014-04-04
這篇文章主要給大家介紹了利用PHP實現(xiàn)記錄代碼運行時間的封裝類的相關教程，文中給出了詳細的示例代碼供大家參考學習，需要的朋友可以參考下2017-05-05
在我們日常工作過程中,我們對于javaScript遍歷對象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關于javascript遍歷對象的五種方式,需要的朋友可以參考下2021-10-10
一個在同一個頁面可多次調用的javascript彈出層效果，有需要的同學可以參考一下2013-08-08