以 jQuery 為基礎的圖片與 DOM 多邊形框選標註工具,支援即時連線預覽、雙擊閉合多邊形、座標即時收集與回呼事件處理。
// 尚未完成框選,請在左側圖片上點擊繪製多邊形...
載入 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>
| 參數名稱 | 預設值 | 說明 |
|---|---|---|
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)。 |
dom.offset() 與 pageX/pageY 換算,完美相容 Bootstrap 5 卡片、Flex/Grid 佈局與捲軸偏移。ondraw_func 即時繪製回呼與 max_draw_lines 最大線段數限制支援。after_func 回呼。