1. 程式人生 > >1.PIXI基礎教程API Container

1.PIXI基礎教程API Container

PIXI.js的github地址:https://github.com/pixijs/pixi.js
描述:

這個建構函式繼承於DisplayObject 至於這個DisplayObject是什麼我們就不需要深入參考了 。

我們就認為DisplayObject是一個顯示物件好了。Container物件是一個容器類不能設定寬度與高度 這個容器的寬度與高度如何確定是通過其內部的子顯示物件確認的高度與寬度雖然這個物件的寬度與高度不能設定 但是可以設定這個物件的x座標與y座標

主要屬性:

(數值型別)alpha 這個屬性是表示的這個Container建構函式的透明度是多少。

(布林型別)buttonMode 如果設定這個屬性為true那麼當滑鼠移入到這個容器物件上的時候滑鼠的指標會顯示為pointer樣式

(布林型別)cacheAsBitmap 如果我們把這個屬性設定為true了 那麼我們對這個容器物件的所有操作(包括容器物件的子物件)都不會起作用 這個顯示物件會一直停留在設定cacheAsBitmap為true的那個樣子直到我們將他設定為false 我們的操作才會繼續生效

(陣列型別)children 這個屬性儲存了容器物件的所有子顯示物件

(字串) cursor 這個屬性表示的是滑鼠移入到這個顯示物件上滑鼠的顯示樣式 和css的cursor是一樣的 這裡必須要有一個前提我們必須將顯示物件的interactive的屬性設定為true

(PIXI.Rectangle)filterArea 這個屬性的型別是一個矩形型別(其實就是x,y,width,height)這個屬性表示的過去區域

(陣列PIXI.filters) filters 這個屬性表示的當前容器應用的過濾陣列物件 這個屬性只有在渲染器是webgl渲染器的時候才有用

(數值型別) height 這個屬性表示的是容器的高度 這裡無法設定高度  因為在你給容器加入子顯示物件的時候容器的高度就被重置了

(PIXI.Rectangle | PIXI.Circle | PIXI.Ellipse | PIXI.Polygon | PIXI.RoundedRectangle )hitArea 

這個屬性表示的滑鼠點選這個顯示物件的時候點選哪一個區域才有用 有時候我們在用透明圖片做顯示的時候需要讓使用者點選不透明的區域沒有效果 這個時候我們就需要這個屬性了

(布林型別) interactive 當我們設定這個屬性為true的時候我們的滑鼠互動事件才有作用 否則我們新增的滑鼠互動事件都會沒有作用包括cursor屬性設定的滑鼠移入顯示效果也會沒有作用

(布林型別) interactiveChildren 這個屬性是控制這個顯示物件的子物件是否擁有滑鼠互動事件 如果設定為false那麼pixi在遞迴操作顯示物件的時候迴繞過子顯示物件的hitTest函式

(PIXI.Graphics | PIXI.Sprite) mask 這個屬性表示的是用這個顯示物件來擋住當前的顯示物件(可做的遊戲 刮卡片)

(字串) name 這個屬性表示的是當前顯示物件的名稱 

(PIXI.Container) parent 當前顯示容器的父容器

(PIXI.Point | PIXI.ObservablePoint ) pivot 這個屬性是用來設定旋轉中心的pixi預設的旋轉中心是左上角 

(PIXI.Point | PIXI.ObservablePoint ) position 這個屬性用來表示當前容器物件的區域性座標位置(相對於父容器的座標位置)

(布林型別) renderable 可以渲染此物件,如果為false,則不會繪製物件,但仍會呼叫updateTransform方法。

僅影響來自父級的遞迴呼叫。您可以手動詢問邊界

(數值型別) rotation 旋轉按照旋轉中心旋轉的弧度數(這裡表示的是弧度數 如果我們想用角度那麼我們就要用Math.PI/180就表示是一度的弧度數啦)

