优化选中遮罩层样式
This commit is contained in:
@@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user