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

fix(web): design1/2 缩略图与 design2 设为背景交互修复

Browse Source 
- design1：预览/最近文件缩略图按 background 边界截取，去掉多余白盘
- design2：设为背景贴齐 1012x648 卡框，保存/打开保留用户背景 src
- design2：列表可选中锁定对象并加载完整属性，缩略图叠加 front_bg 模板
- design2：固定卡框锚点，避免选中背景时标尺/蒙版随属性面板漂移

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
24kycj
2026-06-25 19:26:17 +08:00
parent 0f196bdec8
commit 784cacf259
7 changed files with 746 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-web/js/design1/core.js
+50 -21
View File
@@ -448,21 +448,47 @@ function addBackground() {
}
// 将 updateControls 附加到 window 对象，确保在 eval() 加载 .jsc 文件时也能访问
window.updateControls = function updateControls() {
// 使用 window.canvas 和 window.background_image 作为后备，确保在 eval() 执行时也能访问
window._soonSyncingFontControls = false;
function soonFontSizeUiVal(fontSizePx) {
var d = window.dpi || 600;
var uiVal = parseFloat(fontSizePx) * 72 / d;
if (uiVal % 0.5 !== 0) uiVal = Math.round(uiVal * 2) / 2;
return uiVal;
}
function soonSyncActiveFontSizeInput(activeObj, currentCanvas) {
if (!activeObj) return;
var idx = getIndex(activeObj, currentCanvas);
if (idx <= 0) return;
var objData = (window.objs || objs)[idx - 1];
if (!objData) return;
var uiVal = soonFontSizeUiVal(activeObj.get('fontSize'));
if (objData.type === 3) $("#text_size").val(uiVal);
else if (objData.type === 4) $("#out_text_size").val(uiVal);
else if (objData.type === 10) $("#count_size").val(uiVal);
}
window.updateControls = function () {
const currentCanvas = window.canvas || canvas;
const currentBackgroundImage = window.background_image || background_image;
if (!currentCanvas || !currentCanvas.getActiveObject()) return;
$("#text_r").val(currentCanvas.getActiveObject().get("angle").toFixed(0));
$("#text_x").val((currentCanvas.getActiveObject().get("left") - currentBackgroundImage.left).toFixed(0));
$("#text_y").val((currentCanvas.getActiveObject().get("top") - currentBackgroundImage.top).toFixed(0));
$("#text_h").val((currentCanvas.getActiveObject().get("scaleY") * currentCanvas.getActiveObject().get("height")).toFixed(0));
$("#text_w").val((currentCanvas.getActiveObject().get("scaleX") * currentCanvas.getActiveObject().get("width")).toFixed(0));
// 根据锁定状态显示图标（使用lockMovementX判断，因为锁定时会设置所有lock属性）
if (currentCanvas.getActiveObject().get("lockMovementX")) {
$("#lock_img").attr("src", soonAsset("lock20.png"))//已锁定
} else {
$("#lock_img").attr("src", soonAsset("unlock20.png"))//未锁定
const activeObj = currentCanvas.getActiveObject();
window._soonSyncingFontControls = true;
try {
$("#text_r").val(activeObj.get("angle").toFixed(0));
$("#text_x").val((activeObj.get("left") - currentBackgroundImage.left).toFixed(0));
$("#text_y").val((activeObj.get("top") - currentBackgroundImage.top).toFixed(0));
$("#text_h").val((activeObj.get("scaleY") * activeObj.get("height")).toFixed(0));
$("#text_w").val((activeObj.get("scaleX") * activeObj.get("width")).toFixed(0));
soonSyncActiveFontSizeInput(activeObj, currentCanvas);
if (activeObj.get("lockMovementX")) {
$("#lock_img").attr("src", soonAsset("lock20.png"));
} else {
$("#lock_img").attr("src", soonAsset("unlock20.png"));
}
} finally {
window._soonSyncingFontControls = false;
}
};
// 向后兼容
@@ -1786,18 +1812,21 @@ function initCanvasEvents() {
return;
}
let target = event.target;
var modAction = event.action || (event.transform && event.transform.action);
if ([3, 4, 10].includes(objData.type)) {
target.fontSize = (target.fontSize * target.scaleX).toFixed(0);
target.scaleX = 1; target.scaleY = 1;
if ([3, 4, 10].includes(objData.type) && modAction === 'scale') {
target.set({
fontSize: Math.round(target.fontSize * (target.scaleX || 1)),
scaleX: 1,
scaleY: 1,
});
target._clearCache();
if (objData.type == 3) $("#text_size").val(target.fontSize);
if (objData.type == 4) $("#out_text_size").val(target.fontSize);
if (objData.type == 10) $("#count_size").val(target.fontSize);
currentCanvas.renderAll();
} else if (objData.type == 5) {
target.width *= target.scaleX; target.height *= target.scaleY;
target.scaleX = 1; target.scaleY = 1;
} else if (objData.type == 5 && modAction === 'scale') {
target.width *= target.scaleX || 1;
target.height *= target.scaleY || 1;
target.scaleX = 1;
target.scaleY = 1;
}
window.recordState();
// 更新对象列表以同步锁状态