2023年【Axure 教程】模擬 Windows 鼠標(biāo)拖拽框選效果

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

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

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

先來看看最終效果（體驗(yàn)傳送門）：

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

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

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

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

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

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

【舞臺】效果：

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

二、交互

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

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

接下來給舞臺添加【鼠標(biāo)按下時(shí)】的大事：

主要做3件事：

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

接下來就是這個交互的重點(diǎn)，當(dāng)【鼠標(biāo)移動時(shí)】，依據(jù)鼠標(biāo)位置來調(diào)整【框選區(qū)域】大?。?/p>

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

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

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

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

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