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-10 01:40:03 +08:00
parent 378593047d
commit 026d564c92
8 changed files with 1591 additions and 965 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design1.html
+15 -14
View File
@@ -219,15 +219,15 @@
overflow: hidden;
}
/* 2. 替换：标尺样式 (改为 70% 透明 + 增加鼠标手势) */
/* 2. 替换：标尺样式 (改为更明显的颜色 + 增加鼠标手势) */
.ruler-horizontal {
position: absolute;
top: 0;
left: 0;
height: 20px;
/* 改为 rgba 实现 70% 透明 */
background-color: rgba(44, 44, 44, 0.7) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
/* 改为更明显的颜色，不透明度提高到 0.9 */
background-color: rgba(44, 44, 44, 0.9) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1000;
/* 鼠标移上去显示上下调整箭头，提示可拖拽 */
cursor: row-resize;
@@ -238,9 +238,9 @@
top: 0;
left: 0;
width: 20px;
/* 改为 rgba 实现 70% 透明 */
background-color: rgba(44, 44, 44, 0.7) !important;
border-right: 1px solid rgba(255, 255, 255, 0.1);
/* 改为更明显的颜色，不透明度提高到 0.9 */
background-color: rgba(44, 44, 44, 0.9) !important;
border-right: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1000;
/* 鼠标移上去显示左右调整箭头 */
cursor: col-resize;
@@ -252,22 +252,23 @@
left: 0;
width: 20px;
height: 20px;
background-color: rgba(44, 44, 44, 0.7) !important;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(44, 44, 44, 0.9) !important;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1001;
}
/* 3. 新增：拖拽过程中的辅助线样式 */
.guide-line-drag {
position: absolute;
background-color: #00FFFF;
/* 青色高亮 */
background-color: #0066FF;
/* 深蓝色高亮 */
z-index: 9999;
pointer-events: none;
/* 让鼠标穿透，不影响拖拽事件 */
box-shadow: 0 0 4px #00FFFF;
/* 发光效果 */
box-shadow: 0 0 6px #0066FF;
/* 增强发光效果 */
opacity: 0.9;
}
</style>
</head>
design2.html
+26 -7
View File
@@ -21,9 +21,12 @@
top: 0;
left: 0;
height: 20px;
background-color: #2C2C2C;
border-bottom: 1px solid #1E1E1E;
/* 改为更明显的颜色，不透明度提高到 0.9 */
background-color: rgba(44, 44, 44, 0.9) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1000;
/* 鼠标移上去显示上下调整箭头，提示可拖拽 */
cursor: row-resize;
}
.ruler-vertical {
@@ -31,9 +34,12 @@
top: 0;
left: 0;
width: 20px;
background-color: #2C2C2C;
border-right: 1px solid #1E1E1E;
/* 改为更明显的颜色，不透明度提高到 0.9 */
background-color: rgba(44, 44, 44, 0.9) !important;
border-right: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1000;
/* 鼠标移上去显示左右调整箭头 */
cursor: col-resize;
}
.ruler-corner {
@@ -42,15 +48,28 @@
left: 0;
width: 20px;
height: 20px;
background-color: #2C2C2C;
border-right: 1px solid #1E1E1E;
border-bottom: 1px solid #1E1E1E;
background-color: rgba(44, 44, 44, 0.9) !important;
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
z-index: 1001;
}
.canvas-wrapper {
position: relative;
}
/* 拖拽过程中的辅助线样式 */
.guide-line-drag {
position: absolute;
background-color: #0066FF;
/* 深蓝色高亮 */
z-index: 9999;
pointer-events: none;
/* 让鼠标穿透，不影响拖拽事件 */
box-shadow: 0 0 6px #0066FF;
/* 增强发光效果 */
opacity: 0.9;
}
</style>
</head>
lib/design1/core.js
+76 -18
View File
@@ -2305,6 +2305,11 @@ function initCanvasEvents() {
let idx = getIndex(event.target);
if (idx <= 0) return;
let objData = objs[idx - 1];
// 安全检查：确保 objData 存在且有 type 属性
if (!objData || typeof objData.type === 'undefined') {
console.warn('objData is undefined or missing type at index', idx - 1);
return;
}
let target = event.target;
if ([3, 4, 10].includes(objData.type)) {
@@ -2327,10 +2332,10 @@ function initCanvasEvents() {
// 8. 【完美修复版】渲染后绘制：外部蒙版 + 中心圆孔 (修复三角形Bug)
// ==================================================
currentCanvas.on('after:render', function () {
const ctx = currentCanvas.getContext();
let bgObj = (currentCanvas === canvas1) ? background_image1 : background_image2;
if (bgObj) {
const ctx = currentCanvas.getContext();
const width = currentCanvas.width;
const height = currentCanvas.height;
@@ -2378,6 +2383,32 @@ function initCanvasEvents() {
ctx.fill();
ctx.restore();
}
// 在遮罩之后重新绘制辅助线，确保辅助线在最上层
const objects = currentCanvas.getObjects();
objects.forEach(obj => {
if (obj.isGuideLine) {
ctx.save();
// 应用对象的变换矩阵
const m = obj.calcTransformMatrix();
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
// 设置透明度
ctx.globalAlpha = obj.opacity || 1;
// 应用阴影
if (obj.shadow) {
ctx.shadowColor = obj.shadow.color;
ctx.shadowBlur = obj.shadow.blur;
ctx.shadowOffsetX = obj.shadow.offsetX;
ctx.shadowOffsetY = obj.shadow.offsetY;
}
// 使用 Fabric 对象的内置渲染方法
obj._render(ctx);
ctx.restore();
}
});
});
});
}
@@ -2469,30 +2500,54 @@ function initRulers() {
// --- 2. 在画布中创建辅助线 ---
function createFabricGuide(type, domX, domY) {
// 计算画布内的逻辑坐标 (减去 margin 偏移，除以缩放)
let boxOffset = canvasBox.offset();
let wrapperOffset = canvasWrapper.offset();
// domX 和 domY 是相对于 canvas-wrapper 的坐标
// 需要转换为相对于 canvas_box 的坐标，然后再转换为 Fabric 画布坐标
// 计算相对于 canvasBox 的像素位置
let relX = domX - (boxOffset.left - wrapperOffset.left);
let relY = domY - (boxOffset.top - wrapperOffset.top);
// 获取 canvas_box 相对于 canvas-wrapper 的位置
let boxPosition = canvasBox.position();
let boxMarginLeft = parseFloat(canvasBox.css('margin-left')) || 0;
let boxMarginTop = parseFloat(canvasBox.css('margin-top')) || 0;
// 计算相对于 canvas_box 的坐标（减去 box 在 wrapper 中的位置和 margin）
let relX = domX - boxPosition.left - boxMarginLeft;
let relY = domY - boxPosition.top - boxMarginTop;
// 转为 Fabric 坐标 (除以 zoom)
let canvasX = relX / zoom;
let canvasY = relY / zoom;
// 构造线对象
// 获取画布的实际尺寸和可见区域尺寸
let canvasWidth = canvas.width || 10000;
let canvasHeight = canvas.height || 10000;
// 获取可见区域的尺寸（考虑缩放）
let visibleWidth = canvasWrapper.width() || canvasWidth;
let visibleHeight = canvasWrapper.height() || canvasHeight;
// 使用足够大的固定值，确保辅助线能够覆盖整个画布和可见区域
// 使用 100000 确保无论画布多大、如何缩放，都能覆盖整个可见区域
let lineExtent = 100000;
// 构造线对象，使用足够大的范围确保覆盖整个画布
// 线的起点和终点要足够远，确保覆盖整个可见区域
let linePoints = [];
if (type === 'horizontal') {
linePoints = [-5000, canvasY, 5000, canvasY];
// 水平线：从很远的左边到很远的右边
linePoints = [-lineExtent, canvasY, lineExtent, canvasY];
} else {
linePoints = [canvasX, -5000, canvasX, 5000];
// 垂直线：从很远的上面到很远的下面
linePoints = [canvasX, -lineExtent, canvasX, lineExtent];
}
let guideLine = new fabric.Line(linePoints, {
stroke: '#00FFFF',
stroke: '#0066FF',
strokeWidth: 1 / zoom,
strokeDashArray: [5, 5],
opacity: 0.9,
shadow: {
color: '#0066FF',
blur: 6,
offsetX: 0,
offsetY: 0,
affectStroke: true
},
selectable: true,
evented: true,
hasControls: false,
@@ -2501,6 +2556,9 @@ function initRulers() {
lockScalingX: true,
lockScalingY: true,
hoverCursor: type === 'horizontal' ? 'ns-resize' : 'ew-resize',
perPixelTargetFind: false, // 使用边界框检测而不是像素检测
targetFindTolerance: 10, // 增加点击容差，扩大可点击区域（像素）
padding: 10, // 增加选择边界的内边距
isGuideLine: true,
ignoreSave: true
});
@@ -2508,9 +2566,9 @@ function initRulers() {
// 限制移动方向
guideLine.on('moving', function (e) {
if (type === 'horizontal') {
this.left = -5000;
this.left = -lineExtent;
} else {
this.top = -5000;
this.top = -lineExtent;
}
});
@@ -2558,14 +2616,14 @@ function initRulers() {
function drawHorizontal() {
ctxH.clearRect(0, 0, currentCanvasWidth, rulerHeight);
ctxH.strokeStyle = '#999';
ctxH.strokeStyle = '#666';
ctxH.lineWidth = 1;
ctxH.beginPath();
ctxH.moveTo(0, 19);
ctxH.lineTo(currentCanvasWidth, 19);
ctxH.stroke();
ctxH.fillStyle = '#CCC';
ctxH.fillStyle = '#888';
ctxH.font = '9px Arial';
ctxH.textAlign = 'left';
ctxH.textBaseline = 'top';
@@ -2626,14 +2684,14 @@ function initRulers() {
function drawVertical() {
ctxV.clearRect(0, 0, rulerWidth, currentCanvasHeight);
ctxV.strokeStyle = '#999';
ctxV.strokeStyle = '#666';
ctxV.lineWidth = 1;
ctxV.beginPath();
ctxV.moveTo(19, 0);
ctxV.lineTo(19, currentCanvasHeight);
ctxV.stroke();
ctxV.fillStyle = '#CCC';
ctxV.fillStyle = '#888';
ctxV.font = '9px Arial';
ctxV.textAlign = 'center';
ctxV.textBaseline = 'middle';
lib/design1/output.js
+103 -5
View File
@@ -14,7 +14,8 @@ function display_func(img1, img2, img3) {
$("#component_type").text(language_str("bg"));//"背景"
canvas1.discardActiveObject().renderAll();
canvas2.discardActiveObject().renderAll();
let _objs1 = canvas1.getObjects();
// 过滤掉辅助线
let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine);
let g1 = [];
let g3 = [];
let g5 = [];
@@ -24,9 +25,16 @@ function display_func(img1, img2, img3) {
let black_top = 0;//黑色顶裁剪
let all_left = 0;//预览图左裁剪
let all_top = 0;//预览图顶裁剪
let list1 = [..._objs1]
// 过滤掉辅助线
let list1 = _objs1.filter(obj => !obj.isGuideLine);
for (let item of list1) {
let idx = getIndex(item, canvas1);
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
continue;
}
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
@@ -149,7 +157,8 @@ function display_func(img1, img2, img3) {
top: black_top,
left: black_left
});
let _objs2 = canvas2.getObjects();
// 过滤掉辅助线
let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine);
let g2 = [];
let g4 = [];
let g6 = [];
@@ -160,7 +169,14 @@ function display_func(img1, img2, img3) {
all_top = 0;
all_left = 0;
for (let item of _objs2) {
let idx = getIndex(item, canvas2);
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
continue;
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
}
@@ -362,7 +378,9 @@ function output(callback = null, _save = save) {
let black_top = 0;//黑色顶裁剪
let all_left = 0;//预览图左裁剪
let all_top = 0;//预览图顶裁剪
for (let item of _objs1) {
// 过滤掉辅助线
let filteredObjs1 = _objs1.filter(obj => !obj.isGuideLine);
for (let item of filteredObjs1) {
let idx = getIndex(item, canvas1);
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
@@ -372,6 +390,12 @@ function output(callback = null, _save = save) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()));
}
g3.push(fabric.util.object.clone(item));
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
continue;
}
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
continue;//计数器 或 合成文字
}
@@ -485,8 +509,16 @@ function output(callback = null, _save = save) {
black_top = 0;//黑色顶裁剪
all_left = 0;//黑色左裁剪
all_top = 0;//黑色顶裁剪
for (let item of _objs2) {
// 过滤掉辅助线
let filteredObjs2 = _objs2.filter(obj => !obj.isGuideLine);
for (let item of filteredObjs2) {
let idx = getIndex(item, canvas2);
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
continue;
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()));
}
@@ -635,8 +667,19 @@ function output(callback = null, _save = save) {
op.frontBlackPic = '';
op.backBlackPic = '';
for (let item of _objs1) {
// 跳过辅助线
if (item.isGuideLine) {
continue;
}
let idx = getIndex(item, canvas1);
if (idx == 0) continue;//background-image
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined') {
continue;
}
let type = objs1[idx - 1].type;
if (type == 2) {
//out_pic
@@ -750,8 +793,19 @@ function output(callback = null, _save = save) {
}
//obj2
for (let item of _objs2) {
// 跳过辅助线
if (item.isGuideLine) {
continue;
}
let idx = getIndex(item, canvas2);
if (idx == 0) continue;//background-image
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined') {
continue;
}
let type = objs2[idx - 1].type;
if (type == 2) {
//out_pic
@@ -941,9 +995,31 @@ function cleanupSrcFields(jsonObjects, objsArray) {
}
function saveAs(op1, callback) {
// 临时移除辅助线，保存后再恢复
let guideLines1 = [];
let guideLines2 = [];
canvas1.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines1.push(obj);
canvas1.remove(obj);
}
});
canvas2.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines2.push(obj);
canvas2.remove(obj);
}
});
let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
// 恢复辅助线
guideLines1.forEach(obj => canvas1.add(obj));
guideLines2.forEach(obj => canvas2.add(obj));
canvas1.renderAll();
canvas2.renderAll();
// 清理不需要的 src 字段
cleanupSrcFields(j.objects, objs1);
cleanupSrcFields(b.objects, objs2);
@@ -975,9 +1051,31 @@ function saveAs(op1, callback) {
}
function save(op1, callback) {
// 临时移除辅助线，保存后再恢复
let guideLines1 = [];
let guideLines2 = [];
canvas1.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines1.push(obj);
canvas1.remove(obj);
}
});
canvas2.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines2.push(obj);
canvas2.remove(obj);
}
});
let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
let b = canvas2.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
// 恢复辅助线
guideLines1.forEach(obj => canvas1.add(obj));
guideLines2.forEach(obj => canvas2.add(obj));
canvas1.renderAll();
canvas2.renderAll();
// 清理不需要的 src 字段
cleanupSrcFields(j.objects, objs1);
cleanupSrcFields(b.objects, objs2);
lib/design2/core.js
+268 -9
View File
@@ -301,11 +301,196 @@ function initRulers() {
canvas1.on('after:render', function () {
drawHorizontalRuler();
drawVerticalRuler();
// 重新绘制辅助线（确保在遮罩之上）
const ctx = canvas1.getContext();
const objects = canvas1.getObjects();
objects.forEach(obj => {
if (obj.isGuideLine) {
ctx.save();
const m = obj.calcTransformMatrix();
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
ctx.globalAlpha = obj.opacity || 1;
if (obj.shadow) {
ctx.shadowColor = obj.shadow.color;
ctx.shadowBlur = obj.shadow.blur;
ctx.shadowOffsetX = obj.shadow.offsetX;
ctx.shadowOffsetY = obj.shadow.offsetY;
}
obj._render(ctx);
ctx.restore();
}
});
});
canvas2.on('after:render', function () {
drawHorizontalRuler();
drawVerticalRuler();
// 重新绘制辅助线（确保在遮罩之上）
const ctx = canvas2.getContext();
const objects = canvas2.getObjects();
objects.forEach(obj => {
if (obj.isGuideLine) {
ctx.save();
const m = obj.calcTransformMatrix();
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
ctx.globalAlpha = obj.opacity || 1;
if (obj.shadow) {
ctx.shadowColor = obj.shadow.color;
ctx.shadowBlur = obj.shadow.blur;
ctx.shadowOffsetX = obj.shadow.offsetX;
ctx.shadowOffsetY = obj.shadow.offsetY;
}
obj._render(ctx);
ctx.restore();
}
});
});
// --- 辅助线功能 (参考 design1) ---
// canvasWrapper 已在上面声明，直接使用
const canvasBox = $('#canvas-div'); // design2 使用 canvas-div 作为容器
// 确保容器定位
if (canvasWrapper.css('position') === 'static') canvasWrapper.css('position', 'relative');
// 定义临时拖拽线 DOM
let $dragLine = null;
// 通用拖拽开始函数
const startDragGuide = (type, e) => {
e.preventDefault();
e.stopPropagation();
// 创建临时显示的线
$dragLine = $('<div class="guide-line-drag"></div>');
canvasWrapper.append($dragLine);
if (type === 'horizontal') {
// 从上往下拖 (水平线)
$dragLine.css({
left: 0, width: '100%', height: '1px', top: e.offsetY
});
} else {
// 从左往右拖 (垂直线)
$dragLine.css({
top: 0, height: '100%', width: '1px', left: e.offsetX
});
}
// 绑定 document 移动事件
$(document).on('mousemove.ruler', function (moveEvent) {
let wrapperOffset = canvasWrapper.offset();
if (type === 'horizontal') {
let relY = moveEvent.pageY - wrapperOffset.top;
$dragLine.css('top', relY + 'px');
} else {
let relX = moveEvent.pageX - wrapperOffset.left;
$dragLine.css('left', relX + 'px');
}
});
// 绑定松开事件 (创建真实的 Fabric 线)
$(document).on('mouseup.ruler', function (upEvent) {
$(document).off('mousemove.ruler mouseup.ruler');
if (!$dragLine) return;
// 获取最终位置
let wrapperOffset = canvasWrapper.offset();
let finalX = upEvent.pageX - wrapperOffset.left;
let finalY = upEvent.pageY - wrapperOffset.top;
// 移除临时线
$dragLine.remove();
$dragLine = null;
// 只有拖入画布区域才创建
if (finalX > rulerWidth && finalY > rulerHeight) {
createFabricGuide(type, finalX, finalY);
}
});
};
// 绑定到标尺 DOM
$('#ruler-h').off('mousedown').on('mousedown', (e) => startDragGuide('horizontal', e));
$('#ruler-v').off('mousedown').on('mousedown', (e) => startDragGuide('vertical', e));
// --- 在画布中创建辅助线 ---
function createFabricGuide(type, domX, domY) {
// domX 和 domY 是相对于 canvas-wrapper 的坐标
// 需要转换为相对于 canvas 的坐标，然后再转换为 Fabric 画布坐标
// 获取 canvas 相对于 canvas-wrapper 的位置
let canvas1El = $('#canvas1');
let canvasPosition = canvas1El.position();
let canvasMarginLeft = parseFloat(canvas1El.css('margin-left')) || 0;
let canvasMarginTop = parseFloat(canvas1El.css('margin-top')) || 0;
// 计算相对于 canvas 的坐标（减去 canvas 在 wrapper 中的位置和 margin）
let relX = domX - canvasPosition.left - canvasMarginLeft;
let relY = domY - canvasPosition.top - canvasMarginTop;
// 转为 Fabric 坐标 (除以 zoom)
let canvasX = relX / zoom;
let canvasY = relY / zoom;
// 使用足够大的固定值，确保辅助线能够覆盖整个画布和可见区域
let lineExtent = 100000;
// 构造线对象
let linePoints = [];
if (type === 'horizontal') {
linePoints = [-lineExtent, canvasY, lineExtent, canvasY];
} else {
linePoints = [canvasX, -lineExtent, canvasX, lineExtent];
}
let guideLine = new fabric.Line(linePoints, {
stroke: '#0066FF',
strokeWidth: 1 / zoom,
opacity: 0.9,
shadow: {
color: '#0066FF',
blur: 6,
offsetX: 0,
offsetY: 0,
affectStroke: true
},
selectable: true,
evented: true,
hasControls: false,
hasBorders: false,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
hoverCursor: type === 'horizontal' ? 'ns-resize' : 'ew-resize',
perPixelTargetFind: false,
targetFindTolerance: 10,
padding: 10,
isGuideLine: true,
ignoreSave: true
});
// 限制移动方向
guideLine.on('moving', function (e) {
if (type === 'horizontal') {
this.left = -lineExtent;
} else {
this.top = -lineExtent;
}
});
// 确定应该添加到哪个 canvas（使用当前活动的 canvas）
let targetCanvas = canvas;
if (!targetCanvas || (targetCanvas !== canvas1 && targetCanvas !== canvas2)) {
// 如果没有活动的 canvas，默认使用 canvas1
targetCanvas = canvas1;
}
targetCanvas.add(guideLine);
targetCanvas.setActiveObject(guideLine);
targetCanvas.renderAll();
}
}
initRulers();
$('#source_front').width(zoom * $('#source_front').width())
@@ -705,14 +890,20 @@ function handleObjectSelected(e) {
return;
}
// 2. 获取索引
// 2. 如果是辅助线，直接返回，不处理（在获取索引之前检查）
if (select_obj.isGuideLine) {
return;
}
// 3. 获取索引
let i = getIndex(select_obj, canvas);
if (i != 0) {
// --- 选中了普通对象 ---
--i; // 转换为 objs 数组下标
if (objs[i]) {
// 安全检查：确保 objs[i] 存在且有 type 属性
if (objs[i] && typeof objs[i].type !== 'undefined') {
switch (objs[i].type) {
case 1: // 图片
$("#component_type").text(language_str("img"));
@@ -764,9 +955,15 @@ function handleObjectSelected(e) {
function handleObjectMoving(e) {
let obj = e.target;
// 跳过辅助线
if (obj.isGuideLine) {
updateControls();
return;
}
let idx = getIndex(obj, canvas);
// 圆形文本特殊处理
if (idx > 0 && idx <= objs.length && objs[idx - 1] && objs[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
// 安全检查：确保 objs[idx - 1] 存在且有 type 属性
if (idx > 0 && idx <= objs.length && objs[idx - 1] && typeof objs[idx - 1].type !== 'undefined' && objs[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
let pointer = { x: obj.left, y: obj.top };
let distance = getDisdance(pointer.x, pointer.y, canvas.width / 2, canvas.height / 2);
let angleDeg = getDeg(pointer);
@@ -865,9 +1062,18 @@ function initCanvasEvents() {
// 7. 对象修改后
currentCanvas.on('object:modified', function (event) {
if (currentCanvas.getActiveObjects().length > 1) return;
// 跳过辅助线
if (event.target.isGuideLine) {
return;
}
let idx = getIndex(event.target, currentCanvas);
if (idx <= 0) return;
let objData = objs[idx - 1];
// 安全检查：确保 objData 存在且有 type 属性
if (!objData || typeof objData.type === 'undefined') {
console.warn('objData is undefined or missing type at index', idx - 1);
return;
}
let target = event.target;
if ([3, 4, 10].includes(objData.type)) {
@@ -1011,14 +1217,23 @@ function getIndex(target, _canvas = null) {
}
function getType(target) {
// 如果是辅助线，返回 null
if (target.isGuideLine) {
return null;
}
let temp_objs = canvas.getObjects();
let i = 0;
for (let res of temp_objs) {
if (target == res) {
// 安全检查：确保 objs[i] 存在且有 type 属性
if (!objs[i] || typeof objs[i].type === 'undefined') {
return null;
}
return objs[i].type;
}
i++;
}
return null;
}
function checkName(name) {
@@ -1658,7 +1873,8 @@ function display_func(img1, img2, img3) {
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
let _objs1 = canvas1.getObjects()
// 过滤掉辅助线
let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
let g1 = []
let g3 = []
let g5 = []
@@ -1670,6 +1886,12 @@ function display_func(img1, img2, img3) {
let all_top = 0 //预览图顶裁剪
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
continue
}
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
@@ -1683,6 +1905,7 @@ function display_func(img1, img2, img3) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g3.push(fabric.util.object.clone(item))
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
continue //计数器 或 合成文字
}
@@ -1761,7 +1984,8 @@ function display_func(img1, img2, img3) {
top: black_top / zoom,
left: black_left / zoom
})
let _objs2 = canvas2.getObjects()
// 过滤掉辅助线
let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
let g2 = []
let g4 = []
let g6 = []
@@ -1773,6 +1997,12 @@ function display_func(img1, img2, img3) {
all_left = 0
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
continue
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
@@ -1780,6 +2010,7 @@ function display_func(img1, img2, img3) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g4.push(fabric.util.object.clone(item))
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
continue //黑色字或计数器 或 合成文字
}
@@ -1990,7 +2221,8 @@ function output(callback = null, _save = save) {
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
let _objs1 = canvas1.getObjects()
// 过滤掉辅助线
let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
let g1 = []
let g3 = []
let g5 = [] //黑色图层
@@ -2002,6 +2234,11 @@ function output(callback = null, _save = save) {
let all_top = 0 //预览图顶裁剪
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
continue
}
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
@@ -2093,7 +2330,8 @@ function output(callback = null, _save = save) {
top: black_top / zoom,
left: black_left / zoom
})
let _objs2 = canvas2.getObjects()
// 过滤掉辅助线
let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
let g2 = []
let g4 = []
let g6 = [] //黑色图层
@@ -2105,6 +2343,11 @@ function output(callback = null, _save = save) {
all_top = 0 //黑色顶裁剪
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
continue
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
@@ -2220,9 +2463,17 @@ function output(callback = null, _save = save) {
//op.backBlPic = url6;
op.frontBlackPic = desEncrypt(url5)
op.backBlackPic = desEncrypt(url6)
for (let item of _objs1) {
// 过滤掉辅助线
let filteredObjs1 = _objs1.filter(obj => !obj.isGuideLine)
for (let item of filteredObjs1) {
let idx = getIndex(item, canvas1)
if (idx == 0) continue //background-image
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined') {
continue
}
let type = objs1[idx - 1].type
if (type == 2) {
//out_pic
@@ -2357,9 +2608,17 @@ function output(callback = null, _save = save) {
}
}
//obj2
for (let item of _objs2) {
// 过滤掉辅助线
let filteredObjs2 = _objs2.filter(obj => !obj.isGuideLine)
for (let item of filteredObjs2) {
let idx = getIndex(item, canvas2)
if (idx == 0) continue //background-image
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined') {
continue
}
let type = objs2[idx - 1].type
if (type == 2) {
//out_pic
lib/design2/output.js
+92 -6
View File
@@ -15,7 +15,8 @@ function display_func(img1, img2, img3) {
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
let _objs1 = canvas1.getObjects()
// 过滤掉辅助线
let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
let g1 = []
let g3 = []
let g5 = []
@@ -25,8 +26,15 @@ function display_func(img1, img2, img3) {
let black_top = 0 //黑色顶裁剪
let all_left = 0 //预览图左裁剪
let all_top = 0 //预览图顶裁剪
for (let item of _objs1) {
// 过滤掉辅助线
let list1 = _objs1.filter(obj => !obj.isGuideLine)
for (let item of list1) {
let idx = getIndex(item, canvas1)
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
continue
}
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
@@ -119,7 +127,8 @@ function display_func(img1, img2, img3) {
top: black_top / zoom,
left: black_left / zoom
})
let _objs2 = canvas2.getObjects()
// 过滤掉辅助线
let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
let g2 = []
let g4 = []
let g6 = []
@@ -129,8 +138,15 @@ function display_func(img1, img2, img3) {
black_left = 0
all_top = 0
all_left = 0
for (let item of _objs2) {
// 过滤掉辅助线
let filteredObjs2 = _objs2.filter(obj => !obj.isGuideLine)
for (let item of filteredObjs2) {
let idx = getIndex(item, canvas2)
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
continue
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
@@ -350,7 +366,8 @@ function output(callback = null, _save = save) {
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
let _objs1 = canvas1.getObjects()
// 过滤掉辅助线
let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
let g1 = []
let g3 = []
let g5 = [] //黑色图层
@@ -360,8 +377,14 @@ function output(callback = null, _save = save) {
let black_top = 0 //黑色顶裁剪
let all_left = 0 //预览图左裁剪
let all_top = 0 //预览图顶裁剪
// _objs1 已经在上面过滤过辅助线了，直接使用
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
continue
}
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
@@ -454,7 +477,8 @@ function output(callback = null, _save = save) {
top: black_top / zoom,
left: black_left / zoom
})
let _objs2 = canvas2.getObjects()
// 过滤掉辅助线
let _objs2 = canvas2.getObjects().filter(obj => !obj.isGuideLine)
let g2 = []
let g4 = []
let g6 = [] //黑色图层
@@ -464,8 +488,14 @@ function output(callback = null, _save = save) {
black_top = 0 //黑色顶裁剪
all_left = 0 //黑色左裁剪
all_top = 0 //黑色顶裁剪
// _objs2 已经在上面过滤过辅助线了，直接使用
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
continue
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
@@ -582,8 +612,14 @@ function output(callback = null, _save = save) {
//op.backBlPic = url6;
op.frontBlackPic = desEncrypt(url5)
op.backBlackPic = desEncrypt(url6)
// _objs1 已经在上面过滤过辅助线了，直接使用
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
// 安全检查：确保 objs1[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs1[idx - 1] || typeof objs1[idx - 1].type === 'undefined')) {
continue
}
if (idx == 0) continue //background-image
let type = objs1[idx - 1].type
if (type == 2) {
@@ -719,8 +755,14 @@ function output(callback = null, _save = save) {
}
}
//obj2
// _objs2 已经在上面过滤过辅助线了，直接使用
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
// 安全检查：确保 objs2[idx - 1] 存在且有 type 属性
if (idx != 0 && (!objs2[idx - 1] || typeof objs2[idx - 1].type === 'undefined')) {
continue
}
if (idx == 0) continue //background-image
let type = objs2[idx - 1].type
if (type == 2) {
@@ -933,9 +975,31 @@ function cleanupSrcFields(jsonObjects, objsArray) {
}
function saveAs(op1, callback) {
// 临时移除辅助线，保存后再恢复
let guideLines1 = []
let guideLines2 = []
canvas1.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines1.push(obj)
canvas1.remove(obj)
}
})
canvas2.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines2.push(obj)
canvas2.remove(obj)
}
})
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
// 恢复辅助线
guideLines1.forEach(obj => canvas1.add(obj))
guideLines2.forEach(obj => canvas2.add(obj))
canvas1.renderAll()
canvas2.renderAll()
// 清理不需要的 src 字段
cleanupSrcFields(j.objects, objs1);
cleanupSrcFields(b.objects, objs2);
@@ -969,9 +1033,31 @@ function saveAs(op1, callback) {
}
function save(op1, callback) {
// 临时移除辅助线，保存后再恢复
let guideLines1 = []
let guideLines2 = []
canvas1.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines1.push(obj)
canvas1.remove(obj)
}
})
canvas2.getObjects().forEach((obj, index) => {
if (obj.isGuideLine) {
guideLines2.push(obj)
canvas2.remove(obj)
}
})
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
// 恢复辅助线
guideLines1.forEach(obj => canvas1.add(obj))
guideLines2.forEach(obj => canvas2.add(obj))
canvas1.renderAll()
canvas2.renderAll()
// 清理不需要的 src 字段
cleanupSrcFields(j.objects, objs1);
cleanupSrcFields(b.objects, objs2);
lib/design2/ui.js
+60
View File
@@ -2576,10 +2576,22 @@ function handleObjectSelected() {
$('#component_type').text(language_str('bg')) //comfirm
return
}
// 如果是辅助线，直接返回，不处理
if (select_obj.isGuideLine) {
return
}
let i = getIndex(select_obj)
if (i != 0) {
//不是背景
--i
// 安全检查：确保 objs[i] 存在且有 type 属性
if (!objs[i] || typeof objs[i].type === 'undefined') {
return
}
switch (objs[i].type) {
case 1:
//console.log("图片");
@@ -2721,10 +2733,22 @@ canvas1.on('mouse:down', (e) => {
canvas = canvas1;
objs = objs1;
let select_obj = canvas.getActiveObject()
// 如果是辅助线，直接返回，不处理
if (select_obj && select_obj.isGuideLine) {
return
}
let i = getIndex(select_obj, canvas)
if (i != 0) {
//不是背景
--i
// 安全检查：确保 objs[i] 存在且有 type 属性
if (!objs[i] || typeof objs[i].type === 'undefined') {
return
}
switch (objs[i].type) {
case 1:
$('#component_type').text(language_str('img'))
@@ -2811,8 +2835,20 @@ canvas1.on('object:modified', function (event) {
if (canvas1.getActiveObjects().length > 1) {
return
}
// 跳过辅助线
if (event.target.isGuideLine) {
return
}
let idx = getIndex(event.target, canvas1);
if (idx <= 0) return;
// 安全检查：确保 objs[idx - 1] 存在且有 type 属性
if (!objs[idx - 1] || typeof objs[idx - 1].type === 'undefined') {
return
}
if (objs[idx - 1].type == 3) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
@@ -3011,10 +3047,22 @@ canvas2.on('mouse:down', (e) => {
canvas = canvas2;
objs = objs2;
let select_obj = canvas.getActiveObject()
// 如果是辅助线，直接返回，不处理
if (select_obj && select_obj.isGuideLine) {
return
}
let i = getIndex(select_obj, canvas)
if (i != 0) {
//不是背景
--i
// 安全检查：确保 objs[i] 存在且有 type 属性
if (!objs[i] || typeof objs[i].type === 'undefined') {
return
}
switch (objs[i].type) {
case 1:
$('#component_type').text(language_str('img'))
@@ -3097,8 +3145,20 @@ canvas2.on('object:modified', function (event) {
if (canvas.getActiveObjects().length > 1) {
return
}
// 跳过辅助线
if (event.target.isGuideLine) {
return
}
let idx = getIndex(event.target, canvas2);
if (idx <= 0) return;
// 安全检查：确保 objs[idx - 1] 存在且有 type 属性
if (!objs[idx - 1] || typeof objs[idx - 1].type === 'undefined') {
return
}
if (objs[idx - 1].type == 3) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
package.json
+79 -34
View File
@@ -3,49 +3,97 @@
"version": "2.3.017",
"description": "tools of design soon files",
"main": "main.js",
"author": "Jerry <jerry@cardsoon.com>",
"repository": {
"type": "git",
"url": "https://github.com/cello847/soondesign"
},
"homepage": "https://soondesign.cardsoon.com",
"bugs": {
"url": "https://github.com/cello847/soondesign/issues"
},
"scripts": {
"start": "electron-forge start",
"package:x64": "electron-forge package --arch=x64",
"package:arm64": "electron-forge package --arch=arm64",
"package:universal": "electron-forge package --arch=universal"
"start": "electron .",
"build": "electron-builder",
"build:win": "electron-builder --win --x64",
"build:mac": "electron-builder --mac --x64",
"build:linux": "electron-builder --linux --x64",
"build:all": "electron-builder -mwl"
},
"build": {
"productName": "SoonDesign",
"appId": "com.SoonDesign",
"copyright": "",
"directories": {
"output": "build"
},
"extraFiles": [
"lib"
],
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "public/images/favicon.ico",
"uninstallerIcon": "public/images/favicon.ico",
"installerHeaderIcon": "public/images/favicon.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true
},
"fileAssociations": [
{
"name": "SoonDesign file",
"ext": "soon",
"icon": "public/images/favicon.ico",
"description": "SoonDesign file associations"
}
],
"asar": true,
"asarUnpack": [
"lib/**"
],
"win": {
"icon": "public/images/favicon.ico",
"requestedExecutionLevel": "asInvoker",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"mac": {
"target": [
{ "target": "dmg", "arch": ["x64"] },
{ "target": "zip", "arch": ["x64"] }
],
"category": "public.app-category.utilities",
"icon": "public/images/favicon.icns"
},
"linux": {
"target": [
{ "target": "AppImage", "arch": ["x64"] },
{ "target": "deb", "arch": ["x64"] }
],
"category": "Utility",
"icon": "public/images/IconA256.png",
"desktop": {
"Name": "SoonDesign",
"Comment": "tools of design soon files"
}
}
},
"electronPackagerConfig": {
"packageManager": "npm",
"icon": "./public/images/favicon.icns"
},
"config": {
"forge": {
"packagerConfig": {
"icon": "./public/images/favicon.icns",
"asar": true,
"extraResource": [
"./help"
],
"osxUniversal": {
}
}
}
"icon": "./public/images/favicon.ico"
},
"repository": "",
"keywords": [
"SoonDesign",
"soon",
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "",
"license": "MIT",
"devDependencies": {
"@electron-forge/cli": "^6.2.0",
"electron": "^25.0.0"
"electron": "^25.0.0",
"electron-builder": "^23.3.3"
},
"dependencies": {
"@electron/remote": "^2.0.8",
@@ -58,8 +106,5 @@
"less": "^4.1.2",
"less-loader": "^10.2.0",
"save": "^2.9.0"
},
"optionalDependencies": {
"create-dmg": "^6.1.0"
}
}