iT邦幫忙

pixijs相關文章
共有 55 則文章
鐵人賽 Modern Web DAY 25

技術 [Re:PixiJS - Day25] destroy(),連同快取一起摧毀物件

前幾篇提了 Texture、BaseTexture、PixiJS 的 Cache, 這篇討論 可視物件 的 destroy() 方法 在 PixiJS 的 C...

鐵人賽 Modern Web DAY 24

技術 [Re:PixiJS - Day24] 用 Texture 實作把網頁弄壞 的 Demo

標題看起來好像有點厲害,但是是要實作把 網頁弄壞的 Demo 先前提到 Texture.from(<canvas>) 會產生 TextureCach...

鐵人賽 Modern Web DAY 23

技術 [Re:PixiJS - Day23] 了解 Texture / BaseTexture

這篇介紹 Texture / BaseTexture: 好像常看到他們,可是有不是很好理解 可以想像 Texture 是 Sprite 使用的材質,那 Base...

鐵人賽 Modern Web DAY 22

技術 [Re:PixiJS - Day22] 畫漸層線段、材質問題

前幾篇提到畫漸層填色,這篇來討論使用漸層線段 畫漸層色塊時使用 canvas2d gradient API 方法,繪製漸層線段原理差不多,但有不同的實作方法:...

鐵人賽 Modern Web DAY 21

技術 [Re:PixiJS - Day21] 畫漸層填色、材質重複填滿會遇到的問題

填入漸層感覺不難, Canvas 有方法可以用: HTML Canvas Gradients CSS 也有方法可以用: CSS Gradients 但用...

鐵人賽 Modern Web DAY 20

技術 [Re:PixiJS - Day20] 用 tint() 方法填色時,原物件需為白色或灰階

實務上,通常會使用 白色或灰階 的PNG圖片、 PIXI.Text 或 PIXI.Graphics,配合 tint 的方法,填入想要的顏色 實作了 tint...

鐵人賽 Modern Web DAY 19

技術 [Re:PixiJS - Day19] PIXI.Text / SVG 不是向量的

Text 與 SVG 在 html 裡是向量,在 Canvas / WebGL 裡最後的結果是點陣。 這篇會說明 Text 與 SVG 在 PixiJS 裡的特...

鐵人賽 Modern Web DAY 18

技術 [Re:PixiJS - Day18] Graphis 類別 drawRoundedRect() 方法畫圓角矩形時會遇到的問題

Graphics 類別有畫圓角的方法:Graphics#drawRoundedRect 但畫圓角矩形的方法在 v5.2.2 前有問題, 當畫的圓角矩形寬高 小於...

鐵人賽 Modern Web DAY 17

技術 [Re:PixiJS - Day17] 中文文字 換行問題

接著來的幾篇會與畫面呈現相關: 這篇實際上是同事遇過的問題與整理,因為相當實用且會遇到,寫進系列文章裡 直接結論: TextStyle#breakWord...

鐵人賽 Modern Web DAY 16

技術 [Re:PixiJS - Day16] 在手機上實作擼來擼去的互動

PixiJS 註冊 pointerdown事件 時,無論是 PC 或手機版,收到事件的 原始事件 都是原生的 PointerEvent [ Demo ] b...

鐵人賽 Modern Web DAY 15

技術 [Re:PixiJS - Day15] pointermove 事件與不同手機間的差異

本篇討論 pointermove 事件 觸發事件與不同手機的差異 pointermove 事件: PC: 綁定在物件的 pointermove 事件,是只要...

鐵人賽 Modern Web DAY 14

技術 [Re:PixiJS - Day14] hitArea 屬性

實測後的 hitArea 幾個特性: 1: hitArea 不影響物件本身的寬高 2: 設定 hitArea 時,感應區以 hitArea 設定為主,物件本身的...

鐵人賽 Modern Web DAY 13

技術 [Re:PixiJS - Day13] 感應(三) interactive 與 interactiveChildren 屬性

在看互動相關的屬性時,除了 interactive 外還有一個類似的 interactiveChildren Demo 與實作後,覺得可把 interacti...

鐵人賽 Modern Web DAY 12

技術 [Re:PixiJS - Day12] 感應(二) alpha0 與 beginFill(color, 0) 時是否可以感應?

因為滿雷的,獨立成一篇 上一篇提到,alpha 設定為 0 時,仍可以感應的到 那如果是使用 beginFill(color, alpha) 畫的 graphi...

鐵人賽 Modern Web DAY 11

技術 [Re:PixiJS - Day11] 感應(一) 元件在 alpha:0、visible:false、rendable:false 時的互動行為

本篇會來討論 是否看得到 與 是否可互動 的關係 做了一個 Demo,右上角的 GUI 裡表示了整個方塊幾個屬性的開關 visible renderable...

鐵人賽 Modern Web DAY 10

