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();
// 更新对象列表以同步锁状态
frontend-web/js/design1/output.js
+67 -6
View File
@@ -52,6 +52,62 @@ async function saveImageAsPNG(buffer) {
}
}
/** 从画布像素截取光盘外接方（含 after:render 圆外暗蒙版），与编辑器所见一致 */
function soonDesign1CaptureCanvasRect(canvas, outW, outH, format, quality) {
var bg = window.background_image1 || window.background_image;
if (!canvas || !bg) return '';
var srcEl = canvas.lowerCanvasEl;
if (!srcEl || !srcEl.getContext) return '';
var sx = bg.scaleX == null ? 1 : bg.scaleX;
var sy = bg.scaleY == null ? 1 : bg.scaleY;
var sw = bg.width * sx;
var sh = bg.height * sy;
var retina = (typeof canvas.getRetinaScaling === 'function') ? canvas.getRetinaScaling() : 1;
outW = outW || Math.round(sw);
outH = outH || Math.round(sh);
var tmp = document.createElement('canvas');
tmp.width = outW;
tmp.height = outH;
var tctx = tmp.getContext('2d');
tctx.drawImage(
srcEl,
bg.left * retina, bg.top * retina, sw * retina, sh * retina,
0, 0, outW, outH
);
if (format === 'jpeg') return tmp.toDataURL('image/jpeg', quality == null ? 0.75 : quality);
return tmp.toDataURL('image/png');
}
function soonBuildDesign1SavePreviewPic(canvas) {
var THUMB_MAX = 102400;
var c1 = window.canvas1;
if (!canvas || (c1 && canvas !== c1)) return '';
var hidden = [];
canvas.getObjects().forEach(function (obj) {
if (obj.isGuideLine) {
hidden.push(obj);
obj.visible = false;
}
});
if (canvas.discardActiveObject) canvas.discardActiveObject();
canvas.renderAll();
var url = '';
var sizes = [320, 280, 240, 200];
var quals = [0.82, 0.68, 0.52, 0.38];
for (var i = 0; i < sizes.length; i++) {
url = soonDesign1CaptureCanvasRect(canvas, sizes[i], sizes[i], 'jpeg', quals[i]);
if (url && url.indexOf('data:image/') === 0 && url.length <= THUMB_MAX) break;
url = '';
}
hidden.forEach(function (obj) { obj.visible = true; });
canvas.renderAll();
if (canvas.requestRenderAll) canvas.requestRenderAll();
return url;
}
window.soonBuildDesign1SavePreviewPic = soonBuildDesign1SavePreviewPic;
window.display_func = function display_func(img1, img2, img3) {
$("#base_control").hide();
$("#line_control").hide();
@@ -217,13 +273,18 @@ window.display_func = function display_func(img1, img2, img3) {
left: all_left
});
g3.push(img1);
let url3 = new fabric.Group(g3).toDataURL({
height: 2787,
width: 2787,
top: all_top,
left: all_left
var hiddenForPreview = [];
canvas1.getObjects().forEach(function (o) {
if (o.isGuideLine) {
hiddenForPreview.push(o);
o.visible = false;
}
});
canvas1.discardActiveObject();
canvas1.renderAll();
let url3 = soonDesign1CaptureCanvasRect(canvas1, 2787, 2787, 'png');
hiddenForPreview.forEach(function (o) { o.visible = true; });
canvas1.renderAll();
let url5 = new fabric.Group(g5).toDataURL({
height: 2787,
width: 2787,
frontend-web/js/design1/ui.js
+8
View File
@@ -1453,6 +1453,7 @@ $("#new").click(function () {
// ===========================================================
$("#text_y").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
if ($("#text_y").val() == "") {
$("#text_y").val(0)
@@ -1466,6 +1467,7 @@ $("#text_y").bind('input propertychange', function () {
window.recordState();
})
$("#text_x").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
if ($("#text_x").val() == "") {
$("#text_x").val(0)
@@ -1479,6 +1481,7 @@ $("#text_x").bind('input propertychange', function () {
window.recordState();
})
$("#text_w").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
let val = "0";
if ($("#text_w").val() != "") {
@@ -1497,6 +1500,7 @@ $("#text_w").bind('input propertychange', function () {
window.recordState();
})
$("#text_h").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
let idx = getIndex(canvas.getActiveObject());
if (idx <= 0 || !objs[idx - 1]) return;
@@ -1523,6 +1527,7 @@ $("#text_h").bind('input propertychange', function () {
window.recordState();
})
$("#text_r").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
if ($("#text_r").val() == "") {
$("#text_r").val("0")
@@ -1619,6 +1624,7 @@ $("#text_back_color").bind('input propertychange', function () {
window.recordState();
})
$("#text_size").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
let val = 1
if (parseFloat($("#text_size").val())) {
val = parseFloat($("#text_size").val())
@@ -1671,6 +1677,7 @@ $("#out_text_back_color").bind('input propertychange', function () {
window.recordState();
})
$("#out_text_size").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
let val = 1
if (parseFloat($("#out_text_size").val())) {
val = parseFloat($("#out_text_size").val())
@@ -1786,6 +1793,7 @@ $("#counter_color").bind('input propertychange', function () {
window.recordState();
})
$("#count_size").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
let val = 1
if (parseFloat($("#count_size").val())) {
val = parseFloat($("#count_size").val())