(PIXI.Point | PIXI.ObservablePoint) scale 這個屬性表示的當前容器物件的縮放因素因為縮放有x軸縮放 y軸縮放所以這裡是一個物件(一般呼叫方式為exObj.scale.x = xxx;exO.scale.y =xxx)

(PIXI.ObservablePoint) skew 這個屬性表示的是當前顯示物件的傾斜因數 同樣的這個屬性也是以一個物件表示的(呼叫方式是exObj.skew.x = xxx;exObj.skew.y = xxx)

(布林型別) visible 這個屬性表示的是當前的容器物件是否是可見的

(數值型別) width 這個屬性表示的當前容器物件的寬度 這裡無法設定寬度  因為在你給容器加入子顯示物件的時候容器的寬度就被重置了

(數值型別) x 表示的是顯示物件的x軸位置

(數值型別) y 表示的是顯示物件的y軸位置

(PIXI.Matrix) worldTransform 表示當前顯示物件的全域性變換(這裡這個屬性是隻讀屬性 這個屬性看變數型別就只讀 非凡人可以理解矩陣型別的 因為pixi用的是webgl做渲染引擎 所以這裡有矩陣就是很正常的了)

(布林型別) worldVisible 表示當前顯示物件是否全域性可見

主要屬性差不多就這麼多

主要方法:

_calculateBounds(無引數)  這個方法是在重新計算寬度與高度的時候回撥的函式可以重寫這個方法在高度與寬度被修改的時候做一些操作。為什麼說這個顯示物件的寬度與高度無法設定 其實就在這裡因為當我們新增子顯示物件的時候容器的寬度與高度被重置了

addChild (child) 這個方法是 給當前顯示容器新增子顯示物件 引數child可以是container所有的子類和container類的例項物件、返回型別是新增的child

addChildAt (child, index) 這個方法是在制定位置新增子顯示物件 (index 因為儲存子顯示物件的變數是children這個陣列所以index就是這個陣列的位置)

destroy  (options) 這個方法是銷燬當前的顯示物件(如果這個顯示物件新增到了容器物件裡面 如果呼叫這個方法會自動從容器物件裡面移出) option是一個物件

可以選的屬性有

chilren 這是一個布林變量表示要不要清除子顯示物件

texture這個是一個布林變量表示要不要清除與這個顯示物件相關的文理快取

getBounds (skipUpdate, rect) 獲取物件的邊界 

skipUpdate 設定為true將停止更新場景圖的變換。這意味著返回的計算可能已過時但是會給您帶來不錯的效能提升

rect表示用來儲存返回的邊界資訊

返回值是一個PIXI.Rectangle 矩形變量表示的是顯示物件的邊界資訊

getChildAt (index)通過index獲取子顯示物件  (index 因為儲存子顯示物件的變數是children這個陣列所以index就是這個陣列的位置) 返回值是獲取的子顯示物件

getChildByName (name) 通過name來獲取子顯示物件。返回值是獲取的子顯示物件

getChildIndex (child)通過傳入的子顯示物件來獲取子顯示物件在children陣列的位置

getGlobalPosition (point,skipUpdate)獲取容器物件的全域性位置資訊

point 將全域性值寫入的點。如果為null,則返回新點

skipUpdate 設定為true將停止更新場景圖的變換。這意味著返回的計算可能已過時但是會給您帶來不錯的效能提升

getLocalBounds (rect)檢索顯示物件的區域性邊界作為矩形物件

rect 可選矩形,用於儲存邊界計算的結果

removeChild (child)從容器中移除一個或多個孩子。

child 要移出的子顯示物件

 removeChildAt (index) 從移出位置為index的子顯示物件

index要移出子顯示物件的位置 (index 因為儲存子顯示物件的變數是children這個陣列所以index就是這個陣列的位置)

removeChildren (beginIndex,endIndex)從開始和結束索引中的此容器中刪除所有子項。

beginIndex開始處的索引

endIndex結束處的索引

renderCanvas (renderer)  要使用的canvas著色

renderer     型別為PIXI.CanvasRenderer

 renderWebGL (renderer) 要使用的webgl著色

renderer      型別為PIXI.WebGLRenderer

setChildIndex (child, index) 設定子顯示物件的位置

child 子顯示物件

index 要設定的位置 (index 因為儲存子顯示物件的變數是children這個陣列所以index就是這個陣列的位置)

setParent (container) 設定當前顯示物件的父容器

setTransform (x, y, scaleX, scaleY, rotation, skewX, skewY, pivotX, pivotY) 方便快速的這種當前顯示物件的位置,縮放等。

x 座標軸x的位置

y座標軸y的位置

scaleX X軸縮放

scaleY Y軸縮放

skewX X軸傾斜

skewY Y軸傾斜

pivotX x軸旋轉中心

pivotY y軸旋轉中心

swapChildren (child, child2) 交換兩個顯示物件的位置(這裡的位置其實是交換兩個顯示物件的index)

child 子顯示物件一

child2 子顯示物件二

on(type,call) 新增事件

type要新增的事件型別

call 事件觸發的回撥函式

off(type,call) 移出事件

type要移出的事件型別

call 要移出的回撥函式

當前顯示物件的主要方法就這麼多了 這個物件不是sprite物件 所以這裡就不提sprite才有的方法

主要事件:

added

將此DisplayObject新增到Container時觸發。

新增的容器物件

click

在顯示物件上按下並釋放指標裝置按鈕(通常是滑鼠左鍵)時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

mousedown

在顯示屏上按下指標裝置按鈕(通常是滑鼠左鍵)時觸發。目的。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

mousemove

指標裝置(通常是滑鼠)在顯示物件上方移動時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

mouseout

將指標裝置(通常是滑鼠)移出顯示物件時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

mouseover

將指標裝置(通常是滑鼠)移動到顯示物件上時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

mouseup

顯示物件上釋放指標裝置按鈕(通常是滑鼠左鍵)時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

mouseupoutside

當指標裝置按鈕(通常是滑鼠左鍵)被釋放到最初註冊mousedown的顯示物件之外時觸發 。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

pointercancel

在作業系統取消指標事件時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

 

pixi事件物件

pointerdown

在顯示物件上按下指標裝置按鈕時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

pointermove

指標裝置在顯示物件上方移動時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

pointerout

指標裝置從顯示物件移開時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

pointerover

將指標裝置移動到顯示物件上時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

pointertap

在顯示物件上按下並釋放指標裝置按鈕時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

pointerup

在顯示物件上釋放指標裝置按鈕時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

pointerupoutside

在指標裝置按鈕釋放到最初註冊指標的顯示物件外部時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

removed

從Container中刪除此DisplayObject時觸發。

 

容器物件

rightclick

在顯示物件上按下並釋放指標裝置輔助按鈕(通常是滑鼠右鍵)時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

rightdown

在顯示物件上按下指標裝置輔助按鈕(通常是滑鼠右鍵)時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

rightup

當指標裝置輔助按鈕(通常是滑鼠右鍵)在顯示物件上釋放時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

rightupoutside

當指標裝置輔助按鈕(通常是滑鼠右鍵)被釋放到最初註冊右下的顯示物件外時 觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

tap

觸控點放置並從顯示物件中移除時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

touchcancel

在作業系統取消觸控時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

touchend

從顯示物件中移除觸控點時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

touchendoutside

在最初註冊觸控開始的顯示物件外部移除觸控點時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

touchmove

沿著顯示物件移動觸控點時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

touchstart

在觸控點放置在顯示物件上時觸發。interactive必須將DisplayObject的屬性設定true為觸發事件。

pixi事件物件

 

這裡就直接以表格的形式列出來 表格中的 DisplayObject表示的是顯示物件 可以是PIXI.Sprite,PIXI.Container ,PIXI.DisplayObject,PIXI.Graphics

後面會陸續更新更多的api例項物件 

我們這裡不會更新完所有的pixi物件 我們只更新一個小遊戲需要的物件