技術 [Re:PixiJS - Day10] 番外篇:成為 PixiJS 的貢獻者

這次寫系列文章時,查了很多 PixiJS 的說明文件與原始檔 因此發現了一些說明文件上的問題,也發了幾次 PR 與發 Issue 參加討論 第一次勘誤與發 P...

鐵人賽 Modern Web DAY 9

技術 [Re:PixiJS - Day09] Display Object 可視物件的事件監聽從哪來的?

官方範例上會越點越大的例子: Demo - INTERACTION > Click // Pointers normalize touch and mo...

鐵人賽 Modern Web DAY 8

技術 [Re:PixiJS - Day08] 互動常見問題 - 多次指定事件 / 手機版測試

系列討論來到互動,先暖身幾個 PixiJS 互動的特性: 開啟互動: PixiJS 預設沒有互動行為,需要先指定 interactive = true 指定了...

鐵人賽 Modern Web DAY 7

技術 [Re:PixiJS - Day07] 容器取得可視物件的 getChildAt()、getChildByName() 方法

在 PixiJS 裡,使用 addChild(...children) 方式將顯示物件放入 container 後 並不是直接使用 container[chil...

鐵人賽 Modern Web DAY 6

技術 [Re:PixiJS - Day06] 顯示物件的奇妙行為與 Clone() 方法

接續昨天的討論,先討論幾個可視物件的行為: 繼承自 Container 的行為 Graphics 類別 繼承自 Container,因此可以使用 addCh...

鐵人賽 Modern Web DAY 5

技術 [Re:PixiJS - Day05] 可視物件的繼承關係

用可視物件的 繼承關係 來理解各個可視物件與行為滿方便的 研究了目前 5.3.2 版本的繼承關係,並畫了一張繼承圖: (準備這張圖片時與寫文章時有一點時間差異...

鐵人賽 Modern Web DAY 4

技術 [Re:PixiJS - Day04] 元件被遮罩裁切後的寬高

這篇不長,倒是挺雷的 一個空容器,裡面放了一個 100x150 的色塊,並用遮罩遮成 100x100 Q:這時容器高度是多少? 選項1:100 選項2:150...

鐵人賽 Modern Web DAY 3

技術 [Re:PixiJS - Day03] 可視物件的深度 - childIndex / zIndex

先前的系列文提過, 可透過 addChild(child) 將可視物件加到容器,並存放在 children 陣列裡 [PixiJS - Day-07] sta...

鐵人賽 Modern Web DAY 2

技術 [Re:PixiJS - Day02] PixiJS 物件的排列、寬高特性

寫在第二天的是覺得很容易踩到的麻煩點:排列與寬高 為了重現麻煩點,設定了一個情境: 創造三個容器,裡頭各放了一個 100x100 的色塊。 並讓三個容器水平緊...

鐵人賽 Modern Web DAY 1

技術 [Re:PixiJS - Day01] 再談 PixiJS

先前在 iT 邦幫忙鐵人賽 寫 PixiJS 是2017年年底的事 由於是再談 PixiJS,這次的系列文是基於 2018 iT 邦幫忙鐵人賽 PixiJS,方...

鐵人賽 Modern Web DAY 30

達標好文 技術 [PixiJS - Day-30] 實作:在手機版網頁上蓋章

不只是動態呈現,PixiJS 也是我用來試做一些功能的工具。 這次介紹的實作是:在手機版網頁上蓋章 實作的方法是 多點觸控 之前沒處理過多點觸控,不確定在 P...

鐵人賽 Modern Web DAY 29

技術 [PixiJS - Day-29] 實作:第二版萬花筒

大家 2018 新年快樂! 這次講的是第二版萬花筒 網址:http://eia.github.io/pixijs/170419/ 萬花筒的部分,在第一版萬花...

鐵人賽 Modern Web DAY 28

技術 [PixiJS - Day-28] 實作:萬花尺

萬花尺,小時候玩過那種中間有齒輪的尺, 把筆放在小齒輪洞裡順著畫會畫出漂亮形狀的玩具 Wiki - 萬花尺 實作出來的結果: 可直接玩玩看: http://...

鐵人賽 Modern Web DAY 27

技術 [PixiJS - Day-27] 實作:第一版萬花筒

有一陣子很流行萬花筒,當時剛接觸 PixiJS,想用 PixiJS 來實作看看 實作結果: 想法裡,萬花筒是由數片內容相同的三角形組成 實作時想法: Ste...

鐵人賽 Modern Web DAY 26

技術 [PixiJS - Day-26] 實作:PixiJS 也能做功能? 之合圖上傳

PixiJS 不只用來呈現視覺動態,也適合用在一些功能 本篇講的是合圖 / 紙娃娃功能 實作時想法: Step1. 先用測試的圖片實作功能: 先使用固定的圖片...