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-15 02:55:54 +08:00
parent 50ff0d347a
commit 3c4080f3f1
8 changed files with 3048 additions and 3407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/design2/core.js
+173 -77
View File
@@ -425,17 +425,17 @@ function initRulers() {
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;
@@ -555,22 +555,18 @@ function selectObject(target, index) {
function selectPic(target, index) {
// 检查是否有选中对象，如果没有则直接返回
if (!canvas || !canvas.getActiveObject()) return;
$("#pic_control").show();
$("#set_bg").show();
let activeObj = canvas.getActiveObject();
// 检查对象是否被锁定或设为背景（索引0且已锁定）
let idx = getIndex(activeObj, canvas);
if (idx === 0) {
// 如果是背景图且已锁定，不应该显示图片控件
if (activeObj.get('lockMovementX') === true || activeObj.get('selectable') === false) {
canvas.discardActiveObject();
canvas.renderAll();
return;
}
// 检查对象是否被锁定
if (isObjectLocked(activeObj)) {
canvas.discardActiveObject();
canvas.renderAll();
return;
}
if (typeof pic_op !== 'undefined' && pic_op && typeof pic_op.setValue === 'function') {
pic_op.setValue(100 - (activeObj.get("opacity") * 100));
} else {
@@ -656,44 +652,48 @@ function selectText(target, index) {
}
function selectCircleText(target, index) {
let idx = getIndex(canvas.getActiveObject(), canvas);
const activeObj = target || canvas.getActiveObject();
if (!activeObj) return;
let idx = getIndex(activeObj);
$("#circle_text_control").show();
$("#circle_text_color").val(canvas.getActiveObject().get("fill"));
$("#circle_text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor"));
if (typeof circle_text_size !== 'undefined' && circle_text_size.setValue) {
circle_text_size_updating = true; // 设置标志位
circle_text_size.setValue(canvas.getActiveObject().get("fontSize"));
circle_text_size_updating = false; // 清除标志位
} else {
$("#circle_text_size").next().children(".layui-slider-bar").css("width", ((canvas.getActiveObject().get("fontSize") - 10) / (120 - 10)) * 100 + "%");
$("#circle_text_size").next().children(".layui-slider-handle").css("left", ((canvas.getActiveObject().get("fontSize") - 10) / (120 - 10)) * 100 + "%");
$("#circle_text_color").val(activeObj.get("fill"));
$("#circle_text_back_color").val(activeObj.get("textBackgroundColor") == "" ? '#ffffff' : activeObj.get("textBackgroundColor"));
if (typeof circle_text_size !== 'undefined' && circle_text_size && typeof circle_text_size.setValue === 'function') {
if (typeof circle_text_size_updating !== 'undefined') {
circle_text_size_updating = true;
}
circle_text_size.setValue(activeObj.get("fontSize") - 10);
if (typeof circle_text_size_updating !== 'undefined') {
circle_text_size_updating = false;
}
}
if (typeof circle_text_diameter !== 'undefined' && circle_text_diameter.setValue) {
circle_text_diameter.setValue(canvas.getActiveObject().get("diameter"));
} else {
$("#circle_text_diameter").next().children(".layui-slider-bar").css("width", ((canvas.getActiveObject().get("diameter") - 50) / (1100 - 50)) * 100 + "%");
$("#circle_text_diameter").next().children(".layui-slider-handle").css("left", ((canvas.getActiveObject().get("diameter") - 50) / (1100 - 50)) * 100 + "%");
if (typeof circle_text_diameter !== 'undefined' && circle_text_diameter && typeof circle_text_diameter.setValue === 'function') {
circle_text_diameter.setValue(activeObj.get("diameter") - 50);
}
$("#circle_text_center").prop("checked", objs[idx - 1].circleCenter ? 'checked' : '');
$("#circle_text_text").val(canvas.getActiveObject().get("text"));
$("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily"));
$("#circle_text_text").val(activeObj.get("text"));
$("#circle_text_font_family").val(activeObj.get("fontFamily"));
if (canvas.getActiveObject().get("underline") == true) {
if (activeObj.get("underline") == true) {
$("#circle_text_underline").addClass("ui-radio-acitve")
} else {
$("#circle_text_underline").removeClass("ui-radio-acitve")
}
if (canvas.getActiveObject().get("fontWeight") == "bold") {
if (activeObj.get("fontWeight") == "bold") {
$("#circle_text_bold").addClass("ui-radio-acitve")
} else {
$("#circle_text_bold").removeClass("ui-radio-acitve")
}
if (canvas.getActiveObject().get("fontStyle") == "italic") {
if (activeObj.get("fontStyle") == "italic") {
$("#circle_text_italics").addClass("ui-radio-acitve")
} else {
$("#circle_text_italics").removeClass("ui-radio-acitve")
}
if (canvas.getActiveObject().get("linethrough") == true) {
if (activeObj.get("linethrough") == true) {
$("#circle_text_linethrough").addClass("ui-radio-acitve")
} else {
$("#circle_text_linethrough").removeClass("ui-radio-acitve")
@@ -931,18 +931,15 @@ function handleObjectSelected(e) {
// 3. 获取索引
let i = getIndex(select_obj, canvas);
// 检查对象是否被锁定或设为背景（索引0且已锁定）
if (i === 0) {
if (select_obj.get('lockMovementX') === true || select_obj.get('selectable') === false) {
// 如果是背景图且已锁定，取消选中
canvas.discardActiveObject();
canvas.renderAll();
$("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
$("#component_type").text(language_str("bg"));
selectObj(-1, true);
return;
}
// 如果不是通过对象列表选中的，且对象被锁定，则取消选中
if (!window._selectingFromList && isObjectLocked(select_obj)) {
canvas.discardActiveObject();
canvas.renderAll();
$("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
$("#component_type").text(language_str("bg"));
selectObj(-1, true);
return;
}
if (i != 0) {
@@ -1026,6 +1023,61 @@ function handleObjectMoving(e) {
updateControls();
}
// 辅助函数：检查对象是否被锁定
// 只有当 lockMovementX 为 true 时才认为对象被锁定
// selectable 为 false 可能是其他原因（如背景图），所以只检查 lockMovementX
function isObjectLocked(obj) {
if (!obj) return false;
// 主要检查 lockMovementX，这是锁定的主要标志
return obj.get('lockMovementX') === true;
}
// 暴露到全局作用域，确保其他模块可以访问
window.isObjectLocked = isObjectLocked;
// 统一的 toJSON 属性列表，不包含锁定相关属性（锁定状态不应被保存）
const TO_JSON_PROPERTIES = [
"selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline", "evented"
];
// 暴露到全局作用域
window.TO_JSON_PROPERTIES = TO_JSON_PROPERTIES;
// 辅助函数：解锁所有对象（加载时使用）
function unlockAllObjects(canvas) {
if (!canvas) return;
const objects = canvas.getObjects();
objects.forEach((obj, index) => {
// 背景对象（索引0）保持锁定状态
if (index === 0) {
obj.set({
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
lockSkewingX: true,
lockSkewingY: true,
selectable: false,
evented: false
});
} else {
// 其他对象默认解锁
obj.set({
lockMovementX: false,
lockMovementY: false,
lockRotation: false,
lockScalingX: false,
lockScalingY: false,
lockSkewingX: false,
lockSkewingY: false,
selectable: true,
evented: true
});
}
});
}
// 暴露到全局作用域
window.unlockAllObjects = unlockAllObjects;
// 将 handleObjectSelected 附加到 window 对象，确保全局可访问
window.handleObjectSelected = handleObjectSelected;
@@ -1087,6 +1139,16 @@ function initCanvasEvents() {
objs = (currentCanvas === canvas1) ? objs1 : objs2;
handleObjectSelected(e);
});
// 阻止被锁定的对象被框选选中（只过滤被锁定的对象，保留未锁定的对象）
currentCanvas.on('before:selection:created', (e) => {
if (!e.targets || e.targets.length === 0) return;
// 过滤掉被锁定的对象，保留辅助线和未锁定的对象
e.targets = e.targets.filter(target => {
if (target.isGuideLine) return true; // 保留辅助线
return !isObjectLocked(target); // 移除被锁定的对象，保留未锁定的对象
});
});
// 添加 selection 事件以确保对象选中时正确显示属性面板
currentCanvas.on('selection:created', (e) => {
canvas = currentCanvas;
@@ -1101,19 +1163,15 @@ function initCanvasEvents() {
currentCanvas.on('object:selected', (e) => {
canvas = currentCanvas;
objs = (currentCanvas === canvas1) ? objs1 : objs2;
// 阻止背景图（索引0）被选中（如果已锁定）
let selectedObj = e.target;
let idx = getIndex(selectedObj, currentCanvas);
if (idx === 0) {
let bgObj = currentCanvas.getObjects()[0];
if (bgObj && (bgObj.get('lockMovementX') === true || bgObj.get('selectable') === false)) {
currentCanvas.discardActiveObject();
currentCanvas.renderAll();
return;
}
// 如果不是通过对象列表选中的，且对象被锁定，则取消选中
// 注意：只有真正被锁定的对象才会被取消选中，未锁定的对象应该正常选中
if (!window._selectingFromList && e.target && isObjectLocked(e.target)) {
currentCanvas.discardActiveObject();
currentCanvas.renderAll();
return;
}
handleObjectSelected(e);
// 更新对象列表以同步锁状态
if (typeof window.updateList === 'function') {
@@ -1157,7 +1215,6 @@ function initCanvasEvents() {
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;
@@ -1228,10 +1285,10 @@ window.updateList = function updateList() {
let canvasObj = canvas.getObjects()[i + 1];
isLocked = canvasObj.get('lockMovementX') === true;
}
// 锁定状态图标
const lockIcon = isLocked ?
'<img src="public/images/lock20.png" style="width:14px; height:14px; margin-left:5px; opacity:0.7;" title="已锁定">' :
const lockIcon = isLocked ?
'<img src="public/images/lock20.png" style="width:14px; height:14px; margin-left:5px; opacity:0.7;" title="已锁定">' :
'<img src="public/images/unlock20.png" style="width:14px; height:14px; margin-left:5px; opacity:0.5;" title="未锁定">';
// 组装 HTML
@@ -1257,6 +1314,9 @@ window.updateList = function updateList() {
});
}
// 标记是否通过对象列表选中（用于区分鼠标点击和列表点击）
window._selectingFromList = false;
// 将 selectObj 附加到 window 对象，确保全局可访问
window.selectObj = function selectObj(objIndices, isFromCanvas = false) {
let indicesArray = (Array.isArray(objIndices)) ? objIndices : ((typeof objIndices === 'number' && objIndices >= 0) ? [objIndices] : []);
@@ -1285,8 +1345,39 @@ window.selectObj = function selectObj(objIndices, isFromCanvas = false) {
if (!isFromCanvas && indicesArray.length === 1) {
let target = canvas.getObjects()[indicesArray[0] + 1];
if (target) {
// 检查对象是否被锁定
let isLocked = isObjectLocked(target);
// 设置标志位，表示这是通过对象列表选中的（无论是否锁定）
window._selectingFromList = true;
// 如果被锁定，临时设置 selectable 和 evented 为 true，以便能够选中
if (isLocked) {
target.set({
selectable: true,
evented: true
});
}
canvas.setActiveObject(target);
canvas.requestRenderAll();
// 如果对象被锁定，选中后立即恢复锁定状态（但保持选中状态）
if (isLocked) {
setTimeout(() => {
target.set({
selectable: false,
evented: false
});
canvas.requestRenderAll();
}, 0);
}
// 清除标志位（延迟清除，确保事件处理完成）
setTimeout(() => {
window._selectingFromList = false;
}, 10);
handleObjectSelected();
}
}
@@ -1306,7 +1397,8 @@ window.recordState = function recordState() {
currentRecordJson.pop();
}
currentRecordObjs.push(JSON.stringify(currentObjs))
let j = currentCanvas.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
// 保存所有锁定相关的属性，确保锁定状态可以正确恢复
let j = currentCanvas.toJSON(TO_JSON_PROPERTIES);
j.objects[0].hoverCursor = "default";
currentRecordJson.push(j);
};
@@ -1321,7 +1413,6 @@ window.getIndex = function getIndex(target, _canvas = null) {
// 使用 window.canvas 作为默认值，确保在 eval() 执行时也能访问
const currentCanvas = _canvas || window.canvas || canvas;
if (!currentCanvas) {
console.error('getIndex: canvas is undefined');
return 0;
}
temp_objs = currentCanvas.getObjects();
@@ -1487,7 +1578,7 @@ function addBackground() {
canvas2.renderAll()
recordObjs2.push(JSON.stringify(objs2))
recordJson2.push(canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))
recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES))
let file = GetFile().get('file')
if (file && file != 'empty') {
@@ -1909,12 +2000,16 @@ var circle_text_size = slider.render({
max: 120,
value: 50,
change: function (value) {
if (circle_text_size_updating) return; // 如果正在更新slider，跳过change事件
if (canvas.getActiveObject()) {
if (circle_text_size_updating) return;
if (canvas && canvas.getActiveObject && canvas.getActiveObject()) {
canvas.getActiveObject().set('fontSize', value);
canvas.renderAll();
updateControls();
recordState();
if (typeof updateControls === 'function') {
updateControls();
}
if (typeof recordState === 'function') {
recordState();
}
}
}
});
@@ -1925,11 +2020,15 @@ var circle_text_diameter = slider.render({
max: 1100,
value: 500,
change: function (value) {
if (canvas.getActiveObject()) {
if (canvas && canvas.getActiveObject && canvas.getActiveObject()) {
canvas.getActiveObject().set('diameter', value);
canvas.renderAll();
updateControls();
recordState();
if (typeof updateControls === 'function') {
updateControls();
}
if (typeof recordState === 'function') {
recordState();
}
}
}
});
@@ -2030,17 +2129,14 @@ window.savePdf = async function savePdf(buffer) {
});
if (canceled) {
console.log('用户取消了保存操作');
return;
}
// 将Buffer写入PDF文件到用户选择的路径
fs.writeFile(filePath, buffer, (err) => {
if (err) {
console.error('写入文件失败:', err);
} else {
layer.msg(language_str("saveSucc") + filePath);//'保存成功至'
console.log('PDF文件已保存至:', filePath);
}
});
};
lib/design2/output.js
+25 -13
View File
@@ -346,8 +346,6 @@ window.display_func = function display_func(img1, img2, img3) {
// 只处理导出（保存PDF）
if (typeof window.savePdf === 'function') {
window.savePdf(Buffer.from(pdfBuffer));
} else {
console.error('savePdf 函数未定义！');
}
},
btn2: function () {
@@ -1045,8 +1043,9 @@ function saveAs(op1, callback) {
}
})
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented'];
let j = canvas1.toJSON(props)
let b = canvas2.toJSON(props)
// 恢复辅助线
guideLines1.forEach(obj => canvas1.add(obj))
@@ -1112,8 +1111,9 @@ function save(op1, callback) {
}
})
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented'];
let j = canvas1.toJSON(props)
let b = canvas2.toJSON(props)
// 恢复辅助线
guideLines1.forEach(obj => canvas1.add(obj))
@@ -1248,15 +1248,31 @@ window.openFile = function open(file) {
// 加载 JSON，并在回调中重新生成二维码和条形码
canvas1.loadFromJSON(j.f, function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas1);
}
if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
window.regenerateQrCodesAndBarcodes(canvas1, fo);
}
// 加载后更新列表和图标显示
if (typeof window.updateList === 'function') {
window.updateList();
}
canvas1.renderAll()
})
canvas2.loadFromJSON(j.b, function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas2);
}
if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
window.regenerateQrCodesAndBarcodes(canvas2, bo);
}
// 加载后更新列表和图标显示
if (typeof window.updateList === 'function') {
window.updateList();
}
canvas2.renderAll()
})
background_image1 = canvas1.getObjects()[0]
@@ -1296,19 +1312,18 @@ window.openFile = function open(file) {
setTimeout(() => {
if (typeof window.updateList === 'function') {
window.updateList();
} else {
console.error('[open函数] ❌ updateList 函数未定义！');
}
}, 100);
}
setTimeout(() => {
recordObjs1.push(JSON.stringify(objs1))
let j1 = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented'];
let j1 = canvas1.toJSON(props)
j1.objects[0].hoverCursor = 'default'
recordJson1.push(j1)
recordObjs2.push(JSON.stringify(objs2))
let j2 = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let j2 = canvas2.toJSON(props)
j2.objects[0].hoverCursor = 'default'
recordJson2.push(j2)
}, 0)
@@ -1359,12 +1374,9 @@ function clearAll() {
setTimeout(() => {
if (typeof window.updateList === 'function') {
window.updateList();
} else {
console.error('[clearAll] ❌ updateList 函数未定义！');
}
}, 100);
}
console.log()
}
// 将 clearAll 附加到 window 对象，确保全局可访问
lib/design2/ui.js
+136 -768
View File
File diff suppressed because it is too large Load Diff