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

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

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

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

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

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

2. 圓形圖案

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

3. 文本標(biāo)簽

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

4. 動態(tài)面板

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

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

交互處理：

在動態(tài)面板鼠標(biāo)按下時：

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

鼠標(biāo)拖動時：

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

拖動結(jié)束時：

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

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

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

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

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

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