优化对齐方式，卡片直径、打印等
This commit is contained in:
24kycj
+98
-29
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user