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-04-10 09:11:11 +08:00
parent e8c3870820
commit d3c79b8399
7 changed files with 189 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data.json
+1 -1
View File
@@ -1 +1 @@
{"history":[{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi6.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi7.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi5.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi.soon"}]}
{"history":[{"time":"2025-4-10","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi6.soon"},{"time":"2025-4-10","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi7.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi5.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi.soon"}]}
design1.html
+79 -9
View File
@@ -246,6 +246,23 @@
<input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
style="width: 50%" id="out_text_size" />
</div>
<div class="component-line" style="margin-left: 2px;display: flex; align-items: center;gap: 10px;">
<span class="name" language="m" zh="对齐方式：" ozh="對齊方式：" en="Alignment:"></span>
<div class="mode2" style="margin-left: 2px;border: none;display: flex; align-items: center;gap: 10px;">
<div class="tool">
<img src="public/images/left24.png" id="out_left_alignment" language="t" zh="左对齐" ozh="左對齊"
en="Left Alignment" />
</div>
<div class="tool">
<img src="public/images/right24.png" id="out_right_alignment" language="t" zh="右对齐" ozh="右對齊"
en="Right Alignment" />
</div>
<div class="tool">
<img src="public/images/center_x24.png" id="out_center_alignment" language="t" zh="居中对齐"
ozh="居中對齊" en="Center Alignment" />
</div>
</div>
</div>
<div class="component-line">
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
<input type="color" id="out_text_color" class="input_color">
@@ -494,11 +511,11 @@
</div>
<div class="line"></div>
<!-- <select class="ui-select" id="language_select" style="margin-left: 10px">
<select class="ui-select" id="language_select" style="margin-left: 10px">
<option value='zh'>中文-简体</option>
<option value='ozh'>中文-繁體</option>
<option value='en'>English</option>
</select> -->
</select>
</div>
</div>
<div class="mode3">
@@ -2221,7 +2238,8 @@
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
"rotate": parseInt(item.get("angle").toFixed(0))
"rotate": parseInt(item.get("angle").toFixed(0)),
align: objs1[idx - 1].align
});
} else if (type == 8) {
//二维码
@@ -2360,7 +2378,8 @@
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
"rotate": parseInt(item.get("angle").toFixed(0))
"rotate": parseInt(item.get("angle").toFixed(0)),
align: objs2[idx - 1].align
});
} else if (type == 8) {
//二维码
@@ -2819,7 +2838,8 @@
"y": parseInt((xy[1] - background_image1.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
"rotate": parseInt(item.get("angle").toFixed(0))
"rotate": parseInt(item.get("angle").toFixed(0)),
align: objs1[idx - 1].align
});
} else if (type == 8) {
//二维码
@@ -2958,7 +2978,8 @@
"y": parseInt((xy[1] - background_image2.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).toFixed(0)),
"rotate": parseInt(item.get("angle").toFixed(0))
"rotate": parseInt(item.get("angle").toFixed(0)),
align: objs2[idx - 1].align
});
} else if (type == 8) {
//二维码
@@ -3899,6 +3920,46 @@
canvas.renderAll();
});
$('#out_left_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_left_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'left')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'left'
recordState()
canvas.renderAll()
})
$('#out_right_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_right_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'right')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'right'
recordState()
canvas.renderAll()
})
$('#out_center_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_center_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'center')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'center'
recordState()
canvas.renderAll()
})
$("#out_text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
@@ -4995,7 +5056,8 @@
textBackgroundColor: "",
underline: false,
linethrough: false,
fontFamily: 'Arial'
fontFamily: 'Arial',
textAlign: 'center'
});
//text.on({
@@ -5018,7 +5080,7 @@
text.setControlVisible("mb", false);
canvas.add(text);
objs.push({ type: 4, name: resName("OUT_TEXT_"), exceed: false, autoWrap: false, fixSize: false, black: false });
objs.push({ type: 4, name: resName("OUT_TEXT_"), exceed: false, autoWrap: false, fixSize: false, black: false, align: 'center' });
canvas.renderAll();
updateList();
recordState();
@@ -5026,6 +5088,14 @@
function selectOutText() {
//color
//size
const align = canvas.getActiveObject().get('textAlign')
if (align === 'left') {
$('#out_left_alignment').parent().addClass('tool1')
} else if (align === 'right') {
$('#out_right_alignment').parent().addClass('tool1')
} else {
$('#out_center_alignment').parent().addClass('tool1')
}
$("#out_text_control").show();
$("#out_text_color").val(canvas.getActiveObject().get("fill"));
$("#out_text_text").val(canvas.getActiveObject().get("text"));
@@ -5987,7 +6057,7 @@
, area: '450px;'
, id: 'LAY_layuipro' //设定一个id，防止重复弹出
, moveType: 1 //拖拽模式，0或者1
, content: '<div style="padding-top:20px;padding-bottom:30px;background-color: #32363A; color: #fff; font-weight: 300;text-align:center;"><div style="width: 120px;margin: 0 auto;"><img style="width: 120px;" src="./public/images/IconA.png"></div><div style="font-size:24px;">Soon Design</div><div style="font-size:14px;">' + language_str("vers") + ' 2.1.2</div><div style="font-size:14px;">' + language_str("copyright") + '</div></div>'
, content: '<div style="padding-top:20px;padding-bottom:30px;background-color: #32363A; color: #fff; font-weight: 300;text-align:center;"><div style="width: 120px;margin: 0 auto;"><img style="width: 120px;" src="./public/images/IconA.png"></div><div style="font-size:24px;">Soon Design</div><div style="font-size:14px;">' + language_str("vers") + ' 3.0.1</div><div style="font-size:14px;">' + language_str("copyright") + '</div></div>'
});
})
$("#help").click(function () {
design2.html
+98 -29
View File
@@ -187,12 +187,12 @@
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
</div>
</div>
<!-- <div class="component-line">
<div class="component-line">
<span class="name" language="m" zh="直径：" ozh="直径：" en="Diameter:"></span>
<div id="circle_text_diameter"
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
</div>
</div> -->
</div>
<div class="component-line">
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
<input type="color" id="circle_text_color" class="input_color">
@@ -233,6 +233,23 @@
<input min="1" max="300" step="0.5" lay-affix="number" type="number" class="ui-input"
style="width: 50%" id="out_text_size" />
</div>
<div class="component-line" style="margin-left: 2px;display: flex; align-items: center;gap: 10px;">
<span class="name" language="m" zh="对齐方式：" ozh="對齊方式：" en="Alignment:"></span>
<div class="mode2" style="margin-left: 2px;border: none;display: flex; align-items: center;gap: 10px;">
<div class="tool">
<img src="public/images/left24.png" id="out_left_alignment" language="t" zh="左对齐" ozh="左對齊"
en="Left Alignment" />
</div>
<div class="tool">
<img src="public/images/right24.png" id="out_right_alignment" language="t" zh="右对齐" ozh="右對齊"
en="Right Alignment" />
</div>
<div class="tool">
<img src="public/images/center_x24.png" id="out_center_alignment" language="t" zh="居中对齐"
ozh="居中對齊" en="Center Alignment" />
</div>
</div>
</div>
<div class="component-line">
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
<input type="color" id="out_text_color" class="input_color">
@@ -1248,7 +1265,7 @@
left: left / zoom
})
g3.push(img1)
// g3.push(img1)
let url3 = new fabric.Group(g3).toDataURL({
height: 648,
width: 1012,
@@ -1350,7 +1367,7 @@
height: 648,
width: 1012
})
g4.push(img2)
// g4.push(img2)
let url4 = new fabric.Group(g4).toDataURL({
height: 648,
width: 1012,
@@ -1383,7 +1400,7 @@
const buffer3 = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64');
const printPath3 = path.join(exePath, 'print3.png');
fs.writeFileSync(printPath3, buffer3);
const buffer4 = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64');
const buffer4 = Buffer.from(url4.replace(/^data:image\/\w+;base64,/, ""), 'base64');
const printPath4 = path.join(exePath, 'print4.png');
fs.writeFileSync(printPath4, buffer4);
if ((objs1.length != 0) & (objs2.length == 0)) {
@@ -1763,7 +1780,8 @@
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
rotate: parseInt(item.get('angle').toFixed(0))
rotate: parseInt(item.get('angle').toFixed(0)),
align: objs1[idx - 1].align
})
} else if (type == 8) {
//二维码
@@ -1878,7 +1896,8 @@
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
rotate: parseInt(item.get('angle').toFixed(0))
rotate: parseInt(item.get('angle').toFixed(0)),
align: objs2[idx - 1].align
})
} else if (type == 8) {
//二维码
@@ -2254,7 +2273,8 @@
y: parseInt((xy[1] - background_image1.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
rotate: parseInt(item.get('angle').toFixed(0))
rotate: parseInt(item.get('angle').toFixed(0)),
align: objs1[idx - 1].align
})
} else if (type == 8) {
//二维码
@@ -2369,7 +2389,8 @@
y: parseInt((xy[1] - background_image2.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)),
rotate: parseInt(item.get('angle').toFixed(0))
rotate: parseInt(item.get('angle').toFixed(0)),
align: objs2[idx - 1].align
})
} else if (type == 8) {
//二维码
@@ -3296,6 +3317,45 @@
recordState();
canvas.renderAll();
});
$('#out_left_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_left_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'left')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'left'
recordState()
canvas.renderAll()
})
$('#out_right_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_right_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'right')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'right'
recordState()
canvas.renderAll()
})
$('#out_center_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_center_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'center')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'center'
recordState()
canvas.renderAll()
})
$('#out_text_italics').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选
@@ -4356,7 +4416,7 @@
$("#circle_text_color").val(canvas.getActiveObject().get("fill"));
$("#circle_text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor"));
circle_text_size.setValue(canvas.getActiveObject().get("fontSize") - 10);
circle_text_diameter.setValue(canvas.getActiveObject().get("diameter")-500);
circle_text_diameter.setValue(canvas.getActiveObject().get("diameter")-50);
$("#circle_text_text").val(canvas.getActiveObject().get("text"));
$("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily"));
@@ -4406,7 +4466,8 @@
textBackgroundColor: '',
underline: false,
linethrough: false,
fontFamily: 'Arial'
fontFamily: 'Arial',
textAlign: 'center'
})
//text.on({
@@ -4429,7 +4490,7 @@
text.setControlVisible('mb', false)
canvas.add(text)
objs.push({ type: 4, name: resName('OUT_TEXT_'), exceed: false, autoWrap: false, fixSize: false, black: false })
objs.push({ type: 4, name: resName('OUT_TEXT_'), exceed: false, autoWrap: false, fixSize: false, black: false, align: 'center' })
canvas.renderAll()
updateList()
recordState()
@@ -4437,6 +4498,14 @@
function selectOutText() {
//color
//size
const align = canvas.getActiveObject().get('textAlign')
if (align === 'left') {
$('#out_left_alignment').parent().addClass('tool1')
} else if (align === 'right') {
$('#out_right_alignment').parent().addClass('tool1')
} else {
$('#out_center_alignment').parent().addClass('tool1')
}
$('#out_text_control').show()
$('#out_text_color').val(canvas.getActiveObject().get('fill'))
$('#out_text_text').val(canvas.getActiveObject().get('text'))
@@ -5379,7 +5448,7 @@
content:
'<div style="padding-top:20px;padding-bottom:30px;background-color: #32363A; color: #fff; font-weight: 300;text-align:center;"><div style="width: 120px;margin: 0 auto;"><img style="width: 120px;" src="./public/images/IconA.png"></div><div style="font-size:24px;">Soon Design</div><div style="font-size:14px;">' +
language_str('vers') +
' 2.1.2</div><div style="font-size:14px;">' +
' 3.0.1</div><div style="font-size:14px;">' +
language_str('copyright') +
'</div></div>'
})
@@ -5512,20 +5581,20 @@
})
canvas1.on("object:moving", function (e) {
let obj = canvas.getActiveObject()
if (objs[getIndex(e.target) - 1].type ===11) {
let pointer = {
x: obj.left,
y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2
}
console.log(obj)
let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
let angleDeg = getDeg(pointer)
let flipped = pointer.y > canvas.height/2 ? true : false
obj.set("diameter", distance*2);
obj.set("angle", angleDeg);
obj.set("flipped", flipped);
// canvas.renderAll();
}
// if (objs[getIndex(e.target) - 1].type ===11) {
// let pointer = {
// x: obj.left,
// y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2
// }
// console.log(obj)
// let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
// let angleDeg = getDeg(pointer)
// let flipped = pointer.y > canvas.height/2 ? true : false
// obj.set("diameter", distance*2);
// obj.set("angle", angleDeg);
// obj.set("flipped", flipped);
// // canvas.renderAll();
// }
updateControls();
});
canvas1.on('object:scaling', function (event) {
@@ -6078,8 +6147,8 @@
});
var circle_text_diameter = slider.render({
elem: '#circle_text_diameter',
min: 500,
max: 4000
min: 50,
max: 1100
, change: function (value) {
canvas.getActiveObject().set("diameter", value);
canvas.renderAll();
output.pdf
BIN
View File
Binary file not shown.
print3.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 26 KiB

print4.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 14 KiB

public/css/design.css
+11
View File
@@ -180,6 +180,17 @@ img {
.component-line span{
color: #969FA7;
}
.component-line .tool {
cursor: pointer;
padding: 4px;
}
.component-line .tool:hover{
background-color: #646E76;
}
.component-line .tool1 {
background-color: #646E76;
padding: 4px;
}
.ui-input{
background-color: #31373D;
border: #646E76 solid 1px;