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

优化调整bug与加密

Browse Source
This commit is contained in:
24kycj
2026-01-11 01:06:02 +08:00
parent f4aef8abaa
commit c26c4fa66e
19 changed files with 124 additions and 966 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/design2/output.js
+15 -14
View File
@@ -16,7 +16,7 @@ window.display_func = function display_func(img1, img2, img3) {
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
// 保存所有对象的 selectable 和 evented 状态，确保预览后能恢复
const objStates1 = [];
const objStates2 = [];
@@ -36,7 +36,7 @@ window.display_func = function display_func(img1, img2, img3) {
};
}
});
// 过滤掉辅助线
let _objs1 = canvas1.getObjects().filter(obj => !obj.isGuideLine)
let g1 = []
@@ -362,7 +362,7 @@ window.display_func = function display_func(img1, img2, img3) {
// 打印背面（两面都有时，btn3 对应 btns[2] = '打印背面'）
printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' })
},
end: function() {
end: function () {
// 预览窗口关闭后，恢复所有对象的 selectable 和 evented 状态
canvas1.getObjects().forEach((obj, index) => {
if (!obj.isGuideLine && objStates1[index]) {
@@ -981,8 +981,9 @@ window.regenerateQrCodesAndBarcodes = function regenerateQrCodesAndBarcodes(canv
margin: 0,
lineColor: objMeta.color || '#000000',
fontSize: objMeta.fontSize || 18,
font: objMeta.font || 'Arial'
})
font: objMeta.font || 'Arial',
displayValue: !objMeta.show
});
const barcode = document.getElementById('barcode')
const bar = barcode.toDataURL("image/png")
obj.setSrc(bar, function (img) {
@@ -1255,7 +1256,7 @@ window.openFile = function open(file) {
recordJson2 = []
recordObjs1 = []
recordObjs2 = []
// 同步更新 window 变量
window.objs1 = objs1
window.objs2 = objs2
@@ -1265,7 +1266,7 @@ window.openFile = function open(file) {
window.recordJson2 = recordJson2
window.recordObjs1 = recordObjs1
window.recordObjs2 = recordObjs2
if ($('#front_side').hasClass('ui-button-active')) {
objs = objs1
recordObjs = recordObjs1
@@ -1291,11 +1292,11 @@ window.openFile = function open(file) {
// 使用 Promise 确保两个画布都加载完成后再保存初始状态
let canvas1Loaded = false
let canvas2Loaded = false
function saveInitialState() {
// 两个画布都加载完成后才保存初始状态
if (!canvas1Loaded || !canvas2Loaded) return
// 确保使用正确的 objs1 和 objs2（从文件加载的 fo 和 bo）
// 注意：必须使用 fo 和 bo，因为它们是直接从文件 JSON 中读取的
// 同时确保 objs1 和 objs2 也被正确设置
@@ -1303,13 +1304,13 @@ window.openFile = function open(file) {
objs2 = bo || []
window.objs1 = objs1
window.objs2 = objs2
// 更新背景图引用
background_image1 = canvas1.getObjects()[0]
background_image2 = canvas2.getObjects()[0]
window.background_image1 = background_image1
window.background_image2 = background_image2
if ($('#front_side').hasClass('ui-button-active')) {
background_image = background_image1
window.background_image = background_image1
@@ -1321,7 +1322,7 @@ window.openFile = function open(file) {
objs = objs2
window.objs = objs2
}
// 保存初始状态（使用从文件加载的 objs 数组）
recordObjs1.push(JSON.stringify(objs1))
const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
@@ -1333,7 +1334,7 @@ window.openFile = function open(file) {
let j2 = canvas2.toJSON(props)
j2.objects[0].hoverCursor = 'default'
recordJson2.push(j2)
// 同步更新 window 变量和局部变量
window.recordObjs1 = recordObjs1
window.recordJson1 = recordJson1
@@ -1350,7 +1351,7 @@ window.openFile = function open(file) {
step = step2
}
}
canvas1.loadFromJSON(j.f, function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
lib/design2/ui.js
+79 -76
View File
@@ -566,7 +566,7 @@ $('#center_y_alignment').click(function () {
let itemMaxY = getCoordsMaxY(coords)
if (itemMinY < minTop) minTop = itemMinY
if (itemMaxY > maxBottom) maxBottom = itemMaxY
}
}
let groupCenterY = (minTop + maxBottom) / 2
// 将所有对象对齐到中心Y值
groupItems = []
@@ -713,7 +713,7 @@ $('#center_x_alignment').click(function () {
let itemMaxX = getCoordsMaxX(coords)
if (itemMinX < minLeft) minLeft = itemMinX
if (itemMaxX > maxRight) maxRight = itemMaxX
}
}
let groupCenterX = (minLeft + maxRight) / 2
// 将所有对象对齐到中心X值
groupItems = []
@@ -750,8 +750,8 @@ $('#up_obj').click(function () {
recordState()
if (typeof window.updateList === 'function') {
window.updateList();
}
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx);
}
@@ -770,8 +770,8 @@ $('#down_obj').click(function () {
objs[idx - 2] = temp
recordState()
if (typeof window.updateList === 'function') {
window.updateList();
}
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx - 2);
}
@@ -814,7 +814,7 @@ $('#set_bg').click(function () {
canvas.renderAll()
let objItem = objs.splice(idx - 1, 1)[0]
objs.unshift(objItem)
// 确保背景图（索引0）的锁定属性被正确设置
setTimeout(() => {
let bgObj = canvas.getObjects()[0];
@@ -833,7 +833,7 @@ $('#set_bg').click(function () {
canvas.renderAll();
}
}, 100);
recordState()
if (typeof window.updateList === 'function') {
window.updateList();
@@ -853,7 +853,7 @@ $('#previous').click(function () {
}
step.val--
if ($('#front_side').hasClass('ui-button-active')) {
// 使用 recordJson1 和 recordObjs1
if (recordObjs1 && recordObjs1[step.val]) {
@@ -863,10 +863,10 @@ $('#previous').click(function () {
window.objs1 = objs1;
window.objs = objs;
}
if (recordJson1 && recordJson1[step.val]) {
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson1[step.val], function() {
canvas.loadFromJSON(recordJson1[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
@@ -891,10 +891,10 @@ $('#previous').click(function () {
window.objs2 = objs2;
window.objs = objs;
}
if (recordJson2 && recordJson2[step.val]) {
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson2[step.val], function() {
canvas.loadFromJSON(recordJson2[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
@@ -923,7 +923,7 @@ $('#next').click(function () {
if ($('#front_side').hasClass('ui-button-active')) {
maxLen = recordObjs1 ? recordObjs1.length : 0;
if (step.val >= maxLen - 1) {
return
return
}
} else if ($('#back_side').hasClass('ui-button-active')) {
maxLen = recordObjs2 ? recordObjs2.length : 0;
@@ -935,7 +935,7 @@ $('#next').click(function () {
}
++step.val
if ($('#front_side').hasClass('ui-button-active')) {
// 使用 recordJson1 和 recordObjs1
if (recordObjs1 && recordObjs1[step.val]) {
@@ -945,10 +945,10 @@ $('#next').click(function () {
window.objs1 = objs1;
window.objs = objs;
}
if (recordJson1 && recordJson1[step.val]) {
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson1[step.val], function() {
canvas.loadFromJSON(recordJson1[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
@@ -973,10 +973,10 @@ $('#next').click(function () {
window.objs2 = objs2;
window.objs = objs;
}
if (recordJson2 && recordJson2[step.val]) {
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson2[step.val], function() {
canvas.loadFromJSON(recordJson2[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
@@ -1464,7 +1464,7 @@ function selectObject(target, index) {
function updateControls() {
// 检查是否有选中对象，如果没有则直接返回
if (!canvas || !canvas.getActiveObject()) return;
const activeObj = canvas.getActiveObject();
$('#text_r').val(activeObj.get('angle').toFixed(0))
$('#text_x').val((activeObj.get('left') - background_image.left).toFixed(0))
@@ -1517,20 +1517,20 @@ function addPic(pointer) {
function selectPic(target, index) {
// 检查是否有选中对象，如果没有则直接返回
if (!canvas || !canvas.getActiveObject()) return;
let activeObj = canvas.getActiveObject();
// 检查对象是否被锁定
if (isObjectLocked(activeObj)) {
canvas.discardActiveObject();
canvas.renderAll();
return;
}
//透明度
$('#pic_control').show()
$("#set_bg").show();
// 检查 pic_op 是否存在且有 setValue 方法
if (typeof pic_op !== 'undefined' && pic_op && typeof pic_op.setValue === 'function') {
pic_op.setValue(100 - activeObj.get('opacity') * 100);
@@ -1565,8 +1565,8 @@ function addOutPic(pointer) {
objs.push({ type: 2, name: resName('OUT_PIC_'), black: false })
canvas.renderAll()
if (typeof window.updateList === 'function') {
window.updateList();
}
window.updateList();
}
recordState()
})
})
@@ -1987,8 +1987,8 @@ function addQrCode(pointer) {
objs.push({ type: 8, name: resName('QR_CODE_'), color: '#000000', val: 'http://www.cardsoon.com', black: false })
canvas.renderAll()
if (typeof window.updateList === 'function') {
window.updateList();
}
window.updateList();
}
recordState()
})
}
@@ -2022,8 +2022,8 @@ function addBarCode(pointer) {
objs.push({ type: 9, name: resName('BAR_CODE_'), val: '123456789', color: '#000000', fontSize: 18, font: 'Arial', show: false, black: false }) //show是取消文字显示
canvas.renderAll()
if (typeof window.updateList === 'function') {
window.updateList();
}
window.updateList();
}
recordState()
})
}
@@ -2285,7 +2285,7 @@ $('#qrcode_color').bind('input propertychange', function () {
recordState()
})
})
$("#qrcode_val").bind('change', function () {
$("#qrcode_val").bind('input propertychange', function () {
let val = $(this).val() ? $(this).val() : 'https://www.cardsoon.com'
let item = canvas.getActiveObject();
let qr = jrQrcode.getQrBase64(val, { padding: 0, foreground: $("#qrcode_color").val() });
@@ -2551,14 +2551,17 @@ $('#barcode_val').bind('input propertychange', function () {
$("#barcode_show").click(function () {
let item = canvas.getActiveObject();
let idx = getIndex(canvas.getActiveObject());
let val = $("#barcode_size").val()
let val = $("#barcode_size").val();
let displayValue = true;
if ($(this).prop("checked")) {
objs[idx - 1].show = true;
val = 0
displayValue = false;
} else {
objs[idx - 1].show = false;
displayValue = true;
}
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: val * dpi / 72, font: objs[idx - 1].font });
// val = 0; // Remove this hack
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: val * dpi / 72, font: objs[idx - 1].font, displayValue: displayValue });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
@@ -2755,47 +2758,47 @@ $("#output").click(function () {
if (typeof window._design2CanvasEventsInitialized === 'undefined') {
window._design2CanvasEventsInitialized = true;
// 所有 canvas 事件已在 core.js 的 initCanvasEvents() 中统一处理，这里不再重复监听
// 如果需要 canvas1 特定的 mouse:move 处理，可以在这里添加
canvas1.on('mouse:move', (e) => {
if (!e.pointer || typeof background_image === 'undefined' || !background_image) return;
let width = canvas.getWidth()
let height = canvas.getHeight()
$('#posText').text(
'X: ' + (e.pointer.x - (width / 2 - (width / 2 - background_image.left) * zoom)).toFixed(0) + ' Y: ' + (e.pointer.y - (height / 2 - (height / 2 - background_image.top) * zoom)).toFixed(0)
)
})
// 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
// - mouse:down (通过 handleObjectSelected 处理)
// - object:scaling, object:rotating, object:rotated
// - text:editing:entered, text:editing:exited
// - object:modified (已在 core.js 中处理)
// - mouse:up (已在 core.js 中处理)
// 如果需要 canvas1 特定的处理逻辑，请修改 core.js 中的相应函数
// 所有 canvas 事件已在 core.js 的 initCanvasEvents() 中统一处理，这里不再重复监听
// 如果需要 canvas1 特定的 mouse:move 处理，可以在这里添加
canvas1.on('mouse:move', (e) => {
if (!e.pointer || typeof background_image === 'undefined' || !background_image) return;
let width = canvas.getWidth()
let height = canvas.getHeight()
$('#posText').text(
'X: ' + (e.pointer.x - (width / 2 - (width / 2 - background_image.left) * zoom)).toFixed(0) + ' Y: ' + (e.pointer.y - (height / 2 - (height / 2 - background_image.top) * zoom)).toFixed(0)
)
})
// 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
// - mouse:down (通过 handleObjectSelected 处理)
// - object:scaling, object:rotating, object:rotated
// - text:editing:entered, text:editing:exited
// - object:modified (已在 core.js 中处理)
// - mouse:up (已在 core.js 中处理)
// 如果需要 canvas1 特定的处理逻辑，请修改 core.js 中的相应函数
// 保留 canvas1 特定的 after:render 处理
canvas1.on('after:render', function () {
if (is_bgi_add) {
var image = document.getElementById('source_front')
ctx1.drawImage(image, (canvas.width - $('#source_front').width()) / 2, (canvas.height - $('#source_front').height()) / 2, $('#source_front').width(), $('#source_front').height())
}
})
// 保留 canvas1 特定的 text:changed 处理
canvas1.on('text:changed', (e) => {
$('#text_text').val(e.target.get('text'))
})
// 保留 canvas2 特定的 after:render 处理
canvas2.on('after:render', function () {
if (is_bgi_add) {
var image = document.getElementById('source_back')
ctx2.drawImage(image, (canvas.width - $('#source_back').width()) / 2, (canvas1.height - $('#source_back').height()) / 2, $('#source_back').width(), $('#source_back').height())
}
})
// 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
// - mouse:down (通过 handleObjectSelected 处理)
// - mouse:up (已在 core.js 中处理)
// - object:scaling, object:rotating, object:rotated, object:added
// - text:editing:entered, text:editing:exited
// - object:modified (已在 core.js 中处理)
// 如果需要 canvas2 特定的处理逻辑，请修改 core.js 中的相应函数
// 保留 canvas1 特定的 after:render 处理
canvas1.on('after:render', function () {
if (is_bgi_add) {
var image = document.getElementById('source_front')
ctx1.drawImage(image, (canvas.width - $('#source_front').width()) / 2, (canvas.height - $('#source_front').height()) / 2, $('#source_front').width(), $('#source_front').height())
}
})
// 保留 canvas1 特定的 text:changed 处理
canvas1.on('text:changed', (e) => {
$('#text_text').val(e.target.get('text'))
})
// 保留 canvas2 特定的 after:render 处理
canvas2.on('after:render', function () {
if (is_bgi_add) {
var image = document.getElementById('source_back')
ctx2.drawImage(image, (canvas.width - $('#source_back').width()) / 2, (canvas1.height - $('#source_back').height()) / 2, $('#source_back').width(), $('#source_back').height())
}
})
// 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
// - mouse:down (通过 handleObjectSelected 处理)
// - mouse:up (已在 core.js 中处理)
// - object:scaling, object:rotating, object:rotated, object:added
// - text:editing:entered, text:editing:exited
// - object:modified (已在 core.js 中处理)
// 如果需要 canvas2 特定的处理逻辑，请修改 core.js 中的相应函数
}