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
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)