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