即時互動體驗區 (Live Interactive Playground)
在圖片上點擊滑鼠開始標註,連點兩下 (Double Click) 閉合多邊形
Polygon Annotation Target
操作方式:單擊 (Click) 新增頂點,移動滑鼠預覽連線,連點兩下 (Double Click) 結束並閉合多邊形。
多邊形頂點座標輸出 (Output Coordinates) 0 個頂點
// 尚未完成框選,請在左側圖片上點擊繪製多邊形...
快速開始程式碼範例

載入 jQuery、jquery.line 與 myclip.js 即可對任何 DOM 元素或圖片啟用多邊形框選:

<script src="jquery.min.js"></script>
<script src="jquery.line.js"></script>
<script src="myclip-latest.js"></script>

<script>
$(document).ready(function(){
  $("#demoTarget").myclip({
    'line-color': '#818cf8',
    'stroke': 2,
    'isPolygon': true,
    'after_func': function(doms, polygonData) {
      console.log('完成框選,頂點座標:', polygonData);
      // polygonData 為陣列:[{x: 120, y: 80}, {x: 250, y: 140}, ...]
    }
  });
});
</script>
參數配置手冊 (Options Reference)
參數名稱 預設值 說明
line-color 'red' 標註連線與框線之色彩 (Hex / RGB / CSS Color)。
stroke 1 線條粗細 (px 數值)。
isPolygon true 是否在雙擊結束時自動連回起始點閉合為多邊形。
z-index 1000 線段圖層之 CSS z-index 層級。
after_func function 框選完成回呼函式,傳入 (polygon_doms, polygon_data)。
檔案下載與版本演進 (Downloads & Changelog)
V 0.3 (2026-08-24)
版本更新日誌 (Changelog):
  • 0.3 (2026-08-24):全面修復多邊形繪製座標偏移問題。將座標基準改為 dom.offset()pageX/pageY 換算,完美相容 Bootstrap 5 卡片、Flex/Grid 佈局與捲軸偏移。
  • 0.2 (2019-07-30):新增 ondraw_func 即時繪製回呼與 max_draw_lines 最大線段數限制支援。
  • 0.1 (2014-02-20):初版釋出,支援滑鼠連線繪製、雙擊多邊形閉合與 after_func 回呼。