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

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

由于Axure在演示時(shí)并沒(méi)有相關(guān)的標(biāo)記功能，所以本期教程已找不同的游戲?yàn)榘咐?，主要介紹如果制作動(dòng)態(tài)的標(biāo)記元件，方便我們?nèi)蘸蟮氖褂谩?/p>

一、制作完成后應(yīng)具備以下效果

• 在規(guī)定區(qū)域內(nèi)可以通過(guò)鼠標(biāo)拖動(dòng)的方式畫(huà)圓
• 畫(huà)的圓形跟隨鼠標(biāo)拖動(dòng)改變大小，形狀可以是正圓或者橢圓
• 可以畫(huà)多個(gè)的圓形

二、制作材料及交互

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)至和背景圖片相同的位置?；蛘哒f(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ù)制上述寫(xiě)好交互的動(dòng)態(tài)面板，需要標(biāo)記幾個(gè)就復(fù)制幾個(gè)，當(dāng)?shù)谝粋€(gè)畫(huà)完后，會(huì)擋住下面的元件。

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

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

本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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