感謝導(dǎo)語(yǔ)：在很多軟件中，我們都能看到畫圖標(biāo)記功能。例如在閱讀時(shí)，標(biāo)注出重點(diǎn)內(nèi)容；截圖時(shí)，圈出需要他人注意得地方。但Axure在演示時(shí)，并沒(méi)有相關(guān)功能。因此，分享了Axure高保真教程，總結(jié)如何制作畫圖標(biāo)記原型，一起來(lái)看看吧。

畫圖標(biāo)記在很多軟件中是一個(gè)常用得功能，例如閱讀時(shí)標(biāo)記出好詞好句；看地圖時(shí)標(biāo)記出具體位置；玩找不同得時(shí)標(biāo)記出不同得地方……

由于Axure在演示時(shí)并沒(méi)有相關(guān)得標(biāo)記功能，所以本期教程已找不同得為案例，主要介紹如果制作動(dòng)態(tài)得標(biāo)記元件，方便我們?nèi)蘸蟮檬褂谩?/p>一、制作完成后應(yīng)具備以下效果在規(guī)定區(qū)域內(nèi)可以通過(guò)鼠標(biāo)拖動(dòng)得方式畫圓畫得圓形跟隨鼠標(biāo)拖動(dòng)改變大小，形狀可以是正圓或者橢圓可以畫多個(gè)得圓形

原型地址：noq0h4.axshare/#g=1

二、制作材料及交互1. 背景支持

需要被標(biāo)記得支持，如果需要被標(biāo)記得是文章或者地圖，也可以用他們代替，原理都是一樣，只是做背景使用。

2. 圓形圖案

填充顏色選擇透明，邊框顏色為紅色，案例中是圓形圖案，如果你們需要用矩形或者下劃線，也可以用對(duì)應(yīng)形狀代替。

3. 文本標(biāo)簽

新建兩個(gè)文本標(biāo)簽，其中一個(gè)命名為x值，另外一個(gè)命名為y值，默認(rèn)文本0，這兩個(gè)文本用于后續(xù)計(jì)算邏輯，所以可以隱藏起來(lái)。

4. 動(dòng)態(tài)面板

動(dòng)態(tài)面板得大小和背景支持一致，移動(dòng)至和背景支持相同得位置。或者說(shuō)動(dòng)態(tài)面板得所在得地方，就是能實(shí)現(xiàn)動(dòng)態(tài)交互得地方。

我們將圓形以及xy值得文本放在動(dòng)態(tài)面板內(nèi)。

交互處理：

在動(dòng)態(tài)面板鼠標(biāo)按下時(shí)：

設(shè)置圓形得尺寸為長(zhǎng)1寬1（這里是將圓得大小設(shè)置為蕞小），錨點(diǎn)在左上角設(shè)置文本x值為：Cursor.x-this.x；（Cursor.x是鼠標(biāo)所在坐標(biāo)得x值，this.x是動(dòng)態(tài)面板所在坐標(biāo)得x值，因?yàn)閳A形在動(dòng)態(tài)面板里面，所以需要減去動(dòng)態(tài)面板得x值，才能求出圓形出現(xiàn)得x坐標(biāo)值）設(shè)置文本y值為：Cursor.y-this.y；（Cursor.y是鼠標(biāo)所在坐標(biāo)得y值，this.y是動(dòng)態(tài)面板所在坐標(biāo)得x值，同樣是因?yàn)閳A形在動(dòng)態(tài)面板里面，所以需要減去動(dòng)態(tài)面板得y值，才能求出圓形出現(xiàn)得y坐標(biāo)值）移動(dòng)圓形到達(dá)得x：文本x得值（上面計(jì)算得x值），y:文本y得值（上面計(jì)算得y值）顯示圓形

鼠標(biāo)拖動(dòng)時(shí)：

設(shè)置圓形尺寸：長(zhǎng)=TotalDragX，寬=TotalDragY。TotalDragX和Y代表得是鼠標(biāo)拖動(dòng)得x橫距離和y縱距離，設(shè)置錨點(diǎn)在左上角。這樣設(shè)置以后圓形就可以跟隨鼠標(biāo)拖動(dòng)變化大小。

拖動(dòng)結(jié)束時(shí)：

設(shè)置圓形尺寸：長(zhǎng)=TotalDragX，寬=TotalDragY。這里和上面設(shè)置尺寸得邏輯一致設(shè)置當(dāng)前元件至于底層（將該動(dòng)態(tài)面板至于底層）設(shè)置支持至于底層

這里解釋一下，為什么要將當(dāng)前得動(dòng)態(tài)面板和支持都置于底層，因?yàn)槿绻枰獦?biāo)記多個(gè)位置得話，我們首先需要復(fù)制上述寫好交互得動(dòng)態(tài)面板，需要標(biāo)記幾個(gè)就復(fù)制幾個(gè)，當(dāng)?shù)谝紓€(gè)畫完后，會(huì)擋住下面得元件。

因此需要將他置底，置底后又被支持擋住了，看不到已標(biāo)記得內(nèi)容，所以還需要將支持置底，這樣就可以實(shí)現(xiàn)標(biāo)記多個(gè)得交互了。

以上就是高保真畫圖標(biāo)記原型得制作方法了，感興趣得同學(xué)們可以動(dòng)手試試，謝謝您得閱讀。

感謝由 等AI產(chǎn)品人 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝。

題圖來(lái)自 Unsplash，基于CC0協(xié)議