yangchunjin/SoonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新优化

Browse Source
This commit is contained in:
24kycj
2025-12-12 00:10:13 +08:00
parent 026d564c92
commit 50ff0d347a
34 changed files with 8669 additions and 7884 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/guideLines1.js
+43 -7
View File
@@ -62,7 +62,7 @@ function initAligningGuidelines(canvas) {
});
canvas.on('object:moving', function(e) {
var activeObject = e.target,
canvasObjects = canvas.getObjects(),
activeObjectCenter = activeObject.getCenterPoint(),
@@ -74,15 +74,22 @@ function initAligningGuidelines(canvas) {
horizontalInTheRange = false,
verticalInTheRange = false,
transform = canvas._currentTransform;
if (!transform) return;
// 清空辅助线数组，避免累积
verticalLines.length = 0;
horizontalLines.length = 0;
// It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,
// but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move
for (var i = canvasObjects.length; i--; ) {
if (canvasObjects[i] === activeObject) continue;
// 跳过辅助线对象，避免辅助线之间相互对齐产生重影
if (canvasObjects[i].isGuideLine) continue;
var objectCenter = canvasObjects[i].getCenterPoint(),
objectLeft = objectCenter.x,
@@ -202,11 +209,40 @@ function initAligningGuidelines(canvas) {
});
canvas.on('after:render', function() {
// 合并相同 x 坐标的竖向辅助线（使用四舍五入处理浮点数精度问题）
var mergedVerticalLines = {};
for (var i = verticalLines.length; i--; ) {
drawVerticalLine(verticalLines[i]);
var line = verticalLines[i];
// 使用四舍五入到整数作为 key，避免浮点数精度问题
var key = Math.round(line.x);
if (!mergedVerticalLines[key]) {
mergedVerticalLines[key] = { x: line.x, y1: line.y1, y2: line.y2 };
} else {
// 合并 y 范围
mergedVerticalLines[key].y1 = Math.min(mergedVerticalLines[key].y1, line.y1);
mergedVerticalLines[key].y2 = Math.max(mergedVerticalLines[key].y2, line.y2);
}
}
for (var key in mergedVerticalLines) {
drawVerticalLine(mergedVerticalLines[key]);
}
// 合并相同 y 坐标的横向辅助线（使用四舍五入处理浮点数精度问题）
var mergedHorizontalLines = {};
for (var i = horizontalLines.length; i--; ) {
drawHorizontalLine(horizontalLines[i]);
var line = horizontalLines[i];
// 使用四舍五入到整数作为 key，避免浮点数精度问题
var key = Math.round(line.y);
if (!mergedHorizontalLines[key]) {
mergedHorizontalLines[key] = { y: line.y, x1: line.x1, x2: line.x2 };
} else {
// 合并 x 范围
mergedHorizontalLines[key].x1 = Math.min(mergedHorizontalLines[key].x1, line.x1);
mergedHorizontalLines[key].x2 = Math.max(mergedHorizontalLines[key].x2, line.x2);
}
}
for (var key in mergedHorizontalLines) {
drawHorizontalLine(mergedHorizontalLines[key]);
}
verticalLines.length = horizontalLines.length = 0;
});
public/js/guideLines2.js
+43 -7
View File
@@ -62,7 +62,7 @@ function initAligningGuidelines(canvas) {
});
canvas.on('object:moving', function(e) {
var activeObject = e.target,
canvasObjects = canvas.getObjects(),
activeObjectCenter = activeObject.getCenterPoint(),
@@ -74,15 +74,22 @@ function initAligningGuidelines(canvas) {
horizontalInTheRange = false,
verticalInTheRange = false,
transform = canvas._currentTransform;
if (!transform) return;
// 清空辅助线数组，避免累积
verticalLines.length = 0;
horizontalLines.length = 0;
// It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,
// but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move
for (var i = canvasObjects.length; i--; ) {
if (canvasObjects[i] === activeObject) continue;
// 跳过辅助线对象，避免辅助线之间相互对齐产生重影
if (canvasObjects[i].isGuideLine) continue;
var objectCenter = canvasObjects[i].getCenterPoint(),
objectLeft = objectCenter.x,
@@ -202,11 +209,40 @@ function initAligningGuidelines(canvas) {
});
canvas.on('after:render', function() {
// 合并相同 x 坐标的竖向辅助线（使用四舍五入处理浮点数精度问题）
var mergedVerticalLines = {};
for (var i = verticalLines.length; i--; ) {
drawVerticalLine(verticalLines[i]);
var line = verticalLines[i];
// 使用四舍五入到整数作为 key，避免浮点数精度问题
var key = Math.round(line.x);
if (!mergedVerticalLines[key]) {
mergedVerticalLines[key] = { x: line.x, y1: line.y1, y2: line.y2 };
} else {
// 合并 y 范围
mergedVerticalLines[key].y1 = Math.min(mergedVerticalLines[key].y1, line.y1);
mergedVerticalLines[key].y2 = Math.max(mergedVerticalLines[key].y2, line.y2);
}
}
for (var key in mergedVerticalLines) {
drawVerticalLine(mergedVerticalLines[key]);
}
// 合并相同 y 坐标的横向辅助线（使用四舍五入处理浮点数精度问题）
var mergedHorizontalLines = {};
for (var i = horizontalLines.length; i--; ) {
drawHorizontalLine(horizontalLines[i]);
var line = horizontalLines[i];
// 使用四舍五入到整数作为 key，避免浮点数精度问题
var key = Math.round(line.y);
if (!mergedHorizontalLines[key]) {
mergedHorizontalLines[key] = { y: line.y, x1: line.x1, x2: line.x2 };
} else {
// 合并 x 范围
mergedHorizontalLines[key].x1 = Math.min(mergedHorizontalLines[key].x1, line.x1);
mergedHorizontalLines[key].x2 = Math.max(mergedHorizontalLines[key].x2, line.x2);
}
}
for (var key in mergedHorizontalLines) {
drawHorizontalLine(mergedHorizontalLines[key]);
}
verticalLines.length = horizontalLines.length = 0;
});