FLEX 製作可隨滑鼠拖曳縮放元件
今天好友 梅干桑 ♣梅問題‧教學網【Minwt】♣ 寫了一個可以隨滑鼠拖曳而縮放的元件，不過沒有完全寫好，所以我就幫他把程式碼元件化了一下，不過我也不知道是做來要幹嘛的，改天等他的教學放出來大家就知道囉 ^_^
這次的程式碼我就只提供元件的原始碼，畢竟這也不是篇教學，有興趣的人就研究看看程式碼，如果沒興趣的也就晃晃吧 ! 等梅干桑公佈他到底想要做什麼的時候自然就有教學啦 !
不過程式碼還是有點問題啦，程式的圖片我也沒有上傳，不過我懶的修了 ^^ 因為我根本不知道梅干桑要幹嘛阿，所以讓他自己來改成後版本吧，給大家留點神秘感。這邊是提供個簡單範例給大家參考。
FunBox.mxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="200"
creationComplete="createBox()" mouseMove="boxOverHanlder(event)" mouseOut="boxOutHanlder(event)" mouseOver="boxOverHanlder(event)"
mouseDown="boxDownHanlder(event);" mouseUp="boxUpHanlder(event)">
<mx:Script>
<![CDATA[
import mx.rpc.events.AbstractEvent;
import mx.containers.VBox;
import mx.events.DynamicEvent;
import mx.containers.HBox;
import mx.controls.Alert;
//不可以用固定的 HBOX !
//private var but:HBox=new HBox();
private function createBox():void
{
//建BOX
//這邊設定比較多此一舉 因為元件本身就可以設定了
//this.width=300;
//this.height=200;
myimg.width=this.width;
myimg.height=this.height;
//this.x=0;
//this.y=0;
//建立改變大小按鈕
var but:HBox = new HBox();
but.name = "changBtn";
but.width=10;
but.height=10;
//按鈕座標
but.x=this.width - but.width;
but.y=this.height - but.height;
//偵聽改變大小事件
but.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownBut);
but.addEventListener(MouseEvent.MOUSE_UP, mouseUpBut);
//其實在元件建立的時候就已經 addChild 過了
//parent.addChild(this);
this.addChild(but);
}
private function mouseDownBut(event:MouseEvent):void
{
event.target.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveBut);
event.target.startDrag();
}
private function mouseUpBut(event:MouseEvent):void
{
event.target.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveBut);
event.target.stopDrag();
event.target.x=this.width - event.target.width;
event.target.y=this.height - event.target.height;
}
private function mouseMoveBut(event:MouseEvent):void
{
this.width=this.mouseX;
this.height=this.mouseY;
myimg.width=this.width;
myimg.height=this.height;
mylb.scaleX=((this.width) / 100);
mylb.scaleY=((this.height) / 100);
event.updateAfterEvent();
}
/*===============================================================================*/
private function boxDownHanlder(event:MouseEvent):void
{
/* 不要用固定的判斷方式
if (event.target == "DragBox1.Stage.box.myimg.FlexLoader10")
{
box.startDrag();
}
*/
//trace(event.target);
if (event.currentTarget is Canvas){
if(event.target is HBox){
//反向寫不出來 >"<
}else{
event.currentTarget.startDrag();
}
}
}
private function boxUpHanlder(event:MouseEvent):void
{
/* 不要用固定的判斷方式
if (event.target == "DragBox1.Stage.box.myimg.FlexLoader10")
{
box.stopDrag();
box.setStyle("backgroundColor", "");
box.setStyle("backgroundAlpha", 0);
box.setStyle("borderThickness", 1);
box.setStyle("borderColor", "");
box.setStyle("borderStyle", "");
//but.setStyle("backgroundColor", "");
//but.setStyle("backgroundAlpha", 0);
//but.setStyle("borderThickness", 1);
//but.setStyle("borderColor", "");
//but.setStyle("cornerRadius", 0);
//but.setStyle("borderStyle", "");
}*/
if(event.currentTarget is Canvas){
if(event.target is HBox){
//反向寫不出來 >"<
}else{
var box:Canvas = event.currentTarget as Canvas;
box.stopDrag();
box.setStyle("backgroundColor", "");
box.setStyle("backgroundAlpha", 0);
box.setStyle("borderThickness", 1);
box.setStyle("borderColor", "");
box.setStyle("borderStyle", "");
var but:HBox = event.currentTarget.getChildByName("changBtn");
but.setStyle("backgroundColor", "");
but.setStyle("backgroundAlpha", 0);
but.setStyle("borderThickness", 1);
but.setStyle("borderColor", "");
but.setStyle("cornerRadius", 0);
but.setStyle("borderStyle", "");
}
}
}
private function boxOverHanlder(event:MouseEvent):void
{
this.setStyle("backgroundColor", "#f00dbad");
this.setStyle("backgroundAlpha", 0.2);
this.setStyle("borderThickness", 1);
this.setStyle("borderColor", "#f00dbad");
this.setStyle("borderStyle", "solid");
this.clipContent=false;
//顯示改變大小按鈕
var but:HBox = event.currentTarget.getChildByName("changBtn");
but.setStyle("backgroundColor", "#000");
but.setStyle("backgroundAlpha", 0.3);
but.setStyle("borderThickness", 1);
but.setStyle("borderColor", "#000");
but.setStyle("cornerRadius", 0);
but.setStyle("borderStyle", "solid");
}
private function boxOutHanlder(event:MouseEvent):void
{
this.setStyle("backgroundColor", "");
this.setStyle("backgroundAlpha", 0);
this.setStyle("borderThickness", 1);
this.setStyle("borderColor", "");
this.setStyle("borderStyle", "");
var but:HBox = event.currentTarget.getChildByName("changBtn");
but.setStyle("backgroundColor", "");
but.setStyle("backgroundAlpha", 0);
but.setStyle("borderThickness", 1);
but.setStyle("borderColor", "");
but.setStyle("cornerRadius", 0);
but.setStyle("borderStyle", "");
}
[Bindable]
public var funString:String = "請輸入相關訊息" ;
]]>
</mx:Script>
<mx:Image source="box.png" id="myimg"/>
<mx:Label text="{this.funString}" id="mylb" x="41" y="32" fontSize="15"/>
</mx:Canvas> |
Random Posts
Loading…
目前並無相關文章
真是太感謝了，昨天總算拼拼湊湊，把大概的架構整合起來了~~
但還有很多地方還得再尋求你山羊版大的協助~~
這版還蠻不錯看的喔!
文章排的還蠻清楚易懂的~~
^_^
謝謝嚕~
排得清楚是因為資料不多的關係啦 呵呵!