介紹

鼠標拖拽畫框線是我們常用的操作?？梢酝ㄟ^Axure來完美的模擬鼠標拖拽畫框線的效果，當接觸到了其他控件的時候，可以通過交互來表示接觸狀態。

(相關資料圖)

今天，就讓我們來學習如何制作它。

預覽效果

制作思路

1.下面就讓我們來制作它。先整理下思路。由于網頁的交互不支持拖拽的交互事件，所以，我們要添加一個空白的矩形來當作拖拽的畫布。在它基礎上添加交互事件。

2.拖拽的框線可以通過一個大小和位置不斷變化的矩形來模擬。

3.拖拽時，我們需要記錄鼠標在拖拽開始時的X和Y值，然后通過它來計算拖拽的距離。我們可以通過兩個矩形的文本值來分別的記錄它。

4.拖拽時，我們還需要記錄是向哪個方向拖拽的，因為不同方向，框線的大小和位置的計算方式。是不同的。我們可以將其看做有四個象限的坐標軸。以鼠標結束點判斷是在哪個象限。

制作內容

然后讓我們來制作它。

首先，拖入一個空白矩形作為畫布，然后將其鎖定，以免誤操作。

然后拖入一個矩形作為拖拽時框線，改變其樣式，命名為框線。將其隱藏。

然后拖入六個矩形，用于記錄值，分別命名為X，Y，1象限，2象限，3象限，4象限。

給四個象限設置一個選項組和選中樣式，因為每次只能有1個象限被選中。

然后再拖入一個矩形，命名為可選中的矩形，給它設置錯誤樣式，我們用錯誤樣式來表示框線接觸它時的交互

制作交互

元件制作完成后，我們來設置交互。

畫布鼠標按下時交互

畫布鼠標按下時，我們需要這樣設置

1.首先顯示框線，并將其置頂，然后將框線尺寸設置到最?。?,1），移動框線到鼠標所在的位置[[Cursor.x，Cursor.y]]，然后設置文本，記錄鼠標的初始位置[[Cursor.x，Cursor.y]]到X，和Y中。

畫布鼠標經過時交互

然后設置鼠標經過時，也就是拖拽時的交互。

我們需要確定鼠標拖拽時，是在哪個象限。這就需要計算鼠標拖拽時位置和鼠標最初按下時的位置，由X坐標和Y坐標的差值是正還是負，來確定是在那個象限。

如上圖所示，臨時變量代表保存的X和Y值，如果[[Cursor.x]]值和X保存的值的差值小于0，且[[Cursor.y]]值和Y保存的值的差值小于0，則是第一象限。選中1象限的元件。以此類推。其他的條件和操作也這樣設置。

然后，我們需要設置象限選中時的交互。我們需要將框線的大小重置為（1，1），位置重置為X，Y保存的值，這是為了在象限改變時，框線不會發生位置和尺寸的錯誤。

回到畫布的交互，我們需要繼續設置鼠標經過時的交互。

如果象限1選中時，設置框線的尺寸寬度為[[Math.abs(Cursor.x-LVAR1.text)]]，也就是鼠標x值和X保存的文本差值的絕對值，設置框線的尺寸高度為[[Math.abs(Cursor.y-LVAR1.text)]]，也就是鼠標y值和Y保存的文本差值的絕對值。同時將錨點設為右下角。

如果象限2選中時，復制1象限的交互。同時將錨點設為左下角。

如果象限3選中時，復制1象限的交互。同時將錨點設為左上角。

如果象限4選中時，復制1象限的交互。同時將錨點設為右上角。

鼠標松開時交互

然后我們設置鼠標松開時的交互。這里需要設定可選中矩形的錯誤狀態

鼠標松開時，將可選中的矩形的錯誤狀態設置為false，然后隱藏框線。

然后我們還需要設置框線的交互。

當鼠標松開時，需要設置隱藏當前元件，這是因為拖拽時，如果鼠標接觸了本元件，則需要隱藏它自身。

尺寸改變時，需要添加條件，如果框線區域經過了可選中的矩形，則設置可選中的矩形的錯誤狀態為true

如果框線區域未經過可選中的矩形，則設置可選中的矩形的錯誤狀態為false。

最后，將鼠標經過事件復制到可選中的矩形和框線上，以設置在拖動時，框線觸及它們時的交互。

預覽原型

設置完成后，將所有記錄坐標和象限選中狀態的矩形隱藏。

預覽原型，可以自由拖拽框線，并且框線接觸到了可選中的矩形時，顯示藍色的邊框，如果未接觸到可選中的矩形時，隱藏藍色的邊框。