FLEX自定義面板1 自定義圓形和方形節點

2021-09-12 20:19:51 字數 2637 閱讀 5918

1.概述

在flex3中,我們要實現這兩種節點,通常會採取繼承的方式:

眾所周知繼承和類膨脹會帶來一些問題,如果僅僅因為顯示的不同而實現兩個不同的元件類並不是乙個很好的解決辦法。

在flex4中,我們完全可以只定義乙個元件類來實現功能邏輯,而把顯示交給skin去處理:

spark元件都繼承自skinnablecomponent,而skinnablecomponent繼承子uicomponent並擴充套件了skin相關的功能;同樣skin類也繼承自uicomponent。

通過這樣的方式,spark元件在原有的元件架構基礎上,實現了顯示和邏輯的分離。

節點效果如下,可以用於petri網的節點表示等。

2.開發過程

2.1建立乙個節點類

節點類必須繼承skinnablecomponent,這樣才能設定**

**如下

package nodeexam}}

2.2 定義skin類

這裡定義了兩個**,**如下

placeskin.mxml

<

?xml

version

="1.0"

encoding

="utf-8"

?>

""xmlns:s=

"library:"

xmlns:mx=

"library:"

width

="400"

height

="300"

>

="ellipse" top=

"0" right=

"0" bottom=

"0" left=

"0">

fill

>

="0x77cc22"

/>

<

/s:fill

>

stroke

>

="0x131313" weight=

"2"/

>

<

/s:stroke

>

<

/s:ellipse>

<

/s:skin>

注:s :ellipse:表示畫橢圓

s:stroke:表示畫線條

s:fill:表示填充的顏色和透明度

s:rect:表示畫矩形,可以帶圓角

transitionskin.mxml

<

?xml

version

="1.0"

encoding

="utf-8"

?>

""xmlns:s=

"library:"

xmlns:mx=

"library:"

width

="400"

height

="300"

>

="rect" radiusx=

"4" radiusy=

"4" top=

"0" right=

"0"bottom=

"0" left=

"0">

fill

>

="0x131313"

/>

<

/s:fill

>

stroke

>

="0x131313" weight=

"2"/

>

<

/s:stroke

>

<

/s:rect>

<

/s:skin>

2.3應用程式

**如下

<

?xml

version

="1.0"

encoding

="utf-8"

?>

xmlns:fx=

""xmlns:s=

"library:"

xmlns:mx=

"library:"

xmlns:skinsample=

"nodeexam.*"

>

node skinclass=

"nodeexam.transitionskin" x=

"10" y=

"30"

width

="50"

height

="50"

/>

node skinclass=

"nodeexam.placeskin" x=

"80" y=

"30"

width

="50"

height

="50"

/>

<

自定義圓形Imageview

1 學習一定要善於總結,和敢於使用新的知識 2 一直使用的都是別人寫好的控制項,今天趁著國慶放假有時間,嘗試自己寫經常要用到的框架 3 知識總結 一 用於建立canvas的bitmap不能是已經存在的bitmap 二 這個自定view中遇到乙個坑就是的大小和遮罩大小不匹配是,需要我們對bitmap做...

自定義圓形 ImageView

android預設的imageview是矩形的,為了達到圓形的目的,需要自定義控制項,繼承imageview,重寫ondraw函式。最終效果 具體步驟 1.先根據控制項的短的一邊為半徑繪製乙個圓形 bitmap bitmap bitmapdrawable drawable getbitmap int...

WPF 自定義面板

先上效果圖吧 實現自定義面板主要實現兩個方法 一 measureoverride 用於計算容器內部元素大小,這個很簡單,略過 二 arrangeoverride 用於計算容器內部元素位置和其他顯示方式,以下是實現上面布局的 protected override system.windows.size...