2023年【Axure 教程】模擬 Windows 鼠標拖拽框選效果

【Axure教程】模擬Windows鼠標拖拽框選效果先來看看我們今日要參照實現(xiàn)的效果：

這個我信任許多人都不會覺得生疏，這是Windows中鼠標拖拽框選的效果，一般用于選取多個文件或文件夾，在Axure中也有這種框選操作：

這種設(shè)計多用于客戶端或一些設(shè)計類的工具軟件中，今日我準備用Axure來實現(xiàn)這個拖拽框選的效果。

先來看看最終效果（體驗傳送門）：

我也常常問自己，為什么要做這種既無聊又無用的設(shè)計，這種設(shè)計在實際業(yè)務(wù)中會用到的幾率不到0.01%，我常常調(diào)侃自己說是“不務(wù)正業(yè)”，但是我始終信任，作為一名產(chǎn)品經(jīng)理，想長期保有對產(chǎn)品設(shè)計熱忱的秘訣之一，就是始終保持對一切新生事物的奇怪???心，并探究一切可能的未知，有時候不肯定要追求有用，而是只要你覺得好玩，那就夠了！

我似乎扯遠了，接下來開頭動手實現(xiàn)吧。

首先我們來分析一下框選的動作：

鼠標按住并拖拽時，拉出框選區(qū)域；框選區(qū)域以鼠標點擊位置作為原點，鼠標移動時，依據(jù)鼠標位置動態(tài)調(diào)整框選區(qū)域大小；松開鼠標時，隱蔽框選區(qū)域。一、外觀

首先，我們需要繪制一個矩形作為【舞臺】，由于在頁面上直接操作的話，Axure供應(yīng)的交互很少，有許多交互做不了：

所以我們新建一個矩形作為【舞臺】，在【舞臺】做操作，能用到的交互就多了許多：

【舞臺】效果：

鼠標拖拽時拉出的框選區(qū)域也是一個矩形，我們再添加一個矩形并設(shè)置好樣式，命名為【框選區(qū)域】，由于我們是需要它在鼠標拖拽時才消失，所以默認我們給它【隱蔽】：

二、交互

接下來我們開頭設(shè)置交互，首先我們的【舞臺】在Axure是固定大小的，但是在預(yù)覽的時候，我們盼望它能依據(jù)窗口自動調(diào)整大小，所以這里給它添加了一個【載入時】【設(shè)置尺寸】的大事，讓它依據(jù)掃瞄器窗口大小調(diào)整自身大?。?/p>

這樣我們在掃瞄器中掃瞄時，【舞臺】就會自動全屏了：

接下來給舞臺添加【鼠標按下時】的大事：

主要做3件事：

將【框選區(qū)域】的尺寸設(shè)為0*0，這樣框選區(qū)域就等于只有一個看不見的點；把【框選區(qū)域】移動到鼠標當(dāng)前所在位置；把【框選區(qū)域】顯示出來，但此時是看不到任何東西的。此時假如我們松開了鼠標，則將【框選區(qū)域】隱蔽掉：

接下來就是這個交互的重點，當(dāng)【鼠標移動時】，依據(jù)鼠標位置來調(diào)整【框選區(qū)域】大小：

這里涉及到【框選區(qū)域】的尺寸計算，我們一般都是習(xí)慣自左上向右下拖動，此時【框選區(qū)域】的寬度就是鼠標所在的x值減去【框選區(qū)域】的x值，高度則是鼠標所在y值減去【框選區(qū)域】y值，我們來看看效果：

整體效果出來了，但是有點卡頓，有時候還不肯定能勝利，這里我就只能憑閱歷解決了，當(dāng)鼠標在【舞臺】移動時，雖然【框選區(qū)域】沒有顯示出來，但是依舊會執(zhí)行動作，會消耗肯定資源，所以這里我給【鼠標移動時】的大事加了一個條件，就是只有【框選區(qū)域】顯示出來時才執(zhí)行動作：

由于我的錄屏軟件一開又會消失卡頓的現(xiàn)象，這里我就不放調(diào)整后的效果圖了，各位可自行體驗。

這里還有問題，就是從左上向右下拉的時候，框選區(qū)域是正常的，但是假如發(fā)覺區(qū)域拉大了，從右下向左上移動，【框選區(qū)域】卻不會縮小，如下：

這個是由于我們是鼠標先動，區(qū)域跟著調(diào)整，從右下往左上移動的時候，鼠標被【框選區(qū)域】攔住了，因此【舞臺】無法檢測鼠標的移動