在畫弧形時可能遇到的問題：使用一樣的 畫弧形API，在畫 較小的弧形時出現 鋸齒[ Demo-1 ] PIXI.Graphics#arc - PIXI.Grap...
本篇接續昨天解析度的討論：在實做 resolution: window.devicePixelRatio 後，再使用濾鏡時可能會有的問題 昨天的 Demo：...
Canvas / WebGL 的解析度一直是想研究但總是一直沒有好好研究的事情趁著這篇來討論看看 Canvas 的情況： 情境： 這是一個寬高皆為 200 的...
這次系列到這篇滿30篇，但還有幾篇會寫，對自己來說不算完賽，這篇像是 完賽心得(上) 的概念 今年準備了兩個題目： 今年滿早就開始準備寫鐵人，準備時有兩個方向...
這篇介紹 TexturePacker 工具，並使用匯出的 .json檔 與 Spritesheet圖 今日目標： 使用 Loader 讀取 .json 檔，...
補充幾個 Loader 的特性： 1. 在讀取完成前無法使用 add() 讀取下一個檔案： [ Demo-1 ] const loader = PIXI.Loa...
PixiJS 是怎麼把 Spritesheet JSON 檔讀成 PIXI.Spritesheet 後給 PIXI.AnimatedSprite 使用的? [...
前幾篇提到了 PixiJS 裡的 Texture 與快取，這篇要談的是 Loader PIXI.Loader 說明文件上的 Example ，還不算太複雜：...
前幾篇提了 Texture、BaseTexture、PixiJS 的 Cache，這篇討論 可視物件 的 destroy() 方法 在 PixiJS 的 Co...
標題看起來好像有點厲害，但是是要實作把 網頁弄壞的 Demo 先前提到 Texture.from(<canvas>) 會產生 TextureCach...
這篇介紹 Texture / BaseTexture：好像常看到他們，可是有不是很好理解 可以想像 Texture 是 Sprite 使用的材質，那 BaseT...
前幾篇提到畫漸層填色，這篇來討論使用漸層線段 畫漸層色塊時使用 canvas2d gradient API 方法，繪製漸層線段原理差不多，但有不同的實作方法：方...
填入漸層感覺不難，Canvas 有方法可以用： HTML Canvas Gradients CSS 也有方法可以用： CSS Gradients 但用 Pixi...
實務上，通常會使用 白色或灰階 的PNG圖片、PIXI.Text 或 PIXI.Graphics，配合 tint 的方法，填入想要的顏色 實作了 tint 方...
Text 與 SVG 在 html 裡是向量，在 Canvas / WebGL 裡最後的結果是點陣。這篇會說明 Text 與 SVG 在 PixiJS 裡的特性...
Graphics 類別有畫圓角的方法：Graphics#drawRoundedRect 但畫圓角矩形的方法在 v5.2.2 前有問題，當畫的圓角矩形寬高 小於兩...
接著來的幾篇會與畫面呈現相關： 這篇實際上是同事遇過的問題與整理，因為相當實用且會遇到，寫進系列文章裡 直接結論： TextStyle#breakWord...
PixiJS 註冊 pointerdown事件 時，無論是 PC 或手機版，收到事件的 原始事件 都是原生的 PointerEvent[ Demo ] box...
本篇討論 pointermove 事件 觸發事件與不同手機的差異 pointermove 事件： PC： 綁定在物件的 pointermove 事件，是只要...
實測後的 hitArea 幾個特性： 1: hitArea 不影響物件本身的寬高2: 設定 hitArea 時，感應區以 hitArea 設定為主，物件本身的邊...
在看互動相關的屬性時，除了 interactive 外還有一個類似的 interactiveChildren Demo 與實作後，覺得可把 interacti...
因為滿雷的，獨立成一篇 上一篇提到，alpha 設定為 0 時，仍可以感應的到 那如果是使用 beginFill(color, alpha) 畫的 graphi...
本篇會來討論 是否看得到 與 是否可互動 的關係 做了一個 Demo，右上角的 GUI 裡表示了整個方塊幾個屬性的開關 visible renderable...
這次寫系列文章時，查了很多 PixiJS 的說明文件與原始檔因此發現了一些說明文件上的問題，也發了幾次 PR 與發 Issue 參加討論 第一次勘誤與發 PR...
官方範例上會越點越大的例子：Demo - INTERACTION > Click // Pointers normalize touch and mous...
系列討論來到互動，先暖身幾個 PixiJS 互動的特性： 開啟互動： PixiJS 預設沒有互動行為，需要先指定 interactive = true指定了 i...
在 PixiJS 裡，使用 addChild(...children) 方式將顯示物件放入 container 後並不是直接使用 container[child...
接續昨天的討論，先討論幾個可視物件的行為： 繼承自 Container 的行為 Graphics 類別 繼承自 Container，因此可以使用 addChi...
用可視物件的 繼承關係 來理解各個可視物件與行為滿方便的研究了目前 5.3.2 版本的繼承關係，並畫了一張繼承圖： (準備這張圖片時與寫文章時有一點時間差異，版...
這篇不長，倒是挺雷的 一個空容器，裡面放了一個 100x150 的色塊，並用遮罩遮成 100x100Q：這時容器高度是多少？ 選項1：100選項2：150選項3...
angelliya00
iThome鐵人賽
看影片追技術