iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

在JS的世界碰碰撞撞乒乒乓乓!30天一起玩Matter.js!系列 第 25

Day25. 發動魔法卡,融合 - Composite (下)

  • 分享至 

  • xImage
  •  

今天是 Composite 單元的最後一篇,既前兩篇看了基本屬性、建構方法後,最後一篇要來看 Composite 模組到底有哪些方法,讓我們能夠用來操控或獲取 Composite 相關資訊。

方法依據 API 文件總共有 14個。

我們用用途來分可以分成以下幾個用途:

  • Composite 組成內容創建與修改
  • Composite 本身資訊獲取
  • Composite 整體群組操作
  • 建議留給函式庫操作就好

Composite 組成內容創建與修改

  • Create
  • Add
  • Clear
  • Move
  • Remove

這類的組成內容是指 Composite 裡面建構用的物體。

Create 我們第一天有講過,Add 也有提過,一個是創建,一個就是單純在組合體裡增加新的物體(參考Day23)

剩下的 Clear / Move / Remove 其實也很單純

Clear 是清掉整個 Composite 裡面的內容,Move 跟 Remove 就是對 Composite 裡面單一的內容作操作,向是我們彈珠台第四天(Day15)把釘子移掉,就有用過 Remove 來把釘子從 engine.World 裡面移除。

Composite 本身資訊獲取

  • AllBodies
  • AllComposites
  • AllConstraints
  • Bounds

這幾個比較像本身屬性的揭露,提供一個不要直接讀取本身屬性的方式,包了一層函式來控制邏輯。

Bounds 就是拿取現在這個組合體的邊界。
這邊的AllBodies,就算你的層級是

compositeA -> bodyA
           -> bodyA2
           -> constraintA
           -> compositeB -> bodyB
                         -> bodyB2

呼叫 Composite.allBodies(compositeA) 則會回傳 bodyA, bodyA2, bodyB, bodyB2,是回傳所有的物體,不管是不是被歸在其他子 Composite 底下。

Composite 整體群組操作

  • Rotate
  • Scale
  • Translate

Rotate 是旋轉,Scale 是變大變小, Translate 是位移,我們可以對整個組合體操作,比如說之前的 twitter Icon,他就會是透過這些方法來操控,方法本身參數都跟 Body 模組中的大同小異,這邊就不特別多提。

建議留給函式庫操作就好

  • Rebase
  • SetModified

Rebase 是用來重新分配 Composite 裡面的 Id, SetModified 是用來操控 isModified 這個 flag 的,這兩個屬性前面都有提過,一般情況下交給函式庫操作就好,除非你已經要去覆寫某些機制。

今天比較沒有 Demo,但大概帶大家走過了一次所有方法,Demo的部分如果之後想到比較好的展示手段會再補進這篇。其實這些方法本身也沒有太多難以理解的地方,希望今天的內容能幫助大家快速的了解相關的所有函式,有需要使用的話再細部去了解就可以了,那我們的 Composite 模組到這邊,也就告一個段落了。


上一篇
Day24. 發動魔法卡,融合 - Composite (中)
下一篇
Day26. 星多天空亮,人多智慧廣 - Plugins
系列文
在JS的世界碰碰撞撞乒乒乓乓!30天一起玩Matter.js!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言