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

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

由于Axure在演示時并沒有相關得標記功能，所以本期教程已找不同得為案例，主要介紹如果制作動態得標記元件，方便我們日后得使用。

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

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

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

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

2. 圓形圖案

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

3. 文本標簽

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

4. 動態面板

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

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

交互處理：

在動態面板鼠標按下時：

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

鼠標拖動時：

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

拖動結束時：

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

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

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

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

感謝由 等AI產品人 來自互聯網發布于人人都是產品經理，未經許可，禁止感謝。

題圖來自 Unsplash，基于CC0協議