上篇文章中實(shí)現(xiàn)的10分制評分效果，因?yàn)槭前岩粡埿男螆D片切成兩部分，對應(yīng)只能顯示例如1、1.5、2、2.5......這樣的分?jǐn)?shù)效果；這次利用元件的設(shè)置尺寸動(dòng)作實(shí)現(xiàn)分?jǐn)?shù)值隨著鼠標(biāo)移動(dòng)而不斷改變的效果。
顯示效果
- 步驟：
-
拖入顏色不同的兩種星形圖片，之后將元件形狀轉(zhuǎn)換為星形即可，并將表示選中狀態(tài)的圖片轉(zhuǎn)換為動(dòng)態(tài)面板。這里我設(shè)置每一個(gè)星形的寬和高均為30px的矩形，動(dòng)態(tài)面板的寬為1px,x值與最左邊星形的x值相同；bg文本輸入框的寬和高分別為150px,30px,x和y值與最左邊星形的值相同；分?jǐn)?shù)文本輸入框位于星形右邊，用于顯示分?jǐn)?shù)。
所需元件
動(dòng)態(tài)面板中星形的顏色 - 在頁面中選中bg文本輸入框，分別設(shè)置鼠標(biāo)移動(dòng)事件，鼠標(biāo)移除事件和鼠標(biāo)單擊事件。
三個(gè)事件設(shè)置概覽
** 鼠標(biāo)移動(dòng)事件：當(dāng)鼠標(biāo)單擊事件觸發(fā)時(shí)，說明已經(jīng)評分，將動(dòng)態(tài)面板中的選中狀態(tài)文本輸入框的選中狀態(tài)置為true,當(dāng)未單擊時(shí)，設(shè)置動(dòng)態(tài)面板的尺寸，其實(shí)就是選中星形起始位置到鼠標(biāo)所在位置的距離，距離長度為[[(Cursor.x-bg.left)]]，設(shè)置方式如下：
設(shè)置尺寸
點(diǎn)擊寬后面的fx函數(shù)，寬的設(shè)置如下：
鼠標(biāo)的位置減去bg文本輸入框左邊的位置即為選中的星形的長度
同理，設(shè)置星形選中后顯示的分?jǐn)?shù)值，用選中的星形的長度除以15，對計(jì)算的結(jié)果保留一位小數(shù)，就是分?jǐn)?shù)值。除以15是因?yàn)樾切蔚目傞L度為150px,而分?jǐn)?shù)總共為10分。一分的長度就是10除以150為十五分之一。
分?jǐn)?shù)的設(shè)置
** 鼠標(biāo)移出事件：鼠標(biāo)移出時(shí)，如果沒有觸發(fā)單擊事件，設(shè)置動(dòng)態(tài)面板尺寸為初始尺寸的寬和高，分?jǐn)?shù)文本輸入框?yàn)榭铡?/li> -
重新評分矩形框添加鼠標(biāo)點(diǎn)擊事件。置動(dòng)態(tài)面板尺寸為初始尺寸的寬和高，分?jǐn)?shù)文本輸入框?yàn)榭?，?dòng)態(tài)面板中的選中狀態(tài)文本輸入框的選中狀態(tài)置為false。
重新評分事件設(shè)置 - 完成。
