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

畫圖標記在很多軟件中是一個常用得功能，例如閱讀時標記出好詞好句；看地圖時標記出具體位置；玩找不同得感謝原創(chuàng)者分享時標記出不同得地方……

由于Axure在演示時并沒有相關得標記功能，所以本期教程已找不同得感謝原創(chuàng)者分享為案例，主要介紹如果制作動態(tài)得標記元件，方便我們日后得使用。

一、制作完成后應具備以下效果在規(guī)定區(qū)域內可以通過鼠標拖動得方式畫圓畫得圓形跟隨鼠標拖動改變大小，形狀可以是正圓或者橢圓可以畫多個得圓形

原型地址：感謝分享noq0h4.axshare感謝原創(chuàng)分享者/#g=1

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

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

2. 圓形圖案

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

3. 文本標簽

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

4. 動態(tài)面板

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

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

交互處理：

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

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

鼠標拖動時：

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

拖動結束時：

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

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

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

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

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

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