[Work]-使用JavaScript製作模擬滑鼠拖拉圈選效果範例

今天又花了一點時間用Silverlight測試製作一個簡單的效果
就是使用滑鼠拖拉圈選的效果
我想這個效果算是滿常見的~也滿常用到的
加上之前有在Flash中用ActionScript寫過
所以想說換用Silverlight、XAML、JavaScript來寫看看同樣的效果
順便感受一下兩者之間的差異性
一樣不多說~往下看吧!!

先來看看我錄製的影片畫面
瞭解一下效果吧~~~

這個範例的效果主要是透過我在JavaScript中寫的三個函式來達成的
XAML的部份其實只需先把我要用到的物件建好即可
所以XAML部份的Code也才幾行而已
以下是主要的三個物件(其中有些屬性省略掉了)


1. 底圖(滑鼠感應區)
<Rectangle Width="400″ Height="300″ Fill="#FFEEEEEE"/>
2. 標題文字
<TextBlock Text="MitchBox" FontSize="80″ Canvas.Left="20″ Canvas.Top="80″/>
3. 圈選方塊
<Polygon x:Name="draw" Stroke="#FF333333″ Fill="#FF3366FF" Opacity="0.15″/>


接著我將滑鼠圈選的動作拆解成三個部份執行
因此,在JavaScript的部份則有三個函式來分別執行這三個動作
startDrag(在任意位置按下滑鼠左鍵)
startMove(按住左鍵不放,然後開始拖拉圈選)
stopDrag(放開滑鼠左鍵,圈選方塊消失)

這樣一來就能達到滑鼠拖拉圈選的效果囉
其實原理跟ActionScript很像
只是ActionScript已經幫你內建好一些函式了
只需去紀錄一下滑鼠座標位置
然後用繪圖函式把圈選方塊畫出來就可以了
那麼最後大家比較好奇的應該是兩者到底哪一種比較容易阿?
答案是~Silverlight~>0<
因為Silverlight只需靠XAML的Polygon一行程式就能輕易的畫出圈選方塊
接著就靠JavaScript將滑鼠座標動態地寫入Polygon中的Points屬性就好拉
輕輕鬆鬆就能完成這樣的效果囉~
真的是太神奇了~
趕快自己動手寫看看拉~你才能體會到那個Feel~

而這次測試的過程中有一些小發現跟大家分享一下
就是XAML中的RectanglePolygon的使用時機
我其實一開始是用Rectangle來畫圈選方塊
但是Rectangle無法自由的設定變化四個點的座標位置
因此會出現只能將滑鼠從左往右、從上往下拖拉的狀況
主要是因為他的左上角是以Canvas.LeftCanvas.Top做設定
(大家可能要自己試看看會比較清楚)
Polygon則簡單許多拉
你只需設定Points屬性的值就好拉
將四個點的座標位置輸入(例如:Points="10,10 10,50 50,50 50,10″)
我只能說XAML中的所有功能
真的要花不少時間玩看看
才能體會瞭解他的奧妙阿~~~
就先這樣拉~有問題再發問吧~

標籤:, ,

2 responses to “[Work]-使用JavaScript製作模擬滑鼠拖拉圈選效果範例”

  1. idleshin says :

    謝謝你的提示

    我做出來了^^

  2. mitchbox says :

    呵呵
    有問題歡迎隨時發問!!
    還有記得有空常來逛逛阿
    ^^

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: