优化选中遮罩层样式

This commit is contained in:
24kycj
2025-12-15 19:44:43 +08:00
parent 3c4080f3f1
commit 94f7841873
+36
View File
@@ -1541,6 +1541,39 @@ window.handleObjectSelected = handleObjectSelected;
// 防止重复初始化事件监听器
var _canvasEventsInitialized = false;
// 在遮罩层之上绘制当前选中对象的边框,避免被遮住
function drawActiveObjectBorder(currentCanvas, ctx) {
if (!currentCanvas || !ctx) return;
const active = currentCanvas.getActiveObject();
if (!active) return;
// 辅助线不需要额外描边
if (active.isGuideLine) return;
const coords = active.getCoords(true);
if (!coords || coords.length === 0) return;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = '#9013FE';
// 根据当前缩放比例调整线宽,避免看起来太虚
let lineWidth = 2;
if (typeof zoom === 'number' && zoom > 0) {
lineWidth = 2 / zoom; // 目标是屏幕上大约 2px 宽
}
ctx.lineWidth = lineWidth;
// 使用实线边框,提高清晰度
if (ctx.setLineDash) {
ctx.setLineDash([]);
}
ctx.moveTo(coords[0].x, coords[0].y);
for (let i = 1; i < coords.length; i++) {
ctx.lineTo(coords[i].x, coords[i].y);
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
function initCanvasEvents() {
// 如果已经初始化过,直接返回
if (_canvasEventsInitialized) {
@@ -1779,6 +1812,9 @@ function initCanvasEvents() {
ctx.restore();
}
});
// 最后再补绘当前选中对象的边框,确保不会被遮罩层挡住
drawActiveObjectBorder(currentCanvas, ctx);
});
});
}