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" <input min="1" max="600" step="0.5" lay-affix="number" type="number" class="ui-input"
style="width: 50%" id="out_text_size" /> style="width: 50%" id="out_text_size" />
</div> </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"> <div class="component-line">
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span> <span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
<input type="color" id="out_text_color" class="input_color"> <input type="color" id="out_text_color" class="input_color">
@@ -494,11 +511,11 @@
</div> </div>
<div class="line"></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='zh'>中文-简体</option>
<option value='ozh'>中文-繁體</option> <option value='ozh'>中文-繁體</option>
<option value='en'>English</option> <option value='en'>English</option>
</select> --> </select>
</div> </div>
</div> </div>
<div class="mode3"> <div class="mode3">
@@ -2221,7 +2238,8 @@
"y": parseInt((xy[1] - background_image1.top).toFixed(0)), "y": parseInt((xy[1] - background_image1.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)), "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).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) { } else if (type == 8) {
//二维码 //二维码
@@ -2360,7 +2378,8 @@
"y": parseInt((xy[1] - background_image2.top).toFixed(0)), "y": parseInt((xy[1] - background_image2.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)), "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).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) { } else if (type == 8) {
//二维码 //二维码
@@ -2819,7 +2838,8 @@
"y": parseInt((xy[1] - background_image1.top).toFixed(0)), "y": parseInt((xy[1] - background_image1.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)), "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).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) { } else if (type == 8) {
//二维码 //二维码
@@ -2958,7 +2978,8 @@
"y": parseInt((xy[1] - background_image2.top).toFixed(0)), "y": parseInt((xy[1] - background_image2.top).toFixed(0)),
"h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)), "h": parseInt((item.get("scaleY") * item.get("height")).toFixed(0)),
"w": parseInt((item.get("scaleX") * item.get("width")).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) { } else if (type == 8) {
//二维码 //二维码
@@ -3899,6 +3920,46 @@
canvas.renderAll(); 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 () { $("#out_text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) { if ($(this).hasClass("ui-radio-acitve")) {
//已选 //已选
@@ -4995,7 +5056,8 @@
textBackgroundColor: "", textBackgroundColor: "",
underline: false, underline: false,
linethrough: false, linethrough: false,
fontFamily: 'Arial' fontFamily: 'Arial',
textAlign: 'center'
}); });
//text.on({ //text.on({
@@ -5018,7 +5080,7 @@
text.setControlVisible("mb", false); text.setControlVisible("mb", false);
canvas.add(text); 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(); canvas.renderAll();
updateList(); updateList();
recordState(); recordState();
@@ -5026,6 +5088,14 @@
function selectOutText() { function selectOutText() {
//color //color
//size //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_control").show();
$("#out_text_color").val(canvas.getActiveObject().get("fill")); $("#out_text_color").val(canvas.getActiveObject().get("fill"));
$("#out_text_text").val(canvas.getActiveObject().get("text")); $("#out_text_text").val(canvas.getActiveObject().get("text"));
@@ -5987,7 +6057,7 @@
, area: '450px;' , area: '450px;'
, id: 'LAY_layuipro' //设定一个id，防止重复弹出 , id: 'LAY_layuipro' //设定一个id，防止重复弹出
, moveType: 1 //拖拽模式，0或者1 , 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 () { $("#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;"> style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
</div> </div>
</div> </div>
<!-- <div class="component-line"> <div class="component-line">
<span class="name" language="m" zh="直径：" ozh="直径：" en="Diameter:"></span> <span class="name" language="m" zh="直径：" ozh="直径：" en="Diameter:"></span>
<div id="circle_text_diameter" <div id="circle_text_diameter"
style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;"> style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
</div> </div>
</div> --> </div>
<div class="component-line"> <div class="component-line">
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span> <span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
<input type="color" id="circle_text_color" class="input_color"> <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" <input min="1" max="300" step="0.5" lay-affix="number" type="number" class="ui-input"
style="width: 50%" id="out_text_size" /> style="width: 50%" id="out_text_size" />
</div> </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"> <div class="component-line">
<span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span> <span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
<input type="color" id="out_text_color" class="input_color"> <input type="color" id="out_text_color" class="input_color">
@@ -1248,7 +1265,7 @@
left: left / zoom left: left / zoom
}) })
g3.push(img1) // g3.push(img1)
let url3 = new fabric.Group(g3).toDataURL({ let url3 = new fabric.Group(g3).toDataURL({
height: 648, height: 648,
width: 1012, width: 1012,
@@ -1350,7 +1367,7 @@
height: 648, height: 648,
width: 1012 width: 1012
}) })
g4.push(img2) // g4.push(img2)
let url4 = new fabric.Group(g4).toDataURL({ let url4 = new fabric.Group(g4).toDataURL({
height: 648, height: 648,
width: 1012, width: 1012,
@@ -1383,7 +1400,7 @@
const buffer3 = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64'); const buffer3 = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64');
const printPath3 = path.join(exePath, 'print3.png'); const printPath3 = path.join(exePath, 'print3.png');
fs.writeFileSync(printPath3, buffer3); 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'); const printPath4 = path.join(exePath, 'print4.png');
fs.writeFileSync(printPath4, buffer4); fs.writeFileSync(printPath4, buffer4);
if ((objs1.length != 0) & (objs2.length == 0)) { if ((objs1.length != 0) & (objs2.length == 0)) {
@@ -1763,7 +1780,8 @@
y: parseInt((xy[1] - background_image1.top).toFixed(0)), y: parseInt((xy[1] - background_image1.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)), h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).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) { } else if (type == 8) {
//二维码 //二维码
@@ -1878,7 +1896,8 @@
y: parseInt((xy[1] - background_image2.top).toFixed(0)), y: parseInt((xy[1] - background_image2.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)), h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).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) { } else if (type == 8) {
//二维码 //二维码
@@ -2254,7 +2273,8 @@
y: parseInt((xy[1] - background_image1.top).toFixed(0)), y: parseInt((xy[1] - background_image1.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)), h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).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) { } else if (type == 8) {
//二维码 //二维码
@@ -2369,7 +2389,8 @@
y: parseInt((xy[1] - background_image2.top).toFixed(0)), y: parseInt((xy[1] - background_image2.top).toFixed(0)),
h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)), h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)),
w: parseInt((item.get('scaleX') * item.get('width')).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) { } else if (type == 8) {
//二维码 //二维码
@@ -3296,6 +3317,45 @@
recordState(); recordState();
canvas.renderAll(); 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 () { $('#out_text_italics').click(function () {
if ($(this).hasClass('ui-radio-acitve')) { if ($(this).hasClass('ui-radio-acitve')) {
//已选 //已选
@@ -4356,7 +4416,7 @@
$("#circle_text_color").val(canvas.getActiveObject().get("fill")); $("#circle_text_color").val(canvas.getActiveObject().get("fill"));
$("#circle_text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor")); $("#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_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_text").val(canvas.getActiveObject().get("text"));
$("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily")); $("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily"));
@@ -4406,7 +4466,8 @@
textBackgroundColor: '', textBackgroundColor: '',
underline: false, underline: false,
linethrough: false, linethrough: false,
fontFamily: 'Arial' fontFamily: 'Arial',
textAlign: 'center'
}) })
//text.on({ //text.on({
@@ -4429,7 +4490,7 @@
text.setControlVisible('mb', false) text.setControlVisible('mb', false)
canvas.add(text) 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() canvas.renderAll()
updateList() updateList()
recordState() recordState()
@@ -4437,6 +4498,14 @@
function selectOutText() { function selectOutText() {
//color //color
//size //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_control').show()
$('#out_text_color').val(canvas.getActiveObject().get('fill')) $('#out_text_color').val(canvas.getActiveObject().get('fill'))
$('#out_text_text').val(canvas.getActiveObject().get('text')) $('#out_text_text').val(canvas.getActiveObject().get('text'))
@@ -5379,7 +5448,7 @@
content: 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;">' + '<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') + language_str('vers') +
' 2.1.2</div><div style="font-size:14px;">' + ' 3.0.1</div><div style="font-size:14px;">' +
language_str('copyright') + language_str('copyright') +
'</div></div>' '</div></div>'
}) })
@@ -5512,20 +5581,20 @@
}) })
canvas1.on("object:moving", function (e) { canvas1.on("object:moving", function (e) {
let obj = canvas.getActiveObject() let obj = canvas.getActiveObject()
if (objs[getIndex(e.target) - 1].type ===11) { // if (objs[getIndex(e.target) - 1].type ===11) {
let pointer = { // let pointer = {
x: obj.left, // x: obj.left,
y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2 // y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2
} // }
console.log(obj) // console.log(obj)
let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2) // let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
let angleDeg = getDeg(pointer) // let angleDeg = getDeg(pointer)
let flipped = pointer.y > canvas.height/2 ? true : false // let flipped = pointer.y > canvas.height/2 ? true : false
obj.set("diameter", distance*2); // obj.set("diameter", distance*2);
obj.set("angle", angleDeg); // obj.set("angle", angleDeg);
obj.set("flipped", flipped); // obj.set("flipped", flipped);
// canvas.renderAll(); // // canvas.renderAll();
} // }
updateControls(); updateControls();
}); });
canvas1.on('object:scaling', function (event) { canvas1.on('object:scaling', function (event) {
@@ -6078,8 +6147,8 @@
}); });
var circle_text_diameter = slider.render({ var circle_text_diameter = slider.render({
elem: '#circle_text_diameter', elem: '#circle_text_diameter',
min: 500, min: 50,
max: 4000 max: 1100
, change: function (value) { , change: function (value) {
canvas.getActiveObject().set("diameter", value); canvas.getActiveObject().set("diameter", value);
canvas.renderAll(); 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{ .component-line span{
color: #969FA7; 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{ .ui-input{
background-color: #31373D; background-color: #31373D;
border: #646E76 solid 1px; border: #646E76 solid 1px;