介紹

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

今天，就讓我們來學(xué)習(xí)如何制作它。

預(yù)覽效果

制作思路

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

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

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

4.拖拽時，我們還需要記錄是向哪個方向拖拽的，因?yàn)椴煌较颍蚓€的大小和位置的計算方式。是不同的。我們可以將其看做有四個象限的坐標(biāo)軸。以鼠標(biāo)結(jié)束點(diǎn)判斷是在哪個象限。

制作內(nèi)容

然后讓我們來制作它。

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

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

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

給四個象限設(shè)置一個選項組和選中樣式，因?yàn)槊看沃荒苡?個象限被選中。

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

制作交互

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

畫布鼠標(biāo)按下時交互

畫布鼠標(biāo)按下時，我們需要這樣設(shè)置

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

畫布鼠標(biāo)經(jīng)過時交互

然后設(shè)置鼠標(biāo)經(jīng)過時，也就是拖拽時的交互。

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

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

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

回到畫布的交互，我們需要繼續(xù)設(shè)置鼠標(biāo)經(jīng)過時的交互。

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

如果象限2選中時，復(fù)制1象限的交互。同時將錨點(diǎn)設(shè)為左下角。

如果象限3選中時，復(fù)制1象限的交互。同時將錨點(diǎn)設(shè)為左上角。

如果象限4選中時，復(fù)制1象限的交互。同時將錨點(diǎn)設(shè)為右上角。

鼠標(biāo)松開時交互

然后我們設(shè)置鼠標(biāo)松開時的交互。這里需要設(shè)定可選中矩形的錯誤狀態(tài)

鼠標(biāo)松開時，將可選中的矩形的錯誤狀態(tài)設(shè)置為false，然后隱藏框線。

然后我們還需要設(shè)置框線的交互。

當(dāng)鼠標(biāo)松開時，需要設(shè)置隱藏當(dāng)前元件，這是因?yàn)橥献r，如果鼠標(biāo)接觸了本元件，則需要隱藏它自身。

尺寸改變時，需要添加條件，如果框線區(qū)域經(jīng)過了可選中的矩形，則設(shè)置可選中的矩形的錯誤狀態(tài)為true

如果框線區(qū)域未經(jīng)過可選中的矩形，則設(shè)置可選中的矩形的錯誤狀態(tài)為false。

最后，將鼠標(biāo)經(jīng)過事件復(fù)制到可選中的矩形和框線上，以設(shè)置在拖動時，框線觸及它們時的交互。

預(yù)覽原型

設(shè)置完成后，將所有記錄坐標(biāo)和象限選中狀態(tài)的矩形隱藏。

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