yangchunjin/SoonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
877fd278c26dfbb56e6adb01061c575c4a100690
SoonDesign/frontend-web/js/design2-back.js
T
24kycj 88c6ce8ccc 重构 monorepo 并完善网页端订阅与首页体验 
- 迁移为 frontend-web、frontend-electron、backend-web 与 docker 部署结构
- 网页端：订阅门禁二次弹窗、套餐/支付组件化、顶栏分组对齐
- 首页：最近文件与模板库布局优化，缩略图对齐，下载与删除操作
- 新增管理后台、支付与云端文件 API，更新 README 与项目规范

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 18:17:39 +08:00

6145 lines
356 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
function desEncrypt(str, key = 'df6a551ca43181fc485f3043bcdd2fbc') {
var APIFMS
try {
var keyHex_encrypt = CryptoJS.enc.Utf8.parse(key)
var encrypted = CryptoJS.DES.encrypt(str, keyHex_encrypt, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
})
APIFMS = CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
} catch (err) {
console.log('des 加密 -------------------------')
console.log(err)
}
return APIFMS
}
(function (fabric) {
fabric.CurvedText = fabric.util.createClass(fabric.Object, {
type: 'curved-text',
diameter: 250,
kerning: 0,
text: '',
flipped: false,
fill: '#000',
fontFamily: 'Times New Roman',
fontSize: 24, // in px
fontWeight: 'normal',
fontStyle: '', // "normal", "italic" or "oblique".
cacheProperties: fabric.Object.prototype.cacheProperties.concat('diameter', 'textBackgroundColor', 'kerning', 'flipped', 'fill', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'strokeStyle', 'strokeWidth'),
strokeStyle: null,
strokeWidth: 0,
initialize: function (text, options) {
options || (options = {});
if (typeof text === 'object' && text) {
for (let key in text) {
this[key] = text[key]
}
} else {
this.text = text;
}
this.callSuper('initialize', options);
this.set('lockUniScaling', true);
var canvas = this.getCircularText();
this.cropCanvas(canvas);
this.set('width', canvas.width);
this.set('height', canvas.height);
},
_getFontDeclaration: function () {
return [
(fabric.isLikelyNode ? this.fontWeight : this.fontStyle),
(fabric.isLikelyNode ? this.fontStyle : this.fontWeight),
this.fontSize + 'px',
(fabric.isLikelyNode ? ('"' + this.fontFamily + '"') : this.fontFamily)
].join(' ');
},
cropCanvas: function (canvas) {
var ctx = canvas.getContext('2d'),
w = canvas.width,
h = canvas.height,
pix = { x: [], y: [] }, n,
imageData = ctx.getImageData(0, 0, w, h),
fn = function (a, b) { return a - b };
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
if (imageData.data[((y * w + x) * 4) + 3] > 0) {
pix.x.push(x);
pix.y.push(y);
}
}
}
// 如果没有找到任何非透明像素，直接返回，不进行裁剪
if (pix.x.length === 0 || pix.y.length === 0) {
return;
}
pix.x.sort(fn);
pix.y.sort(fn);
n = pix.x.length - 1;
w = pix.x[n] - pix.x[0];
h = pix.y[n] - pix.y[0];
// 确保宽度和高度是有效的正数
if (w <= 0 || h <= 0 || isNaN(w) || isNaN(h)) {
return;
}
var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
canvas.width = w;
canvas.height = h;
ctx.putImageData(cut, 0, 0);
},
getCircularText: function () {
var text = this.text,
diameter = this.diameter,
flipped = this.flipped,
kerning = this.kerning,
fill = this.fill,
inwardFacing = true,
startAngle = 0,
canvas = fabric.util.createCanvasElement(),
ctx = canvas.getContext('2d'),
cw, // character-width
x, // iterator
clockwise = -1; // draw clockwise for aligned right. Else Anticlockwise
if (flipped) {
// startAngle = 180;
inwardFacing = false;
}
startAngle *= Math.PI / 180; // convert to radians
var d = document.createElement('div');
d.style.fontFamily = this.fontFamily;
d.style.fontSize = this.fontSize + 'px';
d.style.fontWeight = this.fontWeight;
d.style.fontStyle = this.fontStyle;
d.textContent = text;
document.body.appendChild(d);
var textHeight = d.offsetHeight;
document.body.removeChild(d);
canvas.width = canvas.height = diameter;
ctx.font = this._getFontDeclaration();
if (inwardFacing) { text = text.split('').reverse().join('') };
ctx.translate(diameter / 2, diameter / 2); // Move to center
startAngle += (Math.PI * !inwardFacing); // Rotate 180 if outward
ctx.textBaseline = 'middle'; // Ensure we draw in exact center
ctx.textAlign = 'center'; // Ensure we draw in exact center
for (x = 0; x < text.length; x++) {
cw = ctx.measureText(text[x]).width;
startAngle += ((cw + (x == text.length - 1 ? 0 : kerning)) / (diameter / 2 - textHeight)) / 2 * -clockwise;
}
ctx.rotate(startAngle);
for (x = 0; x < text.length; x++) {
cw = ctx.measureText(text[x]).width; // half letter
ctx.rotate((cw / 2) / (diameter / 2 - textHeight) * clockwise);
if (this.strokeStyle && this.strokeWidth) {
ctx.strokeStyle = this.strokeStyle;
ctx.lineWidth = this.strokeWidth;
ctx.miterLimit = 2;
ctx.strokeText(text[x], 0, (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2));
}
ctx.fillStyle = fill;
ctx.fillText(text[x], 0, (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2));
ctx.rotate((cw / 2 + kerning) / (diameter / 2 - textHeight) * clockwise); // rotate half letter
}
return canvas;
},
_set: function (key, value) {
switch (key) {
case 'scaleX':
this.fontSize *= value;
this.diameter *= value;
this.width *= value;
this.scaleX = 1;
if (this.width < 1) { this.width = 1; }
break;
case 'scaleY':
this.height *= value;
this.scaleY = 1;
if (this.height < 1) { this.height = 1; }
break;
default:
this.callSuper('_set', key, value);
break;
}
},
_render: function (ctx) {
var canvas = this.getCircularText();
this.cropCanvas(canvas);
this.set('width', canvas.width);
this.set('height', canvas.height);
ctx.drawImage(canvas, -this.width / 2, -this.height / 2, this.width, this.height);
this.setCoords();
},
toObject: function (propertiesToInclude) {
return this.callSuper('toObject', ['text', 'diameter', 'textBackgroundColor', 'kerning', 'flipped', 'fill', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'strokeStyle', 'strokeWidth'].concat(propertiesToInclude));
}
});
fabric.CurvedText.fromObject = function (object, callback, forceAsync) {
return fabric.Object._fromObject('CurvedText', object, callback, forceAsync, 'curved-text');
};
})(typeof fabric !== 'undefined' ? fabric : require('fabric').fabric);
const remote = require('@electron/remote')
var path = require('path');
// 使用用户数据目录，避免写入需要管理员权限
const exePath = remote.app.getPath('userData')
const { ipcRenderer } = require('electron')
const { dialog } = require('@electron/remote')
var jrQrcode = require('jr-qrcode')
var JsBarcode = require('jsbarcode')
ipcRenderer.send('get-sys-fonts')
ipcRenderer.send('get-scale-rate')
const { clipboard } = require('electron')
const dpi = 300
// 内部剪贴板
let clipboardData = {
objects: null,
offset: 10 // 粘贴位置偏移量
};
//var encrypt = new JSEncrypt();
//encrypt.setPublicKey(`-----BEGIN PUBLIC KEY-----
//MIGdMA0GCSqGSIb3DQEBAQUAA4GLADCBhwKBgQDAbKQ46WevL9PapJ+AlZqSzczkTovu7STH
//FmZmIJcNrwPPEWRR2PliUvtS28V+gNMWlu3wNWFAS5KGDbTtndIrP3hnlp9BDIcAcdNuJUM7
//yJfAYBhtkqvj45Orvdd2RYRxhkQb34uTNXpM+biMH6Wd0wykNb9/VBNM0C12KswEdwIBEQ==
//-----END PUBLIC KEY-----`);
layui.use(['layer', 'slider', 'form', 'colorpicker'], function () {
let myDate = new Date()
let s_lan = ''
ipcRenderer.send('get-sys-language')
/* if(myDate.getFullYear()>2021 && myDate.getMonth() >= 1 && myDate.getDate() > 15){
}*/
function GetFile() {
const params = new URLSearchParams(window.location.search);
return params
}
function langua_ge(lan = 'zh') {
$("[language='m']").each(function (i) {
$(this).html($(this).attr(lan))
})
$("[language='t']").each(function (i) {
$(this).attr('title', $(this).attr(lan))
})
}
function language_str(str) {
let t = {
whetherSave: { zh: '是否保存当前文件？', ozh: '是否保存當前文件？', en: 'Do you want to save the current file?' },
save: { zh: '保存', ozh: '保存', en: 'Save' },
noSave: { zh: '不保存', ozh: '不保存', en: 'No saving' },
cancel: { zh: '取消', ozh: '取消', en: 'Cancel' },
saveSucc: { zh: '保存成功至', ozh: '保存成功至', en: 'Save successfully to' },
saveFile: { zh: '保存文件', ozh: '保存文件', en: 'Save file' },
display: { zh: '预览', ozh: '預覽', en: 'Display' },
output: { zh: '导出', ozh: '導出', en: 'Export' },
bg: { zh: '背景', ozh: '背景', en: 'Background' },
selectPic: { zh: '请选择图片', ozh: '請選擇圖片', en: 'Please select a picture' },
selectPic: { zh: '请选择文件', ozh: '請選擇文件', en: 'Please select a file' },
img: { zh: '圖片', ozh: '圖片', en: 'Image' },
simg: { zh: '合成圖片', ozh: '合成圖片', en: 'Synthesized Image' },
text: { zh: '文本', ozh: '文本', en: 'Text' },
"ctext": { zh: "圆形文本", ozh: "圆形文本", en: "Circle Text" },
stext: { zh: '合成文本', ozh: '合成文本', en: 'Synthesized Text' },
rect: { zh: '矩形', ozh: '矩形', en: 'Rectangle' },
circ: { zh: '圓形', ozh: '圓形', en: 'Circle' },
line: { zh: '直線', ozh: '直線', en: 'Line' },
qrc: { zh: '二維碼', ozh: '二維碼', en: 'QR code' },
barc: { zh: '條形碼', ozh: '條形碼', en: 'Barcode' },
counter: { zh: '計數器', ozh: '计数器', en: 'Counter' },
about: { zh: '关于Soon Design', ozh: '關於Soon Design', en: 'About Soon Design' },
vers: { zh: '版本', ozh: '版本', en: 'Version' },
comf: { zh: '确认', ozh: '確認', en: 'Select' },
copyright: { zh: "© 2022 cardsoon Co., Ltd. All rights reserved.", ozh: "© 2022 cardsoon Co., Ltd. All rights reserved.", en: "© 2022 cardsoon Co., Ltd. All rights reserved." }
}
return t[str][s_lan]
}
var $ = layui.$
var layer = layui.layer,
slider = layui.slider,
colorpicker = layui.colorpicker
let addState = 0 //0是不添加
let background_image, background_image1, background_image2
let bg_version = 1 //front_bg1.png front_bg2.png
var zoom = 0
$('#canvas1').attr('height', document.body.clientHeight - 100)
$('#canvas2').attr('height', document.body.clientHeight - 100)
$('#object_attribute').css('height', '470px')
$('#obj_list').css('height', document.body.clientHeight - 520)
$('.obj_list').css('height', $('#obj_list').height() - 32)
$('.main').show()
$('#canvas1').attr('width', $('#canvas-div').width())
$('#canvas2').attr('width', $('#canvas-div').width())
var openAs = {
_name: '',
set name(val) {
if (val == '') {
$('title').html('Soon Design')
} else {
$('title').html('Soon Design - ' + val)
}
this._name = val
},
get name() {
return this._name
}
} //被打开的文件名
let objs1 = []
let objs2 = []
let step1 = { val: 0 },
step2 = { val: 0 }
let step = step1
let objs = objs1
let recordJson1 = [],
recordJson2 = [],
recordJson = recordJson1,
recordObjs1 = [],
recordObjs2 = [],
recordObjs = recordObjs1
let pre_objs1 = [],
pre_objs2 = [],
next_objs1 = [],
next_objs2 = [],
pre_objs = pre_objs1,
next_objs = next_objs1
let pre_json1 = [],
pre_json2 = [],
next_json1 = [],
next_json2 = [],
pre_json = pre_json1,
next_json = next_json1
var canvas1 = new fabric.Canvas('canvas1')
var canvas2 = new fabric.Canvas('canvas2')
fabric.Object.prototype.objectCaching = false
var ctx1 = canvas1.getSelectionContext()
var ctx2 = canvas2.getSelectionContext()
let is_bgi_add = false
canvas1.zoomToPoint(new fabric.Point(canvas1.width / 2, canvas1.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
//console.log(canvas1.width / 2, canvas1.height / 2);
//console.log($("#canvas-div").width() / 1200 > 1 ? 1 : $("#canvas-div").width() / 1200);
canvas2.zoomToPoint(new fabric.Point(canvas2.width / 2, canvas2.height / 2), $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200)
zoom = $('#canvas-div').width() / 1200 > 1 ? 1 : $('#canvas-div').width() / 1200
// 初始化标尺
initRulers();
$('#source_front').width(zoom * $('#source_front').width())
$('#source_back').width(zoom * $('#source_back').width())
$('.canvas-container:eq(1)').hide()
var canvas = canvas1
fabric.Object.prototype.set({
borderColor: '#9013FE',
cornerColor: '#9013FE', //激活状态角落图标的填充颜色
cornerStrokeColor: '#9013FE', //激活状态角落图标的边框颜色
borderOpacityWhenMoving: 1,
borderScaleFactor: 1,
cornerSize: 6,
cornerStyle: 'circle', //rect,circle
centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
transparentCorners: false, //激活状态角落的图标是否透明
rotatingPointOffset: 20, //旋转距旋转体的距离
padding: 0
})
canvas1.preserveObjectStacking = true
canvas2.preserveObjectStacking = true
var front_list = []
ipcRenderer.on('font-list', (event, data) => {
const newFontList = []
data.map((item) => {
if (item.indexOf('"') === 0) {
newFontList.push(item.replace(/^"|"$/g, ''))
} else {
newFontList.push(item)
}
})
front_list = newFontList
for (let item of front_list) {
$('#text_font_family').append("<option value='" + item + "'>" + item + '</option>')
$("#circle_text_font_family").append("<option value='" + item + "'>" + item + "</option>");
$('#out_text_font_family').append("<option value='" + item + "'>" + item + '</option>')
$('#barcode_font_family').append("<option value='" + item + "'>" + item + '</option>')
$('#count_font_family').append("<option value='" + item + "'>" + item + '</option>')
}
})
ipcRenderer.on('sys-lan', (event, data) => {
let lang = localStorage.getItem('lang')
if (lang) {
s_lan = lang
langua_ge(lang)
$('#language_select').val(lang)
return
}
switch (data) {
case 'zh-CN':
s_lan = 'zh'
langua_ge('zh')
$('#language_select').val('zh')
localStorage.setItem('lang', 'zh')
break
case 'zh':
s_lan = 'zh'
langua_ge('zh')
$('#language_select').val('zh')
localStorage.setItem('lang', 'zh')
break
case 'zh-TW':
s_lan = 'ozh'
langua_ge('ozh')
$('#language_select').val('ozh')
localStorage.setItem('lang', 'ozh')
break
case 'en':
s_lan = 'en'
langua_ge('en')
$('#language_select').val('en')
localStorage.setItem('lang', 'en')
break
case 'en-AU':
s_lan = 'en'
langua_ge('en')
$('#language_select').val('en')
localStorage.setItem('lang', 'en')
break
case 'en-CA':
s_lan = 'en'
langua_ge('en')
$('#language_select').val('en')
localStorage.setItem('lang', 'en')
break
case 'en-GB':
s_lan = 'en'
langua_ge('en')
$('#language_select').val('en')
localStorage.setItem('lang', 'en')
break
case 'en-NZ':
s_lan = 'en'
langua_ge('en')
$('#language_select').val('en')
localStorage.setItem('lang', 'en')
break
case 'en-US':
s_lan = 'en'
langua_ge('en')
$('#language_select').val('en')
localStorage.setItem('lang', 'en')
break
case 'en-ZA':
s_lan = 'en'
langua_ge('en')
$('#language_select').val('en')
localStorage.setItem('lang', 'en')
break
}
})
ipcRenderer.on('close', (event, message) => {
layer.confirm(
'<font style="color:black">' + language_str('whetherSave') + '</font>',
{
//是否保存当前文件？
btn: [language_str('save'), language_str('noSave'), language_str('cancel')], //['保存', '不保存', '取消']
btn3: function (index, layero) { }
},
function (index, layero) {
output(() => ipcRenderer.send('run-close'))
return
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let _g1 = [],
_g2 = []
let left = 0,
top = 0
for (let _o of canvas1.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g1.push(fabric.util.object.clone(_o))
}
let fp = new fabric.Group(_g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
; (left = 0), (top = 0)
for (let _o of canvas2.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g2.push(fabric.util.object.clone(_o))
}
//let fp = new fabric.Group(_g1).toDataURL();
let bp = new fabric.Group(_g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
if (openAs.name != '') {
//打开的文件
let fs = require('fs')
o.soonType = 2
fs.writeFileSync(openAs.name, JSON.stringify(o))
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
saveHistory()
ipcRenderer.send('run-close')
return
}
dialog
.showSaveDialog({
title: language_str('saveFile'), //'保存文件'
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
})
.then((result) => {
if (result.filePath == '') {
ipcRenderer.send('run-close')
return
}
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
result.filePath += '.soon'
}
let fs = require('fs')
o.soonType = 2
fs.writeFileSync(result.filePath, JSON.stringify(o))
openAs.name = result.filePath
layer.msg(language_str('saveSucc') + openAs.name) //保存成功至
saveHistory()
ipcRenderer.send('run-close')
})
.catch((err) => {
console.log()
})
layer.close(index)
},
function (index) {
ipcRenderer.send('run-close')
}
)
})
addBackground() //添加背景 白色卡片
initAligningGuidelines(canvas1)
initAligningGuidelines(canvas2)
//canvas.setZoom(0.5)
//recordObjs1.push(JSON.stringify(objs1));
//recordJson1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
//recordObjs2.push(JSON.stringify(objs2));
//recordJson2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
canvas.renderAll() //重新渲染画布
var zoomSlider = slider.render({
elem: '#zoomSlide', //绑定元素
min: 25,
max: 500,
value: 100,
change(val) {
canvas.zoomToPoint(new fabric.Point(canvas.width / 2, canvas.height / 2), val / 100)
zoom = val / 100
//$(".canvas-container").css("transform","scale(" + val / 100 + ")")
}
})
window.rotate = function (id) {
let angle = $(`#${id}`).attr('angle') - 0
angle += 90
$(`#${id}`).css('transform', `rotate(${angle}deg)`)
$(`#${id}`).attr('angle', angle)
}
$('#display').on('click', function () {
// 类型改变
fabric.Image.fromURL('./public/images/front_bg' + bg_version + '_2.png', function (i1) {
i1.left = background_image.left
i1.top = background_image.top
let img1 = i1
fabric.Image.fromURL('./public/images/back_bg_2.png', function (i2) {
i2.left = background_image.left
i2.top = background_image.top
let img2 = i2
fabric.Image.fromURL('./public/images/op_2.png', function (i3) {
i2.left = background_image.left
i2.top = background_image.top
let img3 = i3
display_func(img1, img2, img3)
})
})
})
})
// 导出文件
async function savePdf(buffer) {
let fs = require('fs');
// 弹出保存对话框
const { canceled, filePath } = await dialog.showSaveDialog({
title: '保存文件',
defaultPath: path.join(exePath, 'output.pdf'), // 默认路径
filters: [{ name: 'PDF 文件', extensions: ['pdf'] }] // 文件过滤器
});
if (canceled) {
console.log('用户取消了保存操作');
return;
}
// 将Buffer写入PNG文件到用户选择的路径
fs.writeFile(filePath, buffer, (err) => {
if (err) {
console.error('写入文件失败:', err);
} else {
layer.msg(language_str("saveSucc") + filePath);//'保存成功至'
console.log('PNG文件已保存至:', filePath);
}
});
}
function display_func(img1, img2, img3) {
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$('#circle_text_control').hide()
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
let _objs1 = canvas1.getObjects()
let g1 = []
let g3 = []
let g5 = []
let left = 0 //左裁剪
let top = 0 //顶裁剪
let black_left = 0 //黑色左裁剪
let black_top = 0 //黑色顶裁剪
let all_left = 0 //预览图左裁剪
let all_top = 0 //预览图顶裁剪
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
//console.log(getCoordsMinX(item.getCoords()));
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
//console.log("------");
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g3.push(fabric.util.object.clone(item))
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
continue //计数器 或 合成文字
}
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
continue //二维码 条形码
}
if (idx != 0 && objs1[idx - 1].type == 2) {
continue //合成图片
}
if (
idx != 0 &&
((objs1[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
(
objs1[idx - 1].type == 11
&&
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
//圆形文字 && 黑色
) ||
//文字 && 黑色
(objs1[idx - 1].type == 5 && //矩形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs1[idx - 1].type == 6 && //圆形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs1[idx - 1].type == 7 && //直线
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
objs1[idx - 1].black == true) //勾选并入黑色图层
// (
// objs1[idx-1].type == 1//固定图片
// &&
// objs1[idx-1].black == true //勾选并入黑色图层
// )
) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g5.push(fabric.util.object.clone(item))
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
} else if (idx == 0) {
g5.push(fabric.util.object.clone(item))
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g1.push(fabric.util.object.clone(item))
}
let url1 = new fabric.Group(g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
// g3.push(img1)
let url3 = new fabric.Group(g3).toDataURL({
height: 648,
width: 1012,
top: all_top / zoom,
left: all_left / zoom
})
let url5 = new fabric.Group(g5).toDataURL({
height: 648,
width: 1012,
top: black_top / zoom,
left: black_left / zoom
})
let _objs2 = canvas2.getObjects()
let g2 = []
let g4 = []
let g6 = []
left = 0
top = 0
black_top = 0
black_left = 0
all_top = 0
all_left = 0
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g4.push(fabric.util.object.clone(item))
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
continue //黑色字或计数器 或 合成文字
}
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
continue //二维码 条形码
}
if (idx != 0 && objs2[idx - 1].type == 2) {
continue //合成图片
}
if (idx != 0 && objs2[idx - 1].type == 10) {
continue //合成图片
}
if (
idx != 0 &&
((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
(
objs2[idx - 1].type == 11
&&
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
//圆形文字 && 黑色
) ||
//文字 && 黑色
(objs2[idx - 1].type == 5 && //矩形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs2[idx - 1].type == 6 && //圆形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs2[idx - 1].type == 7 && //直线
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
objs2[idx - 1].black == true) //勾选并入黑色图层
// (
// objs2[idx-1].type == 1//固定图片
// &&
// objs2[idx-1].black == true //勾选并入黑色图层
// )
) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g6.push(fabric.util.object.clone(item))
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
} else if (idx == 0) {
g6.push(fabric.util.object.clone(item))
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g2.push(fabric.util.object.clone(item))
}
let url2 = new fabric.Group(g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let white_url1 = canvas1.getObjects()[0].toDataURL({
height: 648,
width: 1012
})
// g4.push(img2)
let url4 = new fabric.Group(g4).toDataURL({
height: 648,
width: 1012,
top: all_top / zoom,
left: all_left / zoom
})
let url6 = new fabric.Group(g6).toDataURL({
height: 648,
width: 1012,
top: black_top / zoom,
left: black_left / zoom
})
let white_url2 = canvas2.getObjects()[0].toDataURL({
height: 648,
width: 1012
})
//console.log(canvas.getObjects())
let w = document.body.clientWidth * 0.7 + 'px'
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
//高度超出，则按高度计算
h = document.body.clientHeight * 0.8 + 'px'
h1 = document.body.clientHeight * 0.8 - 150 + 'px'
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
}
let fs = require('fs');
const Buffer = require('buffer').Buffer;
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(url4.replace(/^data:image\/\w+;base64,/, ""), 'base64');
const printPath4 = path.join(exePath, 'print4.png');
fs.writeFileSync(printPath4, buffer4);
// 创建 PDF 实例
const pdf = new jspdf.jsPDF({
orientation: 'landscape',
unit: 'px',
format: [1012, 648]
});
let btns = [language_str('output')]
if ((objs1.length != 0) & (objs2.length == 0)) {
//只有正面
let img = new Image()
img.src = printPath3
pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
btns.push('打印正面')
} else if ((objs1.length == 0) & (objs2.length != 0)) {
//只有背面
let img = new Image()
img.src = printPath4
pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
btns.push('打印背面')
} else {
let img = new Image()
img.src = printPath3
pdf.addImage(img, 'JPEG', 0, 0, 1012, 648)
pdf.addPage()
let img2 = new Image()
img2.src = printPath4
pdf.addImage(img2, 'JPEG', 0, 0, 1012, 648)
btns.push('打印正面')
btns.push('打印背面')
}
var pdfBlob = pdf.output('blob')
var pdfBuffer = pdf.output('arraybuffer')
layer.open({
type: 1,
area: [w, h],
title: language_str('display'), //不显示标题栏"预览"
shadeClose: true, //点击遮罩关闭
content: `
<div style="padding:20px;background-color:#1E252D;height:${h1};display:flex;align-items: center;overflow:hidden;">
<div style="/*position: relative;top: 50%;transform: translateY(-50%);*/display: flex;justify-content: space-between;">
<div class="rotate-div" id="displayImg1" angle="0">
<img src="${printPath3}" style="width:95%"/>
<div class="rotate-wrap" onclick="window.rotate('displayImg1')">
<img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
</div>
</div>
<div class="rotate-div" id="displayImg2" angle="0">
<img style="width:95%;/*margin-left:6%*/" src="${printPath4}"/>
<div class="rotate-wrap" onclick="window.rotate('displayImg2')">
<img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
</div>
</div>
</div>
</div>`,
btn: btns, //'导出'
btn1: function (index, layero) {
savePdf(Buffer.from(pdfBuffer))
},
btn2: function () {
if (btns[1] === '打印正面') {
printJS({ printable: printPath3, type: 'image', style: 'img { width: 100%; height: auto; }' })
} else {
printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' })
}
},
btn3: function () {
//打印背面
printJS({ printable: printPath4, type: 'image', style: 'img { width: 100%; height: auto; }' })
}
})
}
function output(callback = null, _save = save) {
// 类型改变
fabric.Image.fromURL('./public/images/op_2.png', function (i1) {
i1.left = background_image.left
i1.top = background_image.top
let img1 = i1
fabric.Image.fromURL('./public/images/op_2.png', function (i2) {
i2.left = background_image.left
i2.top = background_image.top
let img2 = i2
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
let _objs1 = canvas1.getObjects()
let g1 = []
let g3 = []
let g5 = [] //黑色图层
let left = 0 //左裁剪
let top = 0 //顶裁剪
let black_left = 0 //黑色左裁剪
let black_top = 0 //黑色顶裁剪
let all_left = 0 //预览图左裁剪
let all_top = 0 //预览图顶裁剪
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
//console.log(getCoordsMinX(item.getCoords()));
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
//console.log("------");
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g3.push(fabric.util.object.clone(item))
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
continue //计数器 或 合成文字
}
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
continue //二维码 条形码
}
if (idx != 0 && objs1[idx - 1].type == 2) {
continue //合成图片
}
if (
idx != 0 &&
((objs1[idx - 1].type == 3 && item.get('fill') == '#000000') ||
(
objs1[idx - 1].type == 11
&&
item.get("fill") == "#000000"
//圆形文字 && 黑色
) ||
//文字 && 黑色
(objs1[idx - 1].type == 5 && //矩形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs1[idx - 1].type == 6 && //圆形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs1[idx - 1].type == 7 && //直线
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
objs1[idx - 1].black == true) //勾选并入黑色图层
// ||
// (
// objs1[idx-1].type == 1//固定图片
// &&
// objs1[idx-1].black == true //勾选并入黑色图层
// )
) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g5.push(fabric.util.object.clone(item))
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
} else if (idx == 0) {
g5.push(fabric.util.object.clone(item))
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g1.push(fabric.util.object.clone(item))
}
let url1 = new fabric.Group(g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
g3.push(img1)
let url3 = new fabric.Group(g3).toDataURL({
height: 648,
width: 1012,
top: all_top / zoom,
left: all_left / zoom
})
let url5 = new fabric.Group(g5).toDataURL({
height: 648,
width: 1012,
top: black_top / zoom,
left: black_left / zoom
})
let _objs2 = canvas2.getObjects()
let g2 = []
let g4 = []
let g6 = [] //黑色图层
left = 0
top = 0
black_left = 0 //黑色左裁剪
black_top = 0 //黑色顶裁剪
all_left = 0 //黑色左裁剪
all_top = 0 //黑色顶裁剪
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g4.push(fabric.util.object.clone(item))
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
continue //计数器 或 合成文字
}
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
continue //二维码 条形码
}
if (idx != 0 && objs2[idx - 1].type == 2) {
continue //合成图片
}
if (
idx != 0 &&
((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
(
objs2[idx - 1].type ==11
&&
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
//圆形文字 && 黑色
) ||
//文字 && 黑色
(objs2[idx - 1].type == 5 && //矩形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs2[idx - 1].type == 6 && //圆形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs2[idx - 1].type == 7 && //直线
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
objs2[idx - 1].black == true) //勾选并入黑色图层
// (
// objs2[idx-1].type == 1//固定图片
// &&
// objs2[idx-1].black == true //勾选并入黑色图层
// )
) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g6.push(fabric.util.object.clone(item))
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
} else if (idx == 0) {
g6.push(fabric.util.object.clone(item))
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g2.push(fabric.util.object.clone(item))
}
let url2 = new fabric.Group(g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let white_url1 = canvas1.getObjects()[0].toDataURL({
height: 648,
width: 1012
})
g4.push(img2)
let url4 = new fabric.Group(g4).toDataURL({
height: 648,
width: 1012,
top: all_top / zoom,
left: all_left / zoom
})
let url6 = new fabric.Group(g6).toDataURL({
height: 648,
width: 1012,
top: black_top / zoom,
left: black_left / zoom
})
let white_url2 = canvas2.getObjects()[0].toDataURL({
height: 648,
width: 1012
})
//console.log(canvas.getObjects())
let w = document.body.clientWidth * 0.7 + 'px'
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
//高度超出，则按高度计算
h = document.body.clientHeight * 0.8 + 'px'
h1 = document.body.clientHeight * 0.8 - 150 + 'px'
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
}
let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 }
if ((objs1.length != 0) & (objs2.length == 0)) {
op.flag = 2
} else if ((objs1.length == 0) & (objs2.length != 0)) {
op.flag = 3
}
op.frontColorPic = desEncrypt(url1)
op.backColorPic = desEncrypt(url2)
//op.frontBlPic = url5;
//op.backBlPic = url6;
op.frontBlackPic = desEncrypt(url5)
op.backBlackPic = desEncrypt(url6)
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
if (idx == 0) continue //background-image
let type = objs1[idx - 1].type
if (type == 2) {
//out_pic
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 1,
name: objs1[idx - 1].name,
FontColor: objs1[idx - 1].black ? '#000000' : '@',
transparency: item.get('opacity'),
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
} else if (type == 3) {
//text
/*2022-07-26 黑色并入黑色图层
if(item.get("fill") == "#000000"){
//纯黑
op.frontData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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))
});
}
*/
} else if (type == 11) {
//circle_text
op.frontData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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)),
"circleCenter" : objs1[idx - 1].circleCenter || 0
});
} else if (type == 4) {
//out_text
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 3,
name: objs1[idx - 1].name,
FontFamily: item.get('fontFamily'),
DefaultText: item.get('text'),
FontBackgroudColor: item.get('textBackgroundColor'),
FontSize: parseInt(item.get('fontSize')),
FontColor: item.get('fill'),
Exceed: objs1[idx - 1].exceed,
AutoWrap: objs1[idx - 1].autoWrap,
FixSize: objs1[idx - 1].fixSize,
Bold: item.get('fontWeight') == 'bold',
Underline: item.get('underline'),
Italic: item.get('fontStyle') == 'italic',
Strikeout: item.get('linethrough'),
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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)),
align: objs1[idx - 1].align
})
} else if (type == 8) {
//二维码
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 4,
name: objs1[idx - 1].name,
FontColor: objs1[idx - 1].color,
DefaultText: objs1[idx - 1].val,
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
} else if (type == 9) {
//条形码
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 5,
name: objs1[idx - 1].name,
FontSize: parseInt(objs1[idx - 1].fontSize),
DefaultText: objs1[idx - 1].val,
HideText: objs1[idx - 1].show,
FontFamily: objs1[idx - 1].font,
FontColor: objs1[idx - 1].color,
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
} else if (type == 10) {
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 6,
name: objs1[idx - 1].name,
FontFamily: item.get('fontFamily'),
FontSize: parseInt(item.get('fontSize')),
FontColor: item.get('fill'),
start: objs1[idx - 1].start,
add: parseInt(objs1[idx - 1].add),
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
}
}
//obj2
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
if (idx == 0) continue //background-image
let type = objs2[idx - 1].type
if (type == 2) {
//out_pic
let xy = getAbsoluteXY(item)
op.backData.push({
type: 1,
name: objs2[idx - 1].name,
FontColor: objs2[idx - 1].black ? '#000000' : '@',
transparency: item.get('opacity'),
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
} else if (type == 3) {
//text
/*2022-07-26 黑色并入黑色图层
if(item.get("fill") == "#000000"){
//纯黑
op.backData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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))
});
}
*/
} else if (type == 11) {
//circle_text
op.backData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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)),
"circleCenter" : objs2[idx - 1].circleCenter || 0
});
} else if (type == 4) {
let xy = getAbsoluteXY(item)
op.backData.push({
type: 3,
name: objs2[idx - 1].name,
FontFamily: item.get('fontFamily'),
DefaultText: item.get('text'),
FontSize: parseInt(item.get('fontSize')),
FontBackgroudColor: item.get('textBackgroundColor'),
FontColor: item.get('fill'),
Exceed: objs2[idx - 1].exceed,
AutoWrap: objs2[idx - 1].autoWrap,
FixSize: objs2[idx - 1].fixSize,
Bold: item.get('fontWeight') == 'bold',
Underline: item.get('underline'),
Italic: item.get('fontStyle') == 'italic',
Strikeout: item.get('linethrough'),
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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)),
align: objs2[idx - 1].align
})
} else if (type == 8) {
//二维码
let xy = getAbsoluteXY(item)
op.backData.push({
type: 4,
name: objs2[idx - 1].name,
FontColor: objs2[idx - 1].color,
DefaultText: objs2[idx - 1].val,
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
} else if (type == 9) {
let xy = getAbsoluteXY(item)
op.backData.push({
type: 5,
name: objs2[idx - 1].name,
DefaultText: objs2[idx - 1].val,
HideText: objs1[idx - 1].show,
FontSize: parseInt(objs2[idx - 1].fontSize),
FontFamily: objs2[idx - 1].font,
FontColor: objs2[idx - 1].color,
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
} else if (type == 10) {
let xy = getAbsoluteXY(item)
op.backData.push({
type: 6,
name: objs2[idx - 1].name,
FontFamily: item.get('fontFamily'),
FontSize: parseInt(item.get('fontSize')),
FontColor: item.get('fill'),
start: parseInt(objs2[idx - 1].start),
add: parseInt(objs2[idx - 1].add),
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
}
}
_save(op, callback)
//return false 开启该代码可禁止点击该按钮关闭
})
})
}
$('#output').on('click', function () {
output(null, saveAs)
return
// 类型改变
fabric.Image.fromURL('./public/images/op_2.png', function (i1) {
i1.left = background_image.left
i1.top = background_image.top
let img1 = i1
fabric.Image.fromURL('./public/images/op_2.png', function (i2) {
i2.left = background_image.left
i2.top = background_image.top
let img2 = i2
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#component_type').text(language_str('bg')) //"背景"
canvas1.discardActiveObject().renderAll()
canvas2.discardActiveObject().renderAll()
let _objs1 = canvas1.getObjects()
let g1 = []
let g3 = []
let g5 = [] //黑色图层
let left = 0 //左裁剪
let top = 0 //顶裁剪
let black_left = 0 //黑色左裁剪
let black_top = 0 //黑色顶裁剪
let all_left = 0 //预览图左裁剪
let all_top = 0 //预览图顶裁剪
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
//console.log("------");
//console.log(item.getCoords());
//console.log(getCoordsMinX(background_image.getCoords()));
//console.log(getCoordsMinX(item.getCoords()));
//console.log(getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()));
//console.log("------");
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g3.push(fabric.util.object.clone(item))
if (idx != 0 && (objs1[idx - 1].type == 10 || objs1[idx - 1].type == 4)) {
continue //计数器 或 合成文字
}
if (idx != 0 && (objs1[idx - 1].type == 8 || objs1[idx - 1].type == 9)) {
continue //二维码 条形码
}
if (idx != 0 && objs1[idx - 1].type == 2) {
continue //合成图片
}
if (
idx != 0 &&
((objs1[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
(
objs2[idx - 1].type ==11
&&
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
//圆形文字 && 黑色
) ||
//文字 && 黑色
(objs1[idx - 1].type == 5 && //矩形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs1[idx - 1].type == 6 && //圆形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs1[idx - 1].type == 7 && //直线
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
objs1[idx - 1].black == true) //勾选并入黑色图层
// (
// objs1[idx-1].type == 1//固定图片
// &&
// objs1[idx-1].black == true //勾选并入黑色图层
// )
) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g5.push(fabric.util.object.clone(item))
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
} else if (idx == 0) {
g5.push(fabric.util.object.clone(item))
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g1.push(fabric.util.object.clone(item))
}
let url1 = new fabric.Group(g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
g3.push(img1)
let url3 = new fabric.Group(g3).toDataURL({
height: 648,
width: 1012,
top: all_top / zoom,
left: all_left / zoom
})
let url5 = new fabric.Group(g5).toDataURL({
height: 648,
width: 1012,
top: black_top / zoom,
left: black_left / zoom
})
let _objs2 = canvas2.getObjects()
let g2 = []
let g4 = []
let g6 = [] //黑色图层
left = 0
top = 0
black_left = 0 //黑色左裁剪
black_top = 0 //黑色顶裁剪
all_left = 0 //黑色左裁剪
all_top = 0 //黑色顶裁剪
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > all_left) {
all_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > all_top) {
all_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g4.push(fabric.util.object.clone(item))
if (idx != 0 && (objs2[idx - 1].type == 10 || objs2[idx - 1].type == 4)) {
continue //计数器 或 合成文字
}
if (idx != 0 && (objs2[idx - 1].type == 8 || objs2[idx - 1].type == 9)) {
continue //二维码 条形码
}
if (idx != 0 && objs2[idx - 1].type == 2) {
continue //合成图片
}
if (
idx != 0 &&
((objs2[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) ||
(
objs2[idx - 1].type ==11
&&
(item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false))
//圆形文字 && 黑色
) ||
//文字 && 黑色
(objs2[idx - 1].type == 5 && //矩形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs2[idx - 1].type == 6 && //圆形
(((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框
(item.get('fill') == '' && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //透明填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && (item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) || //黑填充 黑边框
((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('strokeWidth') == 0))) || //黑填充 0边框
(objs2[idx - 1].type == 7 && //直线
(item.get('stroke') == '#000000' || item.get('stroke') == '#ffffff')) ||
objs2[idx - 1].black == true) //勾选并入黑色图层
// (
// objs2[idx-1].type == 1//固定图片
// &&
// objs2[idx-1].black == true //勾选并入黑色图层
// )
) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > black_left) {
black_left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > black_top) {
black_top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g6.push(fabric.util.object.clone(item))
continue //黑色文字 黑色矩形 黑色线条 黑色圆形
} else if (idx == 0) {
g6.push(fabric.util.object.clone(item))
}
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(item.getCoords()) > left) {
left = -(getCoordsMinX(item.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(item.getCoords()) > top) {
top = -(getCoordsMinY(item.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
g2.push(fabric.util.object.clone(item))
}
let url2 = new fabric.Group(g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let white_url1 = canvas1.getObjects()[0].toDataURL({
height: 648,
width: 1012
})
g4.push(img2)
let url4 = new fabric.Group(g4).toDataURL({
height: 648,
width: 1012,
top: all_top / zoom,
left: all_left / zoom
})
let url6 = new fabric.Group(g6).toDataURL({
height: 648,
width: 1012,
top: black_top / zoom,
left: black_left / zoom
})
let white_url2 = canvas2.getObjects()[0].toDataURL({
height: 648,
width: 1012
})
//console.log(canvas.getObjects())
let w = document.body.clientWidth * 0.7 + 'px'
let h = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 150 + 'px'
let h1 = (document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 + 'px'
if ((document.body.clientWidth * 0.7 - 40 - 0.06 * document.body.clientWidth * 0.7) * 0.62548 > document.body.clientHeight) {
//高度超出，则按高度计算
h = document.body.clientHeight * 0.8 + 'px'
h1 = document.body.clientHeight * 0.8 - 150 + 'px'
w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94
}
let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 }
if ((objs1.length != 0) & (objs2.length == 0)) {
op.flag = 2
} else if ((objs1.length == 0) & (objs2.length != 0)) {
op.flag = 3
}
op.frontColorPic = desEncrypt(url1)
op.backColorPic = desEncrypt(url2)
//op.frontBlPic = url5;
//op.backBlPic = url6;
op.frontBlackPic = desEncrypt(url5)
op.backBlackPic = desEncrypt(url6)
for (let item of _objs1) {
let idx = getIndex(item, canvas1)
if (idx == 0) continue //background-image
let type = objs1[idx - 1].type
if (type == 2) {
//out_pic
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 1,
name: objs1[idx - 1].name,
FontColor: objs1[idx - 1].black ? '#000000' : '@',
transparency: item.get('opacity'),
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
} else if (type == 3) {
//text
/*2022-07-26 黑色并入黑色图层
if(item.get("fill") == "#000000"){
//纯黑
op.frontData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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))
});
}
*/
} else if (type == 11) {
//circle_text
op.frontData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image1.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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)),
"circleCenter" : objs1[idx - 1].circleCenter || 0
});
} else if (type == 4) {
//out_text
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 3,
name: objs1[idx - 1].name,
FontFamily: item.get('fontFamily'),
DefaultText: item.get('text'),
FontBackgroudColor: item.get('textBackgroundColor'),
FontSize: parseInt(item.get('fontSize')),
FontColor: item.get('fill'),
Exceed: objs1[idx - 1].exceed,
AutoWrap: objs1[idx - 1].autoWrap,
FixSize: objs1[idx - 1].fixSize,
Bold: item.get('fontWeight') == 'bold',
Underline: item.get('underline'),
Italic: item.get('fontStyle') == 'italic',
Strikeout: item.get('linethrough'),
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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)),
align: objs1[idx - 1].align
})
} else if (type == 8) {
//二维码
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 4,
name: objs1[idx - 1].name,
FontColor: objs1[idx - 1].color,
DefaultText: objs1[idx - 1].val,
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
} else if (type == 9) {
//条形码
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 5,
name: objs1[idx - 1].name,
FontSize: parseInt(objs1[idx - 1].fontSize),
DefaultText: objs1[idx - 1].val,
HideText: objs1[idx - 1].show,
FontFamily: objs1[idx - 1].font,
FontColor: objs1[idx - 1].color,
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
} else if (type == 10) {
let xy = getAbsoluteXY(item)
op.frontData.push({
type: 6,
name: objs1[idx - 1].name,
FontFamily: item.get('fontFamily'),
FontSize: parseInt(item.get('fontSize')),
FontColor: item.get('fill'),
start: objs1[idx - 1].start,
add: parseInt(objs1[idx - 1].add),
x: parseInt((xy[0] - background_image1.left).toFixed(0)),
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))
})
}
}
//obj2
for (let item of _objs2) {
let idx = getIndex(item, canvas2)
if (idx == 0) continue //background-image
let type = objs2[idx - 1].type
if (type == 2) {
//out_pic
let xy = getAbsoluteXY(item)
op.backData.push({
type: 1,
name: objs2[idx - 1].name,
FontColor: objs2[idx - 1].black ? '#000000' : '@',
transparency: item.get('opacity'),
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
} else if (type == 3) {
//text
/*2022-07-26 黑色并入黑色图层
if(item.get("fill") == "#000000"){
//纯黑
op.backData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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))
});
}
*/
} else if (type == 11) {
//circle_text
op.backData.push({
"type" : 2,
"Text" : item.get("text"),
"FontFamily" : item.get("fontFamily"),
"FontSize" : parseInt(item.get("fontSize")),
"FontColor" : "#000000",
"FontBackgroudColor" : item.get("textBackgroundColor"),
"Bold" : item.get("fontWeight") == "bold",
"Underline" : item.get("underline"),
"Italic" : item.get("fontStyle") == "italic",
"Strikeout" : item.get("linethrough"),
"x" : parseInt((item.get("left") - background_image2.left).toFixed(0)),
"y" : parseInt((item.get("top") - 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)),
"circleCenter" : objs2[idx - 1].circleCenter || 0
});
} else if (type == 4) {
let xy = getAbsoluteXY(item)
op.backData.push({
type: 3,
name: objs2[idx - 1].name,
FontFamily: item.get('fontFamily'),
DefaultText: item.get('text'),
FontSize: parseInt(item.get('fontSize')),
FontBackgroudColor: item.get('textBackgroundColor'),
FontColor: item.get('fill'),
Exceed: objs2[idx - 1].exceed,
AutoWrap: objs2[idx - 1].autoWrap,
FixSize: objs2[idx - 1].fixSize,
Bold: item.get('fontWeight') == 'bold',
Underline: item.get('underline'),
Italic: item.get('fontStyle') == 'italic',
Strikeout: item.get('linethrough'),
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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)),
align: objs2[idx - 1].align
})
} else if (type == 8) {
//二维码
let xy = getAbsoluteXY(item)
op.backData.push({
type: 4,
name: objs2[idx - 1].name,
FontColor: objs2[idx - 1].color,
DefaultText: objs2[idx - 1].val,
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
} else if (type == 9) {
let xy = getAbsoluteXY(item)
op.backData.push({
type: 5,
name: objs2[idx - 1].name,
DefaultText: objs2[idx - 1].val,
HideText: objs1[idx - 1].show,
FontSize: parseInt(objs2[idx - 1].fontSize),
FontFamily: objs2[idx - 1].font,
FontColor: objs2[idx - 1].color,
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
} else if (type == 10) {
let xy = getAbsoluteXY(item)
op.backData.push({
type: 6,
name: objs2[idx - 1].name,
FontFamily: item.get('fontFamily'),
FontSize: parseInt(item.get('fontSize')),
FontColor: item.get('fill'),
start: parseInt(objs2[idx - 1].start),
add: parseInt(objs2[idx - 1].add),
x: parseInt((xy[0] - background_image2.left).toFixed(0)),
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))
})
}
}
dialog
.showSaveDialog({
title: language_str('saveFile'), //'保存文件'
filters: [{ name: 'CS File Type', extensions: ['cs'] }]
})
.then((result) => {
if (result.canceled) return
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
result.filePath += '.cs'
}
let fs = require('fs')
op.soonType = 2
fs.writeFileSync(result.filePath, JSON.stringify(op))
})
.catch((err) => {
console.log()
})
//return false 开启该代码可禁止点击该按钮关闭
})
})
})
var _keyctrl = false,
_keyc = false,
_textEdit = false,
_inputEdit = false
$('input').focus(function () {
console.log(1)
_inputEdit = true
})
$('input').blur(function () {
_inputEdit = false
})
$('textarea').focus(function () {
console.log(1)
_inputEdit = true
})
$('textarea').blur(function () {
_inputEdit = false
})
$('body').keyup(function (event) {
// 兼容三端的 modifier key 检测（Windows/Linux: Ctrl, Mac: Cmd/Meta）
if (event.keyCode == 17 || event.keyCode == 91 || event.keyCode == 93) { // Ctrl 键或 Meta 键（Mac Cmd）释放
_keyctrl = false
}
if (event.keyCode == 67) {
_keyc = false
}
})
$('body').keydown(function (event) {
// 统一的快捷键处理（兼容 Windows/Linux: Ctrl, Mac: Cmd/Meta）
const isModifierKey = event.ctrlKey || event.metaKey; // 兼容三端
// 快捷键处理（在输入框或文本区域中时不触发，除了删除相关的）
if (!_inputEdit && !_textEdit) {
// CTRL/CMD+N - 新建
if (isModifierKey && event.keyCode == 78) {
event.preventDefault();
$('#new').click();
return;
}
// CTRL/CMD+O - 打开
if (isModifierKey && event.keyCode == 79) {
event.preventDefault();
$('#open').click();
return;
}
// CTRL/CMD+S - 保存
if (isModifierKey && !event.shiftKey && event.keyCode == 83) {
event.preventDefault();
$('#save').click();
return;
}
// CTRL/CMD+SHIFT+S - 保存副本
if (isModifierKey && event.shiftKey && event.keyCode == 83) {
event.preventDefault();
output(null, saveAs);
return;
}
// CTRL/CMD+Z - 还原
if (isModifierKey && !event.shiftKey && event.keyCode == 90) {
event.preventDefault();
$('#previous').click();
return;
}
// CTRL/CMD+Y - 重做
if (isModifierKey && !event.shiftKey && event.keyCode == 89) {
event.preventDefault();
$('#next').click();
return;
}
// CTRL/CMD+C - 复制
if (isModifierKey && event.keyCode == 67 && event.target.nodeName == 'BODY') {
event.preventDefault();
copySelection();
return;
}
// CTRL/CMD+V - 粘贴
if (isModifierKey && event.keyCode == 86 && event.target.nodeName == 'BODY') {
event.preventDefault();
pasteFromClipboard();
return;
}
// CTRL/CMD+SHIFT+DEL - 清空
if (isModifierKey && event.shiftKey && event.keyCode == 46) {
event.preventDefault();
$('#clean').click();
return;
}
// CTRL/CMD+DEL - 删除
if (isModifierKey && !event.shiftKey && event.keyCode == 46) {
event.preventDefault();
$('#delete').click();
return;
}
}
// 兼容三端的 modifier key 检测（Windows/Linux: Ctrl, Mac: Cmd/Meta）
if (event.keyCode == 17 || event.metaKey) { // Ctrl 键或 Meta 键（Mac Cmd）
_keyctrl = true
if (_keyc && _textEdit) {
//同时按下且在编辑状态
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
//clipboard.writeText((clipboard.readText()+' '))
}
}
if (event.keyCode == 67) {
_keyc = true
if (_keyctrl & _textEdit) {
//同时按下且在编辑状态
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
//clipboard.writeText((clipboard.readText()+' '))
}
}
if (event.keyCode == 37) {
//left
let v = -1
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = -5
}
let x = canvas.getActiveObject().get('left')
x += v
canvas.getActiveObject().set('left', x)
canvas.renderAll()
recordState()
updateControls()
}
if (event.keyCode == 38) {
//up
let v = -1
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = -5
}
let y = canvas.getActiveObject().get('top')
y += v
canvas.getActiveObject().set('top', y)
canvas.renderAll()
recordState()
updateControls()
}
if (event.keyCode == 39) {
//right
let v = 1
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = 5
}
let x = canvas.getActiveObject().get('left')
x += v
canvas.getActiveObject().set('left', x)
canvas.renderAll()
recordState()
updateControls()
}
if (event.keyCode == 40) {
//down
let v = +1
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = 5
}
let y = canvas.getActiveObject().get('top')
y += v
canvas.getActiveObject().set('top', y)
canvas.renderAll()
recordState()
updateControls()
}
// 普通删除键（DEL键，没有按CTRL/CMD）
if (event.keyCode == 46 && !isModifierKey && !_inputEdit && !_textEdit) {
let actObjs = canvas.getActiveObjects()
let allObjs = canvas.getObjects()
let flag = 0
for (let item of actObjs) {
if (item != allObjs[0]) {
let i = getIndex(item) //0是背景，所以从1开始，但objs不包含背景图片，故要-1
objs.splice(i - 1, 1)
canvas.remove(item)
flag = 1
}
}
updateList()
canvas.discardActiveObject()
if (flag == 1) {
recordState()
canvas.renderAll()
handleObjectSelected()
}
}
})
let pre_add_image
$('#addPic').click(function () {
OpenDialog()
function OpenDialog() {
dialog
.showOpenDialog({
title: language_str('selectPic'), //请选择图片
buttonLabel: language_str('comf'), //"确认"
filters: [{ name: 'Image File Type', extensions: ['png', 'jpg', 'jpeg'] }]
})
.then((result) => {
if (result.canceled) return
//console.log(result.filePaths)
fabric.Image.fromURL(result.filePaths[0], function (image) {
//image.left = pointer.x;
//image.top = pointer.y;
image.setSrc(image.toDataURL(), function (image) {
pre_add_image = image
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 1
})
//canvas.add(image);
//objs.push({type: 1});
//canvas.renderAll();
//updateList();
//recordState();
})
})
.catch((err) => {
console.log(err)
})
}
})
$('#addOutPic').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 2
})
$('#addText').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 3
})
$("#addCircleText").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 11;
});
$('#addOutText').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 4
})
$('#addRect').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 5
})
$('#addCircle').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 6
})
$('#addLine').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 7
})
$('#addQrCode').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addBarCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 8
})
$('#addBarCode').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addCounter').css('background-color', '')
addState = 9
})
$('#addCounter').click(function () {
background_image.hoverCursor = 'crosshair'
$(this).css('background-color', '#646E76')
$('#addPic').css('background-color', '')
$('#addOutPic').css('background-color', '')
$('#addText').css('background-color', '')
$("#addCircleText").css("background-color", "");
$('#addOutText').css('background-color', '')
$('#addRect').css('background-color', '')
$('#addCircle').css('background-color', '')
$('#addLine').css('background-color', '')
$('#addQrCode').css('background-color', '')
$('#addBarCode').css('background-color', '')
addState = 10
})
$('#version_change').click(function () {
if (bg_version == 1) {
bg_version = 2
} else {
bg_version = 1
}
// 类型改变
$('#source_front').attr('src', './public/images/front_bg' + bg_version + '_2.png')
canvas.renderAll()
})
$('#front_side').click(function () {
$(this).addClass('ui-button-active')
$('#back_side').removeClass('ui-button-active')
$('.canvas-container:eq(0)').show()
$('.canvas-container:eq(1)').hide()
console.log('------')
console.log(recordObjs1)
console.log('------')
canvas = canvas1
objs = objs1
background_image = background_image1
next_objs = next_objs1
pre_objs = pre_objs1
next_json = next_json1
pre_json = pre_json1
recordObjs = recordObjs1
recordJson = recordJson1
step = step1
updateList()
$('#line_control').hide()
$('#base_control').hide()
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#component_type').text(language_str('bg')) //背景
})
$('#back_side').click(function () {
$(this).addClass('ui-button-active')
$('#front_side').removeClass('ui-button-active')
$('.canvas-container:eq(0)').hide()
$('.canvas-container:eq(1)').show()
canvas = canvas2
objs = objs2
background_image = background_image2
next_objs = next_objs2
pre_objs = pre_objs2
next_json = next_json2
pre_json = pre_json2
recordObjs = recordObjs2
recordJson = recordJson2
step = step2
updateList()
$('#line_control').hide()
$('#base_control').hide()
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#component_type').text(language_str('bg')) //"背景"
})
$('#top_alignment').click(function () {
let _objs = canvas.getActiveObjects()
if (_objs.length == 1) {
//只选中了一个
_objs[0].set('top', background_image.get('top'))
canvas.renderAll()
return
}
let top = 0
for (let item of _objs) {
let t_top = item.get('top')
if (t_top < top) {
top = t_top
}
}
groupItems = []
for (let item of _objs) {
item.set('top', top)
groupItems.push(item)
}
canvas.discardActiveObject()
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas
})
canvas.setActiveObject(sel)
canvas.requestRenderAll()
canvas.renderAll()
})
$('#bottom_alignment').click(function () {
let _objs = canvas.getActiveObjects()
if (_objs.length == 1) {
//只选中了一个
let idx = getIndex(_objs[0])
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = _objs[0].get('strokeWidth')
}
_objs[0].set('top', background_image.get('top') + background_image.get('height') - _objs[0].get('height') * _objs[0].get('scaleY') - other)
canvas.renderAll()
return
}
let bottom = 0
for (let item of _objs) {
let idx = getIndex(item)
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get('strokeWidth')
}
let t_b = item.get('top') + item.get('height') * item.get('scaleY') + other
if (t_b > bottom) {
bottom = t_b
}
}
groupItems = []
for (let item of _objs) {
let idx = getIndex(item)
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get('strokeWidth')
}
item.set('top', bottom - item.get('height') * item.get('scaleY') - other)
groupItems.push(item)
}
canvas.discardActiveObject()
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas
})
canvas.setActiveObject(sel)
canvas.requestRenderAll()
canvas.renderAll()
})
$('#center_y_alignment').click(function () {
let _objs = canvas.getActiveObjects()
if (_objs.length == 1) {
//只选中了一个
let idx = getIndex(_objs[0])
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = _objs[0].get('strokeWidth')
}
_objs[0].set('top', background_image.get('top') + (background_image.get('height') - (_objs[0].get('height') + other) * _objs[0].get('scaleY')) / 2)
canvas.renderAll()
return
}
let top = 0
for (let item of _objs) {
let t_top = item.get('top')
if (t_top < top) {
top = t_top
}
}
groupItems = []
for (let item of _objs) {
let idx = getIndex(item)
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get('strokeWidth')
}
item.set('top', top + (item.group.height - (item.get('height') + other) * item.get('scaleY')) / 2)
groupItems.push(item)
}
canvas.discardActiveObject()
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas
})
canvas.setActiveObject(sel)
canvas.requestRenderAll()
canvas.renderAll()
})
$('#left_alignment').click(function () {
let _objs = canvas.getActiveObjects()
if (_objs.length == 1) {
//只选中了一个
_objs[0].set('left', background_image.get('left'))
canvas.renderAll()
return
}
let left = 0
for (let item of _objs) {
let t_left = item.get('left')
if (t_left < left) {
left = t_left
}
}
groupItems = []
for (let item of _objs) {
item.set('left', left)
groupItems.push(item)
}
canvas.discardActiveObject()
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas
})
canvas.setActiveObject(sel)
canvas.requestRenderAll()
canvas.renderAll()
})
$('#right_alignment').click(function () {
let _objs = canvas.getActiveObjects()
if (_objs.length == 1) {
//只选中了一个
let idx = getIndex(_objs[0])
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get('strokeWidth')
}
_objs[0].set('left', background_image.get('left') + background_image.get('width') - _objs[0].get('width') * _objs[0].get('scaleX') - other)
canvas.renderAll()
return
}
let right = 0
for (let item of _objs) {
let idx = getIndex(item)
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get('strokeWidth')
}
let t_r = item.get('left') + item.get('width') * item.get('scaleX') + other
if (t_r > right) {
right = t_r
}
}
let groupItems = []
for (let item of _objs) {
let idx = getIndex(item)
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get('strokeWidth')
}
item.set('left', right - item.get('width') * item.get('scaleX') - other)
groupItems.push(item)
}
//BUG1
canvas.discardActiveObject()
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas
})
canvas.setActiveObject(sel)
canvas.requestRenderAll()
canvas.renderAll()
})
$('#center_x_alignment').click(function () {
let _objs = canvas.getActiveObjects()
if (_objs.length == 1) {
//只选中了一个
let idx = getIndex(_objs[0])
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = _objs[0].get('strokeWidth')
}
_objs[0].set('left', background_image.get('left') + (background_image.get('width') - (_objs[0].get('width') + other) * _objs[0].get('scaleX')) / 2)
canvas.renderAll()
return
}
let left = 0
for (let item of _objs) {
let t_left = item.get('left')
if (t_left < left) {
left = t_left
}
}
groupItems = []
for (let item of _objs) {
let idx = getIndex(item)
let type = objs[idx - 1].type
let other = 0 //strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get('strokeWidth')
}
item.set('left', left + (item.group.width - (item.get('width') + other) * item.get('scaleX')) / 2)
groupItems.push(item)
}
canvas.discardActiveObject()
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas
})
canvas.setActiveObject(sel)
canvas.requestRenderAll()
canvas.renderAll()
})
$('#up_obj').click(function () {
//上移，放到前面 数组中在后面
let idx = getIndex(canvas.getActiveObject())
if (idx + 1 != canvas.getObjects().length) {
canvas.bringForward(canvas.getActiveObject())
canvas.renderAll()
let temp = objs[idx - 1]
objs[idx - 1] = objs[idx]
objs[idx] = temp
//console.log(objs);
//[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];
recordState()
updateList()
selectObj(idx)
}
})
$('#down_obj').click(function () {
//下移，放到后面 数组中在前面
let idx = getIndex(canvas.getActiveObject())
if (idx != 1) {
canvas.sendBackwards(canvas.getActiveObject())
canvas.renderAll()
//[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];
let temp = objs[idx - 1]
objs[idx - 1] = objs[idx - 2]
objs[idx - 2] = temp
recordState()
updateList()
selectObj(idx - 2)
}
})
$('#set_bg').click(function () {
//设置为背景
let obj = canvas.getActiveObject()
let idx = getIndex(canvas.getActiveObject())
const scaleX = 1012 / obj.width
const scaleY = 648 / obj.height
obj.set({
scaleX: scaleX,
scaleY: scaleY,
left: ($('#canvas1').width() - 1012) / 2,
top: ($('#canvas1').height() - 648) / 2
})
$('#text_w').val(1012)
$('#text_h').val(648)
$('#text_x').val(0)
$('#text_y').val(0)
canvas.sendToBack(canvas.getActiveObject())
canvas.bringForward(canvas.getActiveObject())
canvas.renderAll()
let objItem = objs.splice(idx - 1, 1)[0]
objs.unshift(objItem)
recordState()
updateList()
selectObj(0)
})
$('#previous').click(function () {
//撤销一次操作
if (step.val == 0) {
return
}
step.val--
console.log(recordJson[step.val])
canvas.loadFromJSON(recordJson[step.val])
if ($('#front_side').hasClass('ui-button-active')) {
//objs = JSON.parse(recordObjs[step.val]);
objs1 = JSON.parse(recordObjs[step.val])
objs = objs1
} else if ($('#back_side').hasClass('ui-button-active')) {
//objs = JSON.parse(recordObjs[step.val]);
objs2 = JSON.parse(recordObjs[step.val])
objs = objs2
}
background_image = canvas.getObjects()[0]
canvas.renderAll()
//recordState();
updateList()
selectObj(-1)
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
})
$('#next').click(function () {
//撤销一次撤销操作
if (step.val >= recordObjs.length - 1) {
return
}
++step.val
canvas.loadFromJSON(recordJson[step.val])
if ($('#front_side').hasClass('ui-button-active')) {
//objs = JSON.parse(recordObjs[step.val]);
objs1 = JSON.parse(recordObjs[step.val])
objs = objs1
} else if ($('#back_side').hasClass('ui-button-active')) {
//objs = JSON.parse(recordObjs[step.val]);
objs2 = JSON.parse(recordObjs[step.val])
objs = objs2
}
background_image = canvas.getObjects()[0]
canvas.renderAll()
selectObj(-1)
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
updateList()
})
$('#clean').click(function () {
objs.splice(0, objs.length)
let allObjs = canvas.getObjects()
for (let item of allObjs) {
if (item != allObjs[0]) {
canvas.remove(item)
}
}
updateList()
recordState()
})
$('#rotate').click(function () {
let obj = canvas.getActiveObject()
obj.rotate(Math.round((obj.get('angle') + 90) % 360))
$('#text_r').val(obj.get('angle'))
canvas.renderAll()
updateControls()
recordState()
})
$('#text_italics').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选
canvas.getActiveObject().set('fontStyle', 'normal')
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('fontStyle', 'italic')
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$('#text_bold').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选,恢复正常
canvas.getActiveObject().set('fontWeight', 'normal')
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('fontWeight', 'bold')
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$('#text_underline').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选
canvas.getActiveObject().set('underline', false)
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('underline', true)
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$('#text_linethrough').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选
canvas.getActiveObject().set('linethrough', false)
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('linethrough', true)
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$("#circle_text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("fontStyle", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontStyle", "italic")
$(this).addClass("ui-radio-acitve")
}
recordState();
canvas.renderAll();
});
$("#circle_text_bold").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选,恢复正常
canvas.getActiveObject().set("fontWeight", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontWeight", "bold")
$(this).addClass("ui-radio-acitve")
}
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')) {
//已选
canvas.getActiveObject().set('fontStyle', 'normal')
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('fontStyle', 'italic')
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$('#out_text_bold').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选,恢复正常
canvas.getActiveObject().set('fontWeight', 'normal')
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('fontWeight', 'bold')
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$('#out_text_underline').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选
canvas.getActiveObject().set('underline', false)
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('underline', true)
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$('#out_text_linethrough').click(function () {
if ($(this).hasClass('ui-radio-acitve')) {
//已选
canvas.getActiveObject().set('linethrough', false)
$(this).removeClass('ui-radio-acitve')
} else {
//未选
canvas.getActiveObject().set('linethrough', true)
$(this).addClass('ui-radio-acitve')
}
recordState()
canvas.renderAll()
})
$('#lock').click(function () {
canvas.getActiveObject().set('selectable', !canvas.getActiveObject().get('selectable'))
if (canvas.getActiveObject().get('selectable')) {
$('#lock_img').attr('src', 'public/images/unlock20.png') //已经上锁，需要解锁
} else {
$('#lock_img').attr('src', 'public/images/lock20.png') //没上锁，可以上锁
}
recordState()
canvas.renderAll()
})
$('#text_back_transparent').click(function () {
canvas.getActiveObject().set('textBackgroundColor', '')
$('#text_back_color').val('#ffffff')
canvas.renderAll()
})
$('#out_text_back_transparent').click(function () {
canvas.getActiveObject().set('textBackgroundColor', '')
$('#out_text_back_color').val('#ffffff')
canvas.renderAll()
})
$('#rect_transparent').click(function () {
canvas.getActiveObject().set('fill', '')
$('#rect_color').val('#ffffff')
canvas.renderAll()
})
$('#rect_stroke_transparent').click(function () {
canvas.getActiveObject().set('stroke', '')
$('#rect_stroke').val('#ffffff')
canvas.renderAll()
})
$('#circle_transparent').click(function () {
canvas.getActiveObject().set('fill', '')
$('#circle_color').val('#ffffff')
canvas.renderAll()
})
$('#circle_stroke_transparent').click(function () {
canvas.getActiveObject().set('stroke', '')
$('#circle_stroke').val('#ffffff')
canvas.renderAll()
})
function saveAs(op1, callback) {
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let _g1 = [],
_g2 = []
let left = 0,
top = 0
for (let _o of canvas1.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g1.push(fabric.util.object.clone(_o))
}
let fp = new fabric.Group(_g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
; (left = 0), (top = 0)
for (let _o of canvas2.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g2.push(fabric.util.object.clone(_o))
}
//let fp = new fabric.Group(_g1).toDataURL();
let bp = new fabric.Group(_g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
let con_o = Object.assign(o, op1)
dialog
.showSaveDialog({
title: language_str('saveFile'), //'保存文件'
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
})
.then((result) => {
if (result.filePath == '') {
return
}
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
result.filePath += '.soon'
}
let fs = require('fs')
con_o.soonType = 2
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
openAs.name = result.filePath
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
saveHistory()
if (callback && typeof callback === 'function') {
callback()
}
})
.catch((err) => {
console.log()
})
}
function save(op1, callback) {
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let _g1 = [],
_g2 = []
let left = 0,
top = 0
for (let _o of canvas1.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g1.push(fabric.util.object.clone(_o))
}
let fp = new fabric.Group(_g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
; (left = 0), (top = 0)
for (let _o of canvas2.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g2.push(fabric.util.object.clone(_o))
}
//let fp = new fabric.Group(_g1).toDataURL();
let bp = new fabric.Group(_g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
let con_o = Object.assign(o, op1)
console.log(op1)
if (openAs.name != '') {
//打开的文件
let fs = require('fs')
con_o.soonType = 2
fs.writeFileSync(openAs.name, JSON.stringify(con_o))
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
saveHistory()
if (callback && typeof callback === 'function') {
callback()
}
return
}
dialog
.showSaveDialog({
title: language_str('saveFile'), //'保存文件'
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
})
.then((result) => {
if (result.filePath == '') {
return
}
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
result.filePath += '.soon'
}
let fs = require('fs')
con_o.soonType = 2
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
openAs.name = result.filePath
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
saveHistory()
if (callback && typeof callback === 'function') {
callback()
}
})
.catch((err) => {
console.log()
})
}
// 复制
$("#copy").click(function () {
copySelection();
})
// 粘贴
$("#paste").click(function () {
pasteFromClipboard();
})
// 保存
$('#save').click(function () {
output()
return
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let _g1 = [],
_g2 = []
let left = 0,
top = 0
for (let _o of canvas1.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g1.push(fabric.util.object.clone(_o))
}
let fp = new fabric.Group(_g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
; (left = 0), (top = 0)
for (let _o of canvas2.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g2.push(fabric.util.object.clone(_o))
}
//let fp = new fabric.Group(_g1).toDataURL();
let bp = new fabric.Group(_g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
let con_o = Object.assign(o, op1)
console.log(op1)
if (openAs.name != '') {
//打开的文件
let fs = require('fs')
con_o.soonType = 2
fs.writeFileSync(openAs.name, JSON.stringify(con_o))
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
saveHistory()
return
}
dialog
.showSaveDialog({
title: language_str('saveFile'), //'保存文件'
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
})
.then((result) => {
if (result.filePath == '') {
return
}
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
result.filePath += '.soon'
}
let fs = require('fs')
con_o.soonType = 2
fs.writeFileSync(result.filePath, JSON.stringify(con_o))
openAs.name = result.filePath
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
saveHistory()
})
.catch((err) => {
console.log()
})
})
function getDate() {
let date = new Date()
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
}
function getAbsoluteXY(_obj) {
let coord = _obj.get('lineCoords')
//let xs = [], ys = [];
//for(let item in coord){
// xs.push(coord[item].x);
// ys.push(coord[item].y);
//}
//xs.sort(function(a,b){return a-b});
//ys.sort(function(a,b){return a-b});
//return [xs[0], ys[0]];
return [_obj.get('left'), _obj.get('top')]
}
let fullPath = path.join(exePath, 'data.json')
function saveHistory() {
let fs = require('fs')
let j = {}
try {
fsData = fs.readFileSync(fullPath)
j = JSON.parse(fsData.toString())
for (let item of j.history) {
if (item.path == openAs.name) {
item.time = getDate()
fs.writeFileSync(fullPath, JSON.stringify(j))
return
}
}
j.history.push({ time: getDate(), path: openAs.name })
fs.writeFileSync(fullPath, JSON.stringify(j))
} catch (e) {
let j = { history: { time: getDate(), path: openAs.name } }
fs.writeFileSync(fullPath, JSON.stringify(j))
}
}
function open(file) {
let fs = require('fs')
var fsData = fs.readFileSync(file)
openAs.name = file
let j = JSON.parse(fsData.toString())
let left = background_image.left
let top = background_image.top
let new_left = j.f.objects[0].left
let new_top = j.f.objects[0].top
for (let o of j.f.objects) {
o.left = o.left - new_left + left
o.top = o.top - new_top + top
}
for (let o of j.b.objects) {
o.left = o.left - new_left + left
o.top = o.top - new_top + top
}
canvas1.loadFromJSON(j.f)
canvas2.loadFromJSON(j.b)
background_image1 = canvas1.getObjects()[0]
background_image2 = canvas2.getObjects()[0]
objs2 = j.bo
objs1 = j.fo
step1.val = 0
step2.val = 0
recordJson1 = []
recordJson2 = []
recordObjs1 = []
recordObjs2 = []
if ($('#front_side').hasClass('ui-button-active')) {
objs = objs1
recordObjs = recordObjs1
recordJson = recordJson1
step = step1
background_image = background_image1
} else if ($('#back_side').hasClass('ui-button-active')) {
objs = objs2
recordObjs = recordObjs2
recordJson = recordJson2
background_image = background_image2
step = step2
}
canvas1.renderAll()
canvas2.renderAll()
updateList() /*
修复打开新文件后无法撤销的bug
2022-07-16
*/
setTimeout(() => {
recordObjs1.push(JSON.stringify(objs1))
let j1 = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
j1.objects[0].hoverCursor = 'default'
recordJson1.push(j1)
recordObjs2.push(JSON.stringify(objs2))
let j2 = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
j2.objects[0].hoverCursor = 'default'
recordJson2.push(j2)
}, 0)
}
$('#open').click(function () {
if (step.val == 0) {
OpenDialog();
return;
}
layer.confirm(
'<font style="color:black">' + language_str('whetherSave') + '</font>',
function (index) {
//confirm 是否保存当前文件？
//let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
//let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
//let o = { f : j, b : b,fo : objs1, bo : objs2};
//if(openAs != ""){
// //打开的文件
// let fs = require('fs')
// fs.writeFileSync(openAs,JSON.stringify(o))
// layer.msg('保存成功至'+ openAs);
//
// OpenDialog();return;
//}
//dialog.showSaveDialog({
// title:'保存文件',
// filters: [
// { name: 'FCS File Type', extensions: ['fcs'] },
// ]
//}).then(result=>{
// let fs = require('fs')
// fs.writeFileSync(result.filePath,JSON.stringify(o))
//
// OpenDialog();
//}).catch(err=>{
// console.log()
//})
/*
let j = canvas1.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
let b = canvas2.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]);
let _g1 = [], _g2 = [];
let left = 0, top = 0;
for( let _o of canvas1.getObjects() ){
if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
}
if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
}
_g1.push(fabric.util.object.clone(_o));
}
let fp = new fabric.Group(_g1).toDataURL({
height: 648,
width: 1012,
top:top/zoom,
left:left/zoom
});
left = 0, top = 0;
for( let _o of canvas2.getObjects() ){
if( getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left){
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()));
}
if( getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top){
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()));
}
_g2.push(fabric.util.object.clone(_o));
}
//let fp = new fabric.Group(_g1).toDataURL();
let bp = new fabric.Group(_g2).toDataURL({
height: 648,
width: 1012,
top:top/zoom,
left:left/zoom
});
let o = { f : j, b : b,fo : objs1, bo : objs2,fp:fp,bp:bp};
if(openAs.name != ""){
//打开的文件
let fs = require('fs')
fs.writeFileSync(openAs.name,JSON.stringify(o))
layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
saveHistory();
OpenDialog();
return;
}
dialog.showSaveDialog({
title:language_str("saveFile"),//'保存文件'
filters: [
{ name: 'Soon File Type', extensions: ['soon'] },
]
}).then(result=>{
if(result.canceled)return;
if(result.filePath.substring(result.filePath.length-5).indexOf('.') == -1){
result.filePath += '.soon';
}
let fs = require('fs')
fs.writeFileSync(result.filePath,JSON.stringify(o))
openAs.name = result.filePath;
layer.msg(language_str("saveSucc")+ openAs.name);//'保存成功至'
saveHistory();
OpenDialog();
}).catch(err=>{
console.log()
})
*/
output(OpenDialog)
layer.close(index)
},
function (index) {
OpenDialog()
}
)
function OpenDialog() {
dialog
.showOpenDialog({
title: '请选择文件', //confirm
buttonLabel: language_str('comf'), //"确认"
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
})
.then((result) => {
if (result.canceled) return
//console.log(result.filePaths)
let fs = require('fs')
var fsData = fs.readFileSync(result.filePaths[0])
openAs.name = result.filePaths[0]
let j = JSON.parse(fsData.toString())
let type = j.soonType ? j.soonType : j.backBlackPic ? 2 : 1;
if (type == 1) {
ipcRenderer.send('open-design-page', openAs.name, type);
return
}
let left = background_image.left
let top = background_image.top
let new_left = j.f.objects[0].left
let new_top = j.f.objects[0].top
for (let o of j.f.objects) {
o.left = o.left - new_left + left
o.top = o.top - new_top + top
}
for (let o of j.b.objects) {
o.left = o.left - new_left + left
o.top = o.top - new_top + top
}
canvas1.loadFromJSON(j.f)
canvas2.loadFromJSON(j.b)
background_image1 = canvas1.getObjects()[0]
background_image2 = canvas2.getObjects()[0]
objs2 = j.bo
objs1 = j.fo
step1.val = 0
step2.val = 0
recordJson1 = []
recordJson2 = []
recordObjs1 = []
recordObjs2 = []
if ($('#front_side').hasClass('ui-button-active')) {
objs = objs1
recordObjs = recordObjs1
recordJson = recordJson1
step = step1
background_image = background_image1
} else if ($('#back_side').hasClass('ui-button-active')) {
objs = objs2
recordObjs = recordObjs2
recordJson = recordJson2
background_image = background_image2
step = step2
}
canvas1.renderAll()
canvas2.renderAll()
updateList()
/*
修复打开新文件后无法撤销的bug
2022-07-16
*/
setTimeout(() => {
recordObjs1.push(JSON.stringify(objs1))
let j1 = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
j1.objects[0].hoverCursor = 'default'
recordJson1.push(j1)
recordObjs2.push(JSON.stringify(objs2))
let j2 = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
j2.objects[0].hoverCursor = 'default'
recordJson2.push(j2)
}, 0)
})
.catch((err) => {
console.log(err)
})
}
})
function clearAll() {
//let blank = "{\"f\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":1012,\"height\":648,\"fill\":\"#000000\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,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YFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMT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\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"b\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":1012,\"height\":648,\"fill\":\"rgb(0,0,0)\",\"stroke\":null,\"strokeWidth\":0,\"strokeDashArray\":null,\"strokeLineCap\":\"butt\",\"strokeDashOffset\":0,\"strokeLineJoin\":\"miter\",\"strokeUniform\":false,\"strokeMiterLimit\":4,\"scaleX\":1,\"scaleY\":1,\"angle\":0,\"flipX\":false,\"flipY\":false,\"opacity\":1,\"shadow\":null,\"visible\":true,\"backgroundColor\":\"\",\"fillRule\":\"nonzero\",\"paintFirst\":\"fill\",\"globalCompositeOperation\":\"source-over\",\"skewX\":0,\"skewY\":0,\"cropX\":0,\"cropY\":0,\"selectable\":false,\"hoverable\":false,\"hoverCursor\":\"default\",\"src\":\"data:image/png;base64,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YFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAX2YPDVmXlAHjVBgAABAgQIECBAgAABAgQIlAh8bQ8Gt83MQ0oWtiYBAgQIECBAgAABAgQIECCQBW7fg8GtM/OoPGuCAAECBAgQIECAAAECBAgQKBG4dQ8GN8zMdSULW5MAAQIECBAgQIAAAQIECBDIAjfuweADM/OsPGuCAAECBAgQIECAAAECBAgQKBH44B4M3jIzLy9Z2JoECBAgQIAAAQIECBAgQIBAFnjrHgxeMDPvzrMmCBAgQIAAAQIECBAgQIAAgRKBn9uDwYmZ+UTJwtYkQIAAAQIECBAgQIAAAQIEssCJPRg8cGa+ODNX5XkTBAgQIECAAAECBAgQIECAwGUucMfMPGztS27b9qGZedplvrD1CBAgQIAAAQIECBAgQIAAgSzw4bXW008Gg/1LD/cvP/QgQIAAAQIECBAgQIAAAQIEugVevtb6zZPB4JqZuanbw/YECBAgQIAAAQIECBAgQIDAzFy71rr568Fgf2zbdv3MPBENAQIECBAgQIAAAQIECBAgUCtw/VrrSfv2pwaDF8/Mb9eSWJwAAQIECBAgQIAAAQIECBB48VrrHXcPBg+dmc/OzLfwIUCAAAECBAgQIECAAAECBOoE/ntmrl5r3fYNwWD/H9u2vW1mXlJHYmECBAgQIECAAAECBAgQIEDg7Wutl55kuOufJByCwWNm5p9n5kGcCBAgQIAAAQIECBAgQIAAgRqB/5uZ711r3XKPweAQDd41Mz9fQ2JRAgQIECBAgAABAgQIECBA4HfXWi88leEbPmFwCAaPPHzK4CpeBAgQIECAAAECBAgQIECAwGUvcMfMPHattX+v4V2P04LBIRq8embecNmTWJAAAQIECBAgQIAAAQIECBB47VrrtAZwpmCwf4fBDTPzeG4ECBAgQIAAAQIECBAgQIDAZSvwqZk5sdb6yt03vMdgsA9t23ZiZj42M1dctiwWI0CAAAECBAgQIECAAAECvQJ3zsxT1lr7BwZOe5wxGByiwS/OzK/32tmcAAECBAgQIECAAAECBAhctgKvWmv92pm2S8Fg//M/nplnX7Y8FiNAgAABAgQIECBAgAABAn0C75uZ56y1tnMKBvsPbdv2rTPz5zPz5D4/GxMgQIAAAQIECBAgQIAAgctO4OMz87S11u1n2+ysnzA4+YPbtj388H0G1152TBYiQIAAAQIECBAgQIAAAQI9AjcdvrfgC2nlIwWD/Um2bXvMzHx0Zh6VntSfEyBAgAABAgQIECBAgAABAvc7gc/MzFPXWjcf5Z0dORgcosE1M/ORmfmuozy5GQIECBAgQIAAAQIECBAgQOB+IfDpmfnxtdb+CYMjPY4VDA7RYP+EwZ/MzBOO9AqGCBAgQIAAAQIECBAgQIAAgftS4JMz88y11v4JgyM/jh0MDtHgwTPzhzPzk0d+JYMECBAgQIAAAQIECBAgQIDAxRZ4/8w8f631peO+8DkFg0M02H/2lTPzKzNzxXFf2DwBAgQIECBAgAABAgQIECBwwQTunJlfnpk3ne1XJ57t1c85GJx80m3bThw+bfC4C7amJyZAgAABAgQIECBAgAABAgSOKvCPM/O8tdaNR/2Be5q718Fgf9Jt2/ZPGOyfNnj1zFx1b96QnyVAgAABAgQIECBAgAABAgTOSeCOmXnj4VMF+ycM7tXjvASDk+9g27ZHzMzrZuZnZ+ab7tU788MECBAgQIAAAQIECBAgQIDAUQT+d2Z+b2Zev9b6/FF+4Cgz5zUYnBIOrp6ZV8zMi2bmyqO8ETMECBAgQIAAAQIECBAgQIDAsQS+PDPvnJk3r7U+d6yfPMLwBQkGp4SDh87Mc/d/OzEzP3iE92OEAAECBAgQIECAAAECBAgQOLvA9TPznpl571rrtguFdUGDwalvetu2x8zMM2bmR2bmqTPzsAu1lOclQIAAAQIECBAgQIAAAQKXkcAXZ+avZ+avZubP1lo3X4zdLlowuFs8eMDMPGFmrpuZ75uZa2bmO2fm2w9fmrh/MsGDAAECBAgQIECAAAECBAi0COyfFNi/tPDfZ+bWmbllZvbfdrD/poNPrrW+drEh/h+5oaPdsxLhuQAAAABJRU5ErkJggg==\",\"crossOrigin\":null,\"filters\":[]}],\"hoverCursor\":\"move\"},\"fo\":[],\"bo\":[]}";
//let j = JSON.parse(blank);
//canvas1.setZoom(1);
//canvas2.setZoom(1);
//canvas1.loadFromJSON(j.f);
//canvas2.loadFromJSON(j.b);
let t_objs1 = canvas1.getObjects()
let t_objs2 = canvas2.getObjects()
for (let i = 1; i < t_objs1.length; i++) {
canvas1.remove(t_objs1[i])
}
for (let i = 1; i < t_objs2.length; i++) {
canvas2.remove(t_objs2[i])
}
objs2 = []
objs1 = []
step1.val = 0
step2.val = 0
recordJson1 = []
recordJson2 = []
recordObjs1 = []
recordObjs2 = []
if ($('#front_side').hasClass('ui-button-active')) {
objs = objs1
recordObjs = recordObjs1
recordJson = recordJson1
step = step1
} else if ($('#back_side').hasClass('ui-button-active')) {
objs = objs2
recordObjs = recordObjs2
recordJson = recordJson2
step = step2
}
openAs.name = ''
canvas1.renderAll()
canvas2.renderAll()
updateList()
console.log()
}
$('#new').click(function () {
if (step.val == 0) {
ipcRenderer.send('open-first-page');
return;
}
layer.confirm(
'<font style="color:black">' + language_str('whetherSave') + '</font>',
function (index) {
//confirm 是否保存当前文件？
output(() => ipcRenderer.send('open-first-page'))
return
let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
let _g1 = [],
_g2 = []
let left = 0,
top = 0
for (let _o of canvas1.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g1.push(fabric.util.object.clone(_o))
}
let fp = new fabric.Group(_g1).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
; (left = 0), (top = 0)
for (let _o of canvas2.getObjects()) {
if (getCoordsMinX(background_image.getCoords()) - getCoordsMinX(_o.getCoords()) > left) {
left = -(getCoordsMinX(_o.getCoords()) - getCoordsMinX(background_image.getCoords()))
}
if (getCoordsMinY(background_image.getCoords()) - getCoordsMinY(_o.getCoords()) > top) {
top = -(getCoordsMinY(_o.getCoords()) - getCoordsMinY(background_image.getCoords()))
}
_g2.push(fabric.util.object.clone(_o))
}
//let fp = new fabric.Group(_g1).toDataURL();
let bp = new fabric.Group(_g2).toDataURL({
height: 648,
width: 1012,
top: top / zoom,
left: left / zoom
})
let o = { f: j, b: b, fo: objs1, bo: objs2, fp: fp, bp: bp }
if (openAs.name != '') {
//打开的文件
let fs = require('fs')
o.soonType = 2
fs.writeFileSync(openAs.name, JSON.stringify(o))
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
/*
2022-07-16 直接跳转至首页
*/
ipcRenderer.send('open-first-page')
//saveHistory();
//clearAll();
return
}
dialog
.showSaveDialog({
title: language_str('saveFile'), //'保存文件'
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
})
.then((result) => {
if (result.filePath == '') {
return
}
if (result.filePath.substring(result.filePath.length - 5).indexOf('.') == -1) {
result.filePath += '.soon'
}
let fs = require('fs')
o.soonType = 2
fs.writeFileSync(result.filePath, JSON.stringify(o))
openAs.name = result.filePath
layer.msg(language_str('saveSucc') + openAs.name) //'保存成功至'
/*
2022-07-16 直接跳转至首页
*/
ipcRenderer.send('open-first-page')
//saveHistory();
//clearAll();
})
.catch((err) => {
console.log()
})
layer.close(index)
},
function (index) {
/*
2022-07-16 直接跳转至首页
*/
//clearAll();
ipcRenderer.send('open-first-page')
}
)
})
function chagneTitle() { }
function addBackground() {
// 类型改变
fabric.Image.fromURL('./public/images/bg_front_2.png', function (image) {
//image.set("scaleX",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)
//image.set("scaleY",$("#canvas-div").width() / 1200 < 1 ? $("#canvas-div").width() / 1200 : 1)
image.left = ($('#canvas1').width() - image.width * image.get('scaleX')) / 2
image.top = ($('#canvas1').height() - image.height * image.get('scaleY')) / 2
image.selectable = false
image.hoverable = false
image.hoverCursor = 'default'
image.setSrc(image.toDataURL(), function (image) {
background_image1 = image
background_image = background_image1
canvas.add(image)
canvas.renderAll()
//pre_objs1.push(JSON.stringify(objs1));
//pre_json1.push(canvas1.toJSON(["selectable","hoverable","hoverCursor"]));
recordObjs1.push(JSON.stringify(objs1))
recordJson1.push(canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))
})
// 类型改变
fabric.Image.fromURL('./public/images/bg_back_2.png', function (image) {
image.left = ($('#canvas2').width() - image.width) / 2
image.top = ($('#canvas2').height() - image.height) / 2
image.selectable = false
image.hoverable = false
image.hoverCursor = 'default'
image.setSrc(image.toDataURL(), function (image) {
background_image2 = image
canvas2.add(image)
canvas2.renderAll()
//pre_objs2.push(JSON.stringify(objs2));
//pre_json2.push(canvas2.toJSON(["selectable","hoverable","hoverCursor"]));
recordObjs2.push(JSON.stringify(objs2))
recordJson2.push(canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))
let file = GetFile().get('file')
console.log(file)
if (file && file != 'empty') {
open(file)
}
})
})
is_bgi_add = true
})
}
function selectObject(target, index) {
updateControls()
$('#base_control').show()
//$("#text_x").val((target.left - background_image.left).toFixed(1));
//$("#text_y").val((target.top - background_image.top).toFixed(1));
//$("#text_w").val(parseFloat(target.get("scaleX") * target.get("width")).toFixed(1));
//$("#text_h").val(parseFloat(target.get("scaleY") * target.get("height")).toFixed(1));
//$("#text_r").val(target.get("angle").toFixed(0));
}
function updateControls() {
$('#text_r').val(canvas.getActiveObject().get('angle').toFixed(0))
$('#text_x').val((canvas.getActiveObject().get('left') - background_image.left).toFixed(0))
$('#text_y').val((canvas.getActiveObject().get('top') - background_image.top).toFixed(0))
$('#text_h').val((canvas.getActiveObject().get('scaleY') * canvas.getActiveObject().get('height')).toFixed(0))
$('#text_w').val((canvas.getActiveObject().get('scaleX') * canvas.getActiveObject().get('width')).toFixed(0))
if (canvas.getActiveObject().get('selectable')) {
$('#lock_img').attr('src', 'public/images/unlock20.png') //已经上锁，需要解锁
} else {
$('#lock_img').attr('src', 'public/images/lock20.png') //没上锁，可以上锁
}
}
function checkName(name) {
//检查字段名是否重复了
for (let item of objs1) {
if (item.name == name) {
return false
}
}
for (let item of objs2) {
if (item.name == name) {
return false
}
}
return true
}
function resName(pre_name) {
//返回的是不重复的字段名
let num = objs1.length + objs2.length - 1
do {
num++
} while (!checkName(pre_name + num)) //重复了就再加1
return pre_name + num
}
function addPic(pointer) {
pre_add_image.left = pointer.x
pre_add_image.top = pointer.y
canvas.add(pre_add_image)
objs.push({ type: 1, black: false })
canvas.renderAll()
updateList()
recordState()
//OpenDialog();
//function OpenDialog()
//{
// dialog.showOpenDialog({
// title: "请选择图片",
// buttonLabel: "确认",
// filters: [
// { name: 'Image File Type', extensions: ['png', 'jpg'] },
// ]
// }).then(result => {
// if(result.canceled)return;
// //console.log(result.filePaths)
// fabric.Image.fromURL(result.filePaths[0], function(image) {
// image.left = pointer.x;
// image.top = pointer.y;
//
// canvas.add(image);
// objs.push({type: 1});
// canvas.renderAll();
// updateList();
// recordState();
// } );
// }).catch(err => {
// console.log(err)
// })
//}
}
function selectPic(target, index) {
//透明度
$('#pic_control').show()
$("#set_bg").show();
pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
let idx = getIndex(canvas.getActiveObject())
// $("#pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#line_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function addOutPic(pointer) {
fabric.Image.fromURL('./public/images/outpic_extra.png', function (image) {
let width = canvas.getWidth()
let height = canvas.getHeight()
image.left = pointer.x
image.top = pointer.y
image.opacity = 1
//image.on("selected",function(){//test well
// console.log(222);
//});
image.setSrc(image.toDataURL(), function (image) {
canvas.add(image)
objs.push({ type: 2, name: resName('OUT_PIC_'), black: false })
canvas.renderAll()
updateList()
recordState()
})
})
}
function selectOutPic(target, index) {
//字段名
$('#out_pic_control').show()
out_pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
let idx = getIndex(canvas.getActiveObject())
$('#out_pic_field_name').val(objs[idx - 1].name)
// $("#out_pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');
$('#pic_control').hide()
$("#set_bg").hide();
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#line_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function addText(pointer) {
let text = new fabric.IText('TEXT', {
//源：文本
left: pointer.x,
top: pointer.y,
fill: '#000000',
textBackgroundColor: '',
fontStyle: 'normal',
fontWeight: 'normal',
underline: false,
linethrough: false,
fontFamily: 'Arial'
})
text.setControlVisible('ml', false)
text.setControlVisible('mt', false)
text.setControlVisible('mr', false)
text.setControlVisible('mb', false)
canvas.add(text)
objs.push({ type: 3, black: false })
canvas.renderAll()
updateList()
recordState()
}
function selectText() {
//console.log(canvas.getActiveObject().get("fontFamily"));
$('#text_control').show()
$('#text_color').val(canvas.getActiveObject().get('fill'))
$('#text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
if (val%0.5!==0) val = Math.round(val*2)/2
$("#text_size").val(val);
$('#text_text').val(canvas.getActiveObject().get('text'))
$('#text_font_family').val(canvas.getActiveObject().get('fontFamily'))
if (canvas.getActiveObject().get('underline') == true) {
$('#text_underline').addClass('ui-radio-acitve')
} else {
$('#text_underline').removeClass('ui-radio-acitve')
}
if (canvas.getActiveObject().get('fontWeight') == 'bold') {
$('#text_bold').addClass('ui-radio-acitve')
} else {
$('#text_bold').removeClass('ui-radio-acitve')
}
if (canvas.getActiveObject().get('fontStyle') == 'italic') {
$('#text_italics').addClass('ui-radio-acitve')
} else {
$('#text_italics').removeClass('ui-radio-acitve')
}
if (canvas.getActiveObject().get('linethrough') == true) {
$('#text_linethrough').addClass('ui-radio-acitve')
} else {
$('#text_linethrough').removeClass('ui-radio-acitve')
}
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#line_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function getDisdance(x1, y1, x2, y2) {
var dx = Math.abs(x2 - x1); // 计算x轴上的距离差，并取绝对值
var dy = Math.abs(y2 - y1); // 计算y轴上的距离差，并取绝对值
var distance = Math.sqrt(dx * dx + dy * dy); // 应用勾股定理计算距离
return distance;
}
function getDeg(pointer) {
// 计算点击位置与画布中心的坐标差
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var mouseX = pointer.x;
var mouseY = pointer.y;
var dx = mouseX - centerX;
var dy = mouseY - centerY;
// 计算旋转角度（弧度）
var angleRad = Math.atan2(dy, dx);
// 将角度转换为度数
var angleDeg = angleRad * (180/Math.PI);
if (angleDeg < 0) {
angleDeg += 360;
}
angleDeg += 90
return angleDeg
}
function addCircleText(pointer) {
let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
let angleDeg = getDeg(pointer)
let text = new fabric.CurvedText('Circle TEXT', {//源：圆形文本
left: pointer.x,
top: pointer.y,
fill: "#000000",
textBackgroundColor: "",
fontStyle: "normal",
fontWeight: "normal",
diameter: distance*2,
fontSize: 30,
underline: false,
linethrough: false,
lockScalingX: true,
lockScalingY: true,
fontFamily: 'Arial',
originX: 'center',
originY: 'center',
angle: angleDeg,
flipped: pointer.y > canvas.height/2 ? true : false
});
// distance = getDisdance(pointer.x+text.width/2, pointer.y, canvas.width/2,canvas.height/2)
// text.set({diameter: distance*2})
text.setControlVisible("ml", false);
text.setControlVisible("mt", false);
text.setControlVisible("mr", false);
text.setControlVisible("mb", false);
canvas.add(text);
objs.push({ type: 11, black: false, circleCenter: 0 });
canvas.renderAll();
updateList();
recordState();
}
function selectCircleText() {
console.log(canvas.getActiveObject().get("text"))
let idx = getIndex(canvas.getActiveObject());
$("#circle_text_control").show();
$("#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")-50);
$("#circle_text_center").prop("checked", objs[idx - 1].circleCenter ? 'checked' : '');
$("#circle_text_text").val(canvas.getActiveObject().get("text"));
$("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily"));
if (canvas.getActiveObject().get("underline") == true) {
$("#circle_text_underline").addClass("ui-radio-acitve")
} else {
$("#circle_text_underline").removeClass("ui-radio-acitve")
}
if (canvas.getActiveObject().get("fontWeight") == "bold") {
$("#circle_text_bold").addClass("ui-radio-acitve")
} else {
$("#circle_text_bold").removeClass("ui-radio-acitve")
}
if (canvas.getActiveObject().get("fontStyle") == "italic") {
$("#circle_text_italics").addClass("ui-radio-acitve")
} else {
$("#circle_text_italics").removeClass("ui-radio-acitve")
}
if (canvas.getActiveObject().get("linethrough") == true) {
$("#circle_text_linethrough").addClass("ui-radio-acitve")
} else {
$("#circle_text_linethrough").removeClass("ui-radio-acitve")
}
$("#pic_control").hide();
$("#set_bg").hide();
$("#rotate").hide();
$("#out_pic_control").hide();
$("#text_control").hide();
$("#out_text_control").hide();
$("#rect_control").hide();
$("#circle_control").hide();
$("#line_control").hide();
$("#counter_control").hide();
$("#qrcode_Controll").hide();
$("#barcode_controll").hide();
}
function addOutText(pointer) {
//MERGE_TEXT_1
let text = new fabric.Text('MERGE TEXT', {
//源：合成文本
left: pointer.x,
top: pointer.y,
fill: '#000000',
fontStyle: 'normal',
fontWeight: 'normal',
textBackgroundColor: '',
underline: false,
linethrough: false,
fontFamily: 'Arial',
textAlign: 'center'
})
//text.on({
// 'scaling': function(e) {
// var obj = this,
// w = obj.width * obj.scaleX,
// h = obj.height * obj.scaleY;
//
// obj.set({
// 'height' : h,
// 'width' : w,
// 'scaleX' : 1,
// 'scaleY' : 1
// });
// }
//});
text.setControlVisible('ml', false)
text.setControlVisible('mt', false)
text.setControlVisible('mr', false)
text.setControlVisible('mb', false)
canvas.add(text)
objs.push({ type: 4, name: resName('OUT_TEXT_'), exceed: false, autoWrap: false, fixSize: false, black: false, align: 'center' })
canvas.renderAll()
updateList()
recordState()
}
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'))
let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
if (val%0.5!==0) val = Math.round(val*2)/2
$("#out_text_size").val(val);
$('#out_text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
let idx = getIndex(canvas.getActiveObject())
$('#out_text_field_name').val(objs[idx - 1].name)
$('#out_text_font_family').val(canvas.getActiveObject().get('fontFamily'))
$('#exceed').prop('checked', objs[idx - 1].exceed ? 'checked' : '')
$('#autoWrap').prop('checked', objs[idx - 1].autoWrap ? 'checked' : '')
$('#fixSize').prop('checked', objs[idx - 1].fixSize ? 'checked' : '')
if (canvas.getActiveObject().get('underline') == true) {
$('#out_text_underline').addClass('ui-radio-acitve')
} else {
$('#out_text_underline').removeClass('ui-radio-acitve')
}
if (canvas.getActiveObject().get('fontWeight') == 'bold') {
$('#out_text_bold').addClass('ui-radio-acitve')
} else {
$('#out_text_bold').removeClass('ui-radio-acitve')
}
if (canvas.getActiveObject().get('fontStyle') == 'italic') {
$('#out_text_italics').addClass('ui-radio-acitve')
} else {
$('#out_text_italics').removeClass('ui-radio-acitve')
}
if (canvas.getActiveObject().get('linethrough') == true) {
$('#out_text_linethrough').addClass('ui-radio-acitve')
} else {
$('#out_text_linethrough').removeClass('ui-radio-acitve')
}
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#rect_control').hide()
$('#circle_control').hide()
$('#line_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function addRect(pointer) {
let rect = new fabric.Rect({
left: pointer.x,
top: pointer.y,
fill: '',
stroke: "#ff0000",
strokeWidth: 3,
width: 100,
height: 100
})
canvas.add(rect)
objs.push({ type: 5, black: false })
canvas.renderAll()
updateList()
recordState()
}
function selectRect() {
//color
$('#rect_control').show()
$('#rect_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
$('#rect_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
$('#rect_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
$('#rect_radius').val(canvas.getActiveObject().get('rx'))
rect_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
let a = canvas.getActiveObject().getCoords()
console.log(getCoordsMinX(a))
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#circle_control').hide()
$('#line_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function addCircle(pointer) {
let circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
fill: '',
stroke: '#ff0000',
strokeWidth: 3,
radius: 100,
strokeUniform: true
})
canvas.add(circle)
objs.push({ type: 6, black: false })
canvas.renderAll()
updateList()
recordState()
}
function selectCircle() {
//border-color
//color
$('#circle_control').show()
$('#circle_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
$('#circle_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
$('#circle_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
circle_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#line_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function addLine(pointer) {
let line = new fabric.Line([50, 100, 200, 100], {
left: pointer.x,
top: pointer.y,
stroke: '#ff0000',
strokeWidth: 3,
strokeDashArray: [0, 0],
})
line.setControlVisible('tl', false)
line.setControlVisible('tr', false)
line.setControlVisible('br', false)
line.setControlVisible('bl', false)
line.setControlVisible('mt', false)
line.setControlVisible('mb', false)
canvas.add(line)
objs.push({ type: 7, black: false })
canvas.renderAll()
updateList()
recordState()
}
function selectLine() {
//color
//weight
$('#line_control').show()
let idx = getIndex(canvas.getActiveObject())
$('#line_color').val(canvas.getActiveObject().get('stroke'))
$('#line_dist').val(canvas.getActiveObject().get('strokeDashArray')[0])
$('#text_h').val(canvas.getActiveObject().get('strokeWidth'))
$('#pic_control').hide()
$("#set_bg").hide();
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function addQrCode(pointer) {
let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0 })
fabric.Image.fromURL(qr, function (image) {
image.left = pointer.x
image.top = pointer.y
canvas.add(image)
objs.push({ type: 8, name: resName('QR_CODE_'), color: '#000000', val: 'http://www.cardsoon.com', black: false })
canvas.renderAll()
updateList()
recordState()
})
}
function selectQrCode() {
//字段名
//background-color
//color
$('#qrcode_Controll').show()
let idx = getIndex(canvas.getActiveObject())
$('#qrcode_field_name').val(objs[idx - 1].name)
$('#qrcode_color').val(objs[idx - 1].color)
$('#qrcode_val').val(objs[idx - 1].val)
$('#line_control').hide()
$('#pic_control').hide()
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#barcode_controll').hide()
}
function addBarCode(pointer) {
JsBarcode('#barcode', '123456789', { margin: 0, lineColor: '#000000', fontSize: 18, font: 'Arial' })
let barcode = document.getElementById('barcode')
let bar = barcode.toDataURL('image/png')
fabric.Image.fromURL(bar, function (image) {
image.left = pointer.x
image.top = pointer.y
canvas.add(image)
objs.push({ type: 9, name: resName('BAR_CODE_'), val: '123456789', color: '#000000', fontSize: 18, font: 'Arial', show: false, black: false }) //show是取消文字显示
canvas.renderAll()
updateList()
recordState()
})
}
function selectBarCode() {
//字段名
//background-color
//color
$('#barcode_controll').show()
let idx = getIndex(canvas.getActiveObject())
$('#barcode_field_name').val(objs[idx - 1].name)
$('#barcode_font_family').val(objs[idx - 1].font)
let val = parseFloat(objs[idx - 1].fontSize)*72/dpi
if (val%0.5!==0) val = Math.round(val*2)/2
$("#barcode_size").val(val);
$('#barcode_val').val(objs[idx - 1].val)
$('#barcode_show').prop('checked', objs[idx - 1].show ? 'checked' : '')
$('#line_control').hide()
$('#pic_control').hide()
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
}
function addCounter(pointer) {
let text = new fabric.Text('0', {
left: pointer.x,
top: pointer.y,
fill: '#000000'
})
canvas.add(text)
objs.push({ type: 10, name: resName('COUNTER_'), start: 0, add: 1, black: false })
canvas.renderAll()
updateList()
recordState()
console.log(canvas.getObjects())
}
function selectCounter() {
//起始
//终止
//增量
$('#counter_control').show()
let idx = getIndex(canvas.getActiveObject())
$('#counter_start').val(objs[idx - 1].start)
$('#counter_add').val(objs[idx - 1].add)
$('#counter_color').val(canvas.getActiveObject().get('fill'))
$('#count_font_family').val(canvas.getActiveObject().get('fontFamily'))
let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi
if (val%0.5!==0) val = Math.round(val*2)/2
$("#count_size").val(val);
$('#line_control').hide()
$('#pic_control').hide()
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
}
function getIndex(target, _canvas = null) {
let temp_objs
if (_canvas == null) {
temp_objs = canvas.getObjects()
} else {
temp_objs = _canvas.getObjects()
}
let i = 0
for (let res of temp_objs) {
if (target == res) {
return i
}
i++
}
return 0
}
function getType(target) {
let temp_objs = canvas.getObjects()
let i = 0
for (let res of temp_objs) {
if (target == res) {
return objs[i].type
}
i++
}
}
function updateList() {
let str = ''
let i = 0
for (let item of objs) {
switch (item.type) {
case 1 /* 2022-06-14修改*/:
str = '<div><img src="public/images/images.svg" id=\'obj' + i + "'/>IMG_" + i + '</div>' + str
break
case 2:
str = '<div><img src="public/images/images_add.svg" id=\'obj' + i + "'/>" + item.name + '</div>' + str
break
case 3:
str = '<div><img src="public/images/text.svg" id=\'obj' + i + "'/>" + 'TEXT_' + i + '</div>' + str
break
case 4:
str = '<div><img src="public/images/text2.svg" id=\'obj' + i + "'/>" + item.name + '</div>' + str
break
case 5:
str = '<div><img src="public/images/rect.svg" id=\'obj' + i + "'/>RECT_" + i + '</div>' + str
break
case 6:
str = '<div><img src="public/images/round.svg" id=\'obj' + i + "'/>CIRCLE_" + i + '</div>' + str
break
case 7:
str = '<div><img src="public/images/line.svg" id=\'obj' + i + "'/>LINE_" + i + '</div>' + str
break
case 8:
str = '<div><img src="public/images/qrcode.svg" id=\'obj' + i + "'/>QRCODE_" + i + '</div>' + str
break
case 9:
str = '<div><img src="public/images/barcode.svg" id=\'obj' + i + "'/>BARCODE_" + i + '</div>' + str
break
case 10:
str = '<div><img src="public/images/counter.svg" id=\'obj' + i + "'/>COUNTER_" + i + '</div>' + str
break
case 11:
str = "<div><img src=\"public/images/text3.svg\" id='obj" + i + "'/>" + "CIRCLE_TEXT_" + i + "</div>" + str;
break;
}
i++
}
$('.obj_list').html(str)
}
function selectObj(i, notSelect = false) {
//for(let item in $(".obj_list").children()){
// if(_i == i){
// item.css("background-color","#6F7A84");
// }else{
// item.css("background-color","");
// }
// _i++;
//}
$('.obj_list div').each(function (index) {
//if(index == i){
if ($(this).children('img').attr('id') == 'obj' + i) {
$(this).css('background-color', '#6F7A84')
canvas.setActiveObject(canvas.getObjects()[i + 1])
canvas.renderAll()
} else {
$(this).css('background-color', '')
}
})
if (!notSelect) {
handleObjectSelected()
}
}
function recordState() {
//pre_objs.push(JSON.stringify(objs));
//pre_json.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
//next_json = [];
//next_objs = [];
//recordObjs.push(JSON.stringify(objs));
//recordJson.push(canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]));
++step.val
for (let i = step.val; i < recordObjs.length; i++) {
recordObjs.pop()
recordJson.pop()
}
//recordObjs.splice(step.val, 1, JSON.stringify(objs))
//recordJson.splice(step.val, 1, canvas.toJSON(["selectable","hoverable","hoverCursor","text","fontStyle","fontWeight","underline"]))
recordObjs.push(JSON.stringify(objs))
j = canvas.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
j.objects[0].hoverCursor = 'default'
recordJson.push(j)
console.log(recordJson)
}
function getCoordsMinX(acoords) {
x = acoords[0].x
for (let item of acoords) {
if (item.x < x) {
x = item.x
}
}
return x
}
function getCoordsMaxX(acoords) {
x = acoords[0].x
for (let item of acoords) {
if (item.x > x) {
x = item.x
}
}
return x
}
function getCoordsMinY(acoords) {
y = acoords[0].y
for (let item of acoords) {
if (item.y < y) {
y = item.y
}
}
return y
}
function getCoordsMaxY(acoords) {
y = acoords[0].y
for (let item of acoords) {
if (item.y > y) {
y = item.y
}
}
return y
}
$('#text_y').bind('input propertychange', function () {
if ($('#text_y').val() == '') {
$('#text_y').val(0)
}
let val = background_image.top
if ($('#text_y').val() != '') {
val = background_image.top + parseInt($('#text_y').val())
}
canvas.getActiveObject().set('top', val)
canvas.renderAll()
recordState()
})
$('#text_x').bind('input propertychange', function () {
if ($('#text_x').val() == '') {
$('#text_x').val(0)
}
let val = background_image.left
if ($('#text_x').val() != '') {
val = background_image.left + parseInt($('#text_x').val())
}
canvas.getActiveObject().set('left', val)
canvas.renderAll()
recordState()
})
$('#text_w').bind('input propertychange', function () {
let val = '0'
if ($('#text_w').val() != '') {
val = $('#text_w').val()
}
let type = objs[getIndex(canvas.getActiveObject()) - 1].type
if (type == 3 || type == 4) {
canvas.getActiveObject().set('width', parseInt(val))
} else {
canvas.getActiveObject().set('scaleX', parseInt(val) / canvas.getActiveObject().get('width'))
}
canvas.renderAll()
recordState()
})
$('#text_h').bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject())
if (objs[idx - 1].type == 7) {
if ($('#text_h').val() == '') {
$('#text_h').val(canvas.getActiveObject().get('strokeWidth'))
}
canvas.getActiveObject().set('strokeWidth', parseInt($('#text_h').val()))
canvas.renderAll()
return
}
let val = '0'
if ($('#text_h').val() != '') {
val = $('#text_h').val()
}
let type = objs[getIndex(canvas.getActiveObject()) - 1].type
if (type == 3 || type == 4) {
canvas.getActiveObject().set('height', parseInt(val))
} else {
canvas.getActiveObject().set('scaleY', parseInt(val) / canvas.getActiveObject().get('height'))
}
canvas.renderAll()
recordState()
})
$('#text_r').bind('input propertychange', function () {
if ($('#text_r').val() == '') {
$('#text_r').val('0')
}
$('#text_r').val(parseInt($('#text_r').val()) % 360)
//canvas.getActiveObject().set("rotate", val)
canvas.getActiveObject().rotate(parseInt($('#text_r').val()))
canvas.renderAll()
recordState()
})
$('#out_pic_field_name').bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].name = $('#out_pic_field_name').val()
updateList()
recordState()
})
$('#text_black').click(function () {
let idx = getIndex(canvas.getActiveObject())
if ($(this).prop('checked')) {
objs[idx - 1].black = true
} else {
objs[idx - 1].black = false
}
recordState()
})
// $("#out_pic_black").click(function () {
// let idx = getIndex(canvas.getActiveObject());
// if ($(this).prop("checked")) {
// objs[idx-1].black = true;
// } else {
// objs[idx-1].black = false;
// }
// recordState();
// });
$('#out_text_field_name').bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].name = $('#out_text_field_name').val()
updateList()
recordState()
})
$('#qrcode_field_name').bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].name = $('#qrcode_field_name').val()
updateList()
recordState()
})
$('#qrcode_color').bind('input propertychange', function () {
let item = canvas.getActiveObject()
let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0, foreground: $(this).val() })
let idx = getIndex(item)
objs[idx - 1].color = $(this).val()
item.setSrc(qr, function (img) {
canvas.renderAll()
recordState()
})
})
$("#qrcode_val").bind('change', function () {
let val = $(this).val() ? $(this).val() : 'https://www.cardsoon.com'
let item = canvas.getActiveObject();
let qr = jrQrcode.getQrBase64(val, { padding: 0, foreground: $("#qrcode_color").val() });
let idx = getIndex(item);
objs[idx - 1].val = val;
item.setSrc(qr, function (img) {
canvas.renderAll();
recordState();
});
});
$('#barcode_color').bind('input propertychange', function () {
let item = canvas.getActiveObject()
let idx = getIndex(item)
objs[idx - 1].color = $(this).val()
JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
let barcode = document.getElementById('barcode')
let bar = barcode.toDataURL('image/png')
item.setSrc(bar, function (img) {
canvas.renderAll()
recordState()
})
})
$('#barcode_field_name').bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].name = $('#barcode_field_name').val()
updateList()
recordState()
})
$('#text_color').bind('input propertychange', function () {
canvas.getActiveObject().set('fill', $('#text_color').val())
canvas.renderAll()
recordState()
})
$('#text_back_color').bind('input propertychange', function () {
canvas.getActiveObject().set('textBackgroundColor', $('#text_back_color').val())
canvas.renderAll()
recordState()
})
$('#out_text_back_color').bind('input propertychange', function () {
canvas.getActiveObject().set('textBackgroundColor', $('#out_text_back_color').val())
canvas.renderAll()
recordState()
})
$("#text_size").bind('input propertychange', function () {
let val = 1
if (parseFloat($("#text_size").val())) {
val = parseFloat($("#text_size").val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val%0.5!==0) {
val = Math.round(val*2)/2
}
}
$("#text_size").val(val)
canvas.getActiveObject().set("fontSize", val*dpi/72);
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
canvas.renderAll();
recordState();
})
$("#circle_text_color").bind('input propertychange', function () {
canvas.getActiveObject().set("fill", $("#circle_text_color").val());
canvas.renderAll();
recordState();
})
$("#circle_text_back_color").bind('input propertychange', function () {
canvas.getActiveObject().set("textBackgroundColor", $("#circle_text_back_color").val());
canvas.renderAll();
recordState();
})
$("#circle_text_text").bind('input propertychange', function () {
let val = $("#circle_text_text").val().trim()
canvas.getActiveObject().set("text", ` ${val} `);
canvas.renderAll();
updateList();
recordState();
})
$("#circle_text_center").click(function () {
let idx = getIndex(canvas.getActiveObject());
if ($(this).prop("checked")) {
objs[idx - 1].circleCenter = 1;
} else {
objs[idx - 1].circleCenter = 0;
}
recordState();
});
$('#out_text_color').bind('input propertychange', function () {
canvas.getActiveObject().set('fill', $('#out_text_color').val())
canvas.renderAll()
recordState()
})
$("#out_text_size").bind('input propertychange', function () {
let val = 1
if (parseFloat($("#out_text_size").val())) {
val = parseFloat($("#out_text_size").val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val%0.5!==0) {
val = Math.round(val*2)/2
}
}
$("#out_text_size").val(val)
canvas.getActiveObject().set("fontSize", val*dpi/72);
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
canvas.renderAll();
recordState();
})
$('#out_text_text').bind('input propertychange', function () {
let val = $("#out_text_text").val().trim()
canvas.getActiveObject().set("text", ` ${val} `);
canvas.renderAll()
updateList()
recordState()
})
$('#rect_color').bind('input propertychange', function () {
canvas.getActiveObject().set('fill', $('#rect_color').val())
canvas.renderAll()
recordState()
})
$('#rect_stroke').bind('input propertychange', function () {
canvas.getActiveObject().set('stroke', $('#rect_stroke').val())
canvas.renderAll()
recordState()
})
$('#rect_stroke_width').bind('input propertychange', function () {
if ($('#rect_stroke_width').val() == '') {
$('#rect_stroke_width').val('0')
} else {
$('#rect_stroke_width').val(parseInt($('#rect_stroke_width').val()))
}
canvas.getActiveObject().set('strokeWidth', parseInt($('#rect_stroke_width').val()))
canvas.renderAll()
recordState()
})
$('#rect_radius').bind('input propertychange', function () {
if ($('#rect_radius').val() == '') {
$('#rect_radius').val('0')
} else {
$('#rect_radius').val(parseInt($('#rect_radius').val()))
}
canvas.getActiveObject().set('rx', parseInt($('#rect_radius').val()))
canvas.getActiveObject().set('ry', parseInt($('#rect_radius').val()))
canvas.renderAll()
recordState()
})
$('#circle_color').bind('input propertychange', function () {
canvas.getActiveObject().set('fill', $('#circle_color').val())
canvas.renderAll()
recordState()
})
$('#circle_stroke').bind('input propertychange', function () {
canvas.getActiveObject().set('stroke', $('#circle_stroke').val())
canvas.renderAll()
recordState()
})
$('#circle_stroke_width').bind('input propertychange', function () {
if ($('#circle_stroke_width').val() == '') {
$('#circle_stroke_width').val('0')
} else {
$(this).val(parseInt($(this).val()))
}
canvas.getActiveObject().set('strokeWidth', parseInt($('#circle_stroke_width').val()))
canvas.renderAll()
recordState()
})
$('#counter_start').bind('input propertychange', function () {
canvas.getActiveObject().set('text', $('#counter_start').val())
let item = canvas.getActiveObject()
let idx = getIndex(item)
objs[idx - 1].start = $(this).val()
canvas.renderAll()
recordState()
})
$('#counter_add').bind('input propertychange', function () {
let item = canvas.getActiveObject()
let idx = getIndex(item)
objs[idx - 1].add = $(this).val()
canvas.renderAll()
recordState()
})
$('#counter_color').bind('input propertychange', function () {
canvas.getActiveObject().set('fill', $('#counter_color').val())
canvas.renderAll()
recordState()
})
$("#count_size").bind('input propertychange', function () {
let val = 1
if (parseFloat($("#count_size").val())) {
val = parseFloat($("#count_size").val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val%0.5!==0) {
val = Math.round(val*2)/2
}
}
$("#count_size").val(val)
canvas.getActiveObject().set("fontSize", val*dpi/72);
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
canvas.renderAll();
recordState();
})
$('#line_color').bind('input propertychange', function () {
canvas.getActiveObject().set('stroke', $('#line_color').val())
canvas.renderAll()
recordState()
})
$('#line_dist').bind('input propertychange', function () {
if ($('#line_dist').val() == '') {
$('#line_dist').val(0)
}
canvas.getActiveObject().set('strokeDashArray', [parseInt($('#line_dist').val()), parseInt($('#line_dist').val())])
canvas.renderAll()
recordState()
})
$('#text_text').bind('input propertychange', function () {
let val = $("#text_text").val().trim()
canvas.getActiveObject().set("text", ` ${val} `);
canvas.renderAll()
updateList()
recordState()
})
$('#barcode_val').bind('input propertychange', function () {
let item = canvas.getActiveObject()
let idx = getIndex(item)
objs[idx - 1].val = $(this).val()
JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
let barcode = document.getElementById('barcode')
let bar = barcode.toDataURL('image/png')
item.setSrc(bar, function (img) {
canvas.renderAll()
recordState()
})
})
$("#barcode_show").click(function () {
let item = canvas.getActiveObject();
let idx = getIndex(canvas.getActiveObject());
let val = $("#barcode_size").val()
if ($(this).prop("checked")) {
objs[idx - 1].show = true;
val = 0
} else {
objs[idx - 1].show = false;
}
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: val*dpi/72, font: objs[idx - 1].font });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
canvas.renderAll();
recordState();
});
});
$("#barcode_size").bind('input propertychange', function () {
let item = canvas.getActiveObject();
let idx = getIndex(item);
let val = 1
if (parseFloat($(this).val())) {
val = parseFloat($(this).val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val%0.5!==0) {
val = Math.round(val*2)/2
}
}
$("#barcode_size").val(val)
objs[idx - 1].fontSize = val*dpi/72;
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
canvas.renderAll();
recordState();
});
})
$('#count_font_family').on('change', function () {
canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
canvas.renderAll()
recordState()
})
$('#text_font_family').on('change', function () {
canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
canvas.renderAll()
recordState()
})
$('#circle_text_font_family').on('change', function () {
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
canvas.renderAll()
recordState();
});
$('#language_select').on('change', function () {
//语言选择
langua_ge($(this).find('option:selected').val())
s_lan = $(this).find('option:selected').val()
localStorage.setItem('lang', s_lan)
})
$('#barcode_font_family').on('change', function () {
let item = canvas.getActiveObject()
let idx = getIndex(item)
objs[idx - 1].font = $(this).find('option:selected').text()
JsBarcode('#barcode', objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font })
let barcode = document.getElementById('barcode')
let bar = barcode.toDataURL('image/png')
item.setSrc(bar, function (img) {
canvas.renderAll()
recordState()
})
//recordState();
})
$('#out_text_font_family').on('change', function () {
canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
canvas.renderAll()
recordState()
})
$('.obj_list').on('click', 'div', function () {
let idx = objs.length - 1 - $(this).index()
selectObj(idx)
})
$('#exceed').click(function () {
let idx = getIndex(canvas.getActiveObject())
if ($(this).prop('checked')) {
objs[idx - 1].exceed = true
} else {
objs[idx - 1].exceed = false
}
recordState()
})
$('#autoWrap').click(function () {
let idx = getIndex(canvas.getActiveObject())
if ($(this).prop('checked')) {
objs[idx - 1].autoWrap = true
} else {
objs[idx - 1].autoWrap = false
}
recordState()
})
$('#fixSize').click(function () {
let idx = getIndex(canvas.getActiveObject())
if ($(this).prop('checked')) {
objs[idx - 1].fixSize = true
} else {
objs[idx - 1].fixSize = false
}
recordState()
})
$('#delete').click(function () {
let actObjs = canvas.getActiveObjects()
let allObjs = canvas.getObjects()
let flag = 0
for (let item of actObjs) {
if (item != allObjs[0]) {
let i = getIndex(item) //0是背景，所以从1开始，但objs不包含背景图片，故要-1
objs.splice(i - 1, 1)
canvas.remove(item)
flag = 1
}
}
updateList()
canvas.discardActiveObject()
if (flag == 1) {
recordState()
canvas.renderAll()
}
// let actObjs = canvas.getActiveObjects();
// let allObjs = canvas.getObjects();
// let flag = 0;
// for( let item of actObjs){
// if ( item != allObjs[0]){
// let i = getIndex(item);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
// objs.splice(i-1,1);
// canvas.remove(item);
// flag = 1;
// updateList();
// }
// }
// selectObj(-1);
// if(flag == 1){
// recordState();
// }
})
//在关于我们获取版本号。
// 注意：function 前面加了 async 关键字
$("#about").click(async function () {
// 1. 先异步获取版本号
let version = "0.0.0"; // 默认值，防止获取失败
try {
if (window.sysAPI && window.sysAPI.getAppVersion) {
const v = await window.sysAPI.getAppVersion();
version = "v" + v; // 拼接一个 v，变成 v2.3.017
}
} catch (e) {
console.error("获取版本号失败", e);
}
// 2. 获取成功后再弹出窗口
layer.open({
type: 1
, title: language_str("about")
, area: '450px;'
, id: 'LAY_layuipro'
, moveType: 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>' +
// 【修改点】这里使用了刚才获取到的 version 变量
'<div style="font-size:14px;">' + language_str("vers") + ' ' + version + '</div>' +
'<div style="font-size:14px;">' + language_str("copyright") + '</div>' +
'</div>'
});
})
$("#help").click(() => {
ipcRenderer.send('open-help-file');
});
function handleObjectSelected() {
let select_obj = canvas.getActiveObject()
if (!select_obj) {
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#component_type').text(language_str('bg')) //comfirm
return
}
let i = getIndex(select_obj)
if (i != 0) {
//不是背景
//console.log(objs);
--i
switch (objs[i].type) {
case 1:
//console.log("图片");
$('#component_type').text(language_str('img')) //"图片"
selectObject(select_obj, i)
selectPic(select_obj, i)
break
case 2:
//console.log("预留图片");
$('#component_type').text(language_str('simg')) //"合成图片"
selectObject(select_obj, i)
selectOutPic(select_obj, i)
break
case 3:
$('#component_type').text(language_str('text')) //"文字"
//console.log("文字");
selectObject(select_obj, i)
selectText(select_obj, i)
break
case 4:
//console.log("标签");
$('#component_type').text(language_str('stext')) //"合成文字"
selectObject(select_obj, i)
selectOutText(select_obj, i)
break
case 5:
//console.log("矩形");
$('#component_type').text(language_str('rect')) //"矩形"
selectObject(select_obj, i)
selectRect(select_obj, i)
break
case 6:
//console.log("圆形");
$('#component_type').text(language_str('circ')) //"圆形"
selectObject(select_obj, i)
selectCircle(select_obj, i)
break
case 7:
//console.log("直线");
$('#component_type').text(language_str('line')) //"直线"
selectObject(select_obj, i)
selectLine(select_obj, i)
break
case 8:
//console.log("二维码");
$('#component_type').text(language_str('qrc')) //"二维码"
selectObject(select_obj, i)
selectQrCode(select_obj, i)
break
case 9:
//console.log("条形码");
$('#component_type').text(language_str('barc')) //"条形码"
selectObject(select_obj, i)
selectBarCode(select_obj, i)
break
case 10:
//console.log("计数器");
$('#component_type').text(language_str('counter')) //"计数器"
selectObject(select_obj, i)
selectCounter(select_obj, i)
break
case 11:
$("#component_type").text(language_str("ctext"));//"圆形文字"
//console.log("圆形文字");
selectObject(select_obj, i);
selectCircleText(select_obj, i);
break;
}
} else {
//背景，收起对象属性
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#component_type').text(language_str('bg'))
}
}
canvas1.on('mouse:move', (e) => {
let width = canvas.getWidth()
let height = canvas.getHeight()
$('#posText').text(
'X: ' + (e.pointer.x - (width / 2 - (width / 2 - background_image.left) * zoom)).toFixed(0) + ' Y: ' + (e.pointer.y - (height / 2 - (height / 2 - background_image.top) * zoom)).toFixed(0)
)
})
canvas1.on("object:moving", function (e) {
let obj = canvas1.getActiveObject()
let idx = getIndex(e.target, canvas1);
// 添加边界检查，避免访问 undefined
if (idx > 0 && idx <= objs1.length && objs1[idx - 1] && objs1[idx - 1].type && objs1[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
let pointer = {
x: obj.left,
y: obj.top
}
let distance = getDisdance(pointer.x, pointer.y, canvas1.width/2, canvas1.height/2)
let angleDeg = getDeg(pointer)
let flipped = pointer.y > canvas1.height/2 ? true : false
circle_text_diameter.setValue(distance*2-50);
obj.set("diameter", distance*2);
obj.set("angle", angleDeg);
obj.set("flipped", flipped);
}
updateControls();
});
// 监听键盘事件
// 复制选中对象
function copySelection() {
const activeObjects = canvas.getActiveObjects();
if (!activeObjects || activeObjects.length === 0) {
console.log("未选中任何对象");
layer.msg("未选中任何对象")
return;
}
// 存储原始对象用于克隆
clipboardData.objects = activeObjects;
console.log(activeObjects)
console.log(`已复制 ${activeObjects.length} 个对象`);
}
// 粘贴对象
function pasteFromClipboard() {
if (!clipboardData.objects || clipboardData.objects.length === 0) {
console.log("剪贴板为空");
layer.msg("剪贴板为空")
return;
}
// 克隆所有对象
fabric.util.enlivenObjects(
clipboardData.objects.map(obj => obj.toObject()),
clonedObjects => {
// 设置新位置（添加偏移）
clonedObjects.forEach((clone, index) => {
let idx = getIndex(clipboardData.objects[index])
console.log(clone)
clone.set({
left: clone.left + clipboardData.offset,
top: clone.top + clipboardData.offset,
evented: true
});
// 计算整体偏移
const groupOffset = clone.group;
if (groupOffset) {
clone.set({
left: groupOffset.left + clipboard.offset,
top: groupOffset.top + clipboard.offset
});
}
// 添加到画布
canvas.add(clone);
let tobj = {...objs[idx-1]}
if (tobj.name) tobj.name = tobj.name + objs.length
objs.push(tobj);
canvas.renderAll();
updateList();
recordState();
});
// 选中粘贴的对象
canvas.discardActiveObject();
const sel = new fabric.ActiveSelection(clonedObjects, {
canvas: canvas
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
selectObj(objs.length - 1);
// 增加下次偏移
clipboardData.offset += 10;
}
);
}
canvas1.on('object:scaling', function (event) {
//if(objs[getIndex(event.target) - 1].type == 5 || objs[getIndex(event.target) - 1].type == 6){
// //canvas.getActiveObject().set("width", canvas.getActiveObject().get("width") * canvas.getActiveObject().get("scaleX"));
// //canvas.getActiveObject().set("height", canvas.getActiveObject().get("height") * canvas.getActiveObject().get("scaleY"));
// //canvas.getActiveObject().set("scaleX", 1);
// //canvas.getActiveObject().set("scaleY", 1);
// //console.log(canvas.getActiveObject().get("scaleX"));
// //canvas1.discardActiveObject();
// //canvas1.setActiveObject(event.target);
// //canvas1.renderAll();
// //updateControls();
//}
})
canvas1.on('object:rotating', function (e) {
updateControls()
})
canvas1.on('object:rotated', function (e) {
console.log('object:rotated')
recordState()
})
canvas1.on('object:added', function (e) {
//console.log("object:added");
//recordState();
////console.log(objs);
})
canvas1.on('mouse:down', (e) => {
//单选
let select_obj = canvas.getActiveObject()
console.log(select_obj)
let i = getIndex(select_obj)
if (i != 0) {
//不是背景
//console.log(objs);
--i
switch (objs[i].type) {
case 1:
//console.log("图片");
$('#component_type').text(language_str('img')) //"图片"
selectObject(select_obj, i)
selectPic(select_obj, i)
break
case 2:
//console.log("预留图片");
$('#component_type').text(language_str('simg')) //"合成图片"
selectObject(select_obj, i)
selectOutPic(select_obj, i)
break
case 3:
$('#component_type').text(language_str('text')) //"文字"
//console.log("文字");
selectObject(select_obj, i)
selectText(select_obj, i)
break
case 4:
//console.log("标签");
$('#component_type').text(language_str('stext')) //"合成文字"
selectObject(select_obj, i)
selectOutText(select_obj, i)
break
case 5:
//console.log("矩形");
$('#component_type').text(language_str('rect')) //"矩形"
selectObject(select_obj, i)
selectRect(select_obj, i)
break
case 6:
//console.log("圆形");
$('#component_type').text(language_str('circ')) //"圆形"
selectObject(select_obj, i)
selectCircle(select_obj, i)
break
case 7:
//console.log("直线");
$('#component_type').text(language_str('line')) //"直线"
selectObject(select_obj, i)
selectLine(select_obj, i)
break
case 8:
//console.log("二维码");
$('#component_type').text(language_str('qrc')) //"二维码"
selectObject(select_obj, i)
selectQrCode(select_obj, i)
break
case 9:
//console.log("条形码");
$('#component_type').text(language_str('barc')) //"条形码"
selectObject(select_obj, i)
selectBarCode(select_obj, i)
break
case 10:
//console.log("计数器");
$('#component_type').text(language_str('counter')) //"计数器"
selectObject(select_obj, i)
selectCounter(select_obj, i)
break
case 11:
$("#component_type").text(language_str("ctext"));//"圆形文字"
//console.log("圆形文字");
selectObject(select_obj, i);
selectCircleText(select_obj, i);
break;
}
selectObj(i, true) //如果是点击画布中，则相应列表
} else {
//背景，收起对象属性
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#counter_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
selectObj(-1)
$('#component_type').text(language_str('bg'))
}
})
canvas1.on('text:editing:entered', function () {
_textEdit = true
})
canvas1.on('text:editing:exited', function () {
_textEdit = false
})
canvas1.on('object:modified', function (event) {
if (canvas1.getActiveObjects().length > 1) {
return
}
if (objs[getIndex(event.target) - 1].type == 3) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
event.target.scaleX = 1
event.target.scaleY = 1
event.target._clearCache()
// $('#text_size').val(event.target.fontSize)
canvas1.renderAll()
updateControls()
} else if (objs[getIndex(event.target) - 1].type == 4) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
event.target.scaleX = 1
event.target.scaleY = 1
event.target._clearCache()
// $('#out_text_size').val(event.target.fontSize)
canvas1.renderAll()
} else if (objs[getIndex(event.target) - 1].type == 10) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
event.target.scaleX = 1
event.target.scaleY = 1
event.target._clearCache()
// $('#count_size').val(event.target.fontSize)
canvas1.renderAll()
} else if (objs[getIndex(event.target) - 1].type == 5) {
canvas1.getActiveObject().set('width', canvas1.getActiveObject().get('width') * canvas1.getActiveObject().get('scaleX'))
canvas1.getActiveObject().set('height', canvas1.getActiveObject().get('height') * canvas1.getActiveObject().get('scaleY'))
canvas1.getActiveObject().set('scaleX', 1)
canvas1.getActiveObject().set('scaleY', 1)
updateControls()
}
recordState()
})
canvas1.on('mouse:up', (e) => {
//HERE
switch (addState) {
case 1:
addPic(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addPic').css('background-color', '')
break
case 2:
addOutPic(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addOutPic').css('background-color', '')
break
case 3:
addText(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addText').css('background-color', '')
break
case 4:
addOutText(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addOutText').css('background-color', '')
break
case 5:
addRect(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addRect').css('background-color', '')
break
case 6:
addCircle(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addCircle').css('background-color', '')
break
case 7:
addLine(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addLine').css('background-color', '')
break
case 8:
addQrCode(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addQrCode').css('background-color', '')
break
case 9:
addBarCode(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas1.renderAll()
$('#addBarCode').css('background-color', '')
break
case 10:
addCounter(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
$('#addCounter').css('background-color', '')
break
case 11:
addCircleText(e.pointer);
addState = 0;
background_image.hoverCursor = "default";
canvas1.renderAll();
$("#addCircleText").css("background-color", "");
break;
}
})
canvas1.on('text:changed', (e) => {
$('#text_text').val(e.target.get('text'))
})
canvas1.on('after:render', function () {
if (is_bgi_add) {
var image = document.getElementById('source_front')
ctx1.drawImage(image, (canvas.width - $('#source_front').width()) / 2, (canvas.height - $('#source_front').height()) / 2, $('#source_front').width(), $('#source_front').height())
/*
实际905 * 534
1052 *
*/
}
})
canvas2.on('text:editing:entered', function () {
_textEdit = true
})
canvas2.on('text:editing:exited', function () {
_textEdit = false
})
canvas2.on('after:render', function () {
if (is_bgi_add) {
var image = document.getElementById('source_back')
ctx2.drawImage(image, (canvas.width - $('#source_back').width()) / 2, (canvas1.height - $('#source_back').height()) / 2, $('#source_back').width(), $('#source_back').height())
}
})
canvas2.on('mouse:move', (e) => {
$('#posText').text('X: ' + (e.pointer.x - background_image.left).toFixed(0) + ' Y: ' + (e.pointer.y - background_image.top).toFixed(0))
})
canvas2.on("object:moving", function (e) {
let obj = canvas2.getActiveObject()
let idx = getIndex(e.target, canvas2);
// 添加边界检查，避免访问 undefined
if (idx > 0 && idx <= objs2.length && objs2[idx - 1] && objs2[idx - 1].type && objs2[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
let pointer = {
x: obj.left,
y: obj.top
}
let distance = getDisdance(pointer.x, pointer.y, canvas2.width/2, canvas2.height/2)
// 计算角度时需要使用 canvas2
let centerX = canvas2.width / 2;
let centerY = canvas2.height / 2;
let mouseX = pointer.x;
let mouseY = pointer.y;
let dx = mouseX - centerX;
let dy = mouseY - centerY;
let angleRad = Math.atan2(dy, dx);
let angleDeg = angleRad * (180/Math.PI);
if (angleDeg < 0) {
angleDeg += 360;
}
angleDeg += 90;
let flipped = pointer.y > canvas2.height/2 ? true : false
circle_text_diameter.setValue(distance*2-50);
obj.set("diameter", distance*2);
obj.set("angle", angleDeg);
obj.set("flipped", flipped);
}
updateControls();
});
canvas2.on('object:scaling', function (e) {
updateControls()
})
canvas2.on('object:rotating', function (e) {
updateControls()
})
canvas2.on('object:rotated', function (e) {
console.log('object:rotated')
recordState()
})
canvas2.on('object:added', function (e) {
//console.log("object:added");
//recordState();
////console.log(objs);
})
canvas2.on('mouse:down', (e) => {
//单选
let select_obj = canvas.getActiveObject()
let i = getIndex(select_obj)
if (i != 0) {
//不是背景
//console.log(objs);
--i
switch (objs[i].type) {
case 1:
//console.log("图片");
$('#component_type').text(language_str('img')) //"图片"
selectObject(select_obj, i)
selectPic(select_obj, i)
break
case 2:
//console.log("预留图片");
$('#component_type').text(language_str('simg')) //"合成图片"
selectObject(select_obj, i)
selectOutPic(select_obj, i)
break
case 3:
$('#component_type').text(language_str('text')) //"文字"
//console.log("文字");
selectObject(select_obj, i)
selectText(select_obj, i)
break
case 4:
//console.log("标签");
$('#component_type').text(language_str('stext')) //"合成文字"
selectObject(select_obj, i)
selectOutText(select_obj, i)
break
case 5:
//console.log("矩形");
$('#component_type').text(language_str('rect')) //"矩形"
selectObject(select_obj, i)
selectRect(select_obj, i)
break
case 6:
//console.log("圆形");
$('#component_type').text(language_str('circ')) //"圆形"
selectObject(select_obj, i)
selectCircle(select_obj, i)
break
case 7:
//console.log("直线");
$('#component_type').text(language_str('line')) //"直线"
selectObject(select_obj, i)
selectLine(select_obj, i)
break
case 8:
//console.log("二维码");
$('#component_type').text(language_str('qrc')) //"二维码"
selectObject(select_obj, i)
selectQrCode(select_obj, i)
break
case 9:
//console.log("条形码");
$('#component_type').text(language_str('barc')) //"条形码"
selectObject(select_obj, i)
selectBarCode(select_obj, i)
break
case 10:
//console.log("计数器");
$('#component_type').text(language_str('counter')) //"计数器"
selectObject(select_obj, i)
selectCounter(select_obj, i)
break
case 11:
$("#component_type").text(language_str("ctext"));//"圆形文字"
//console.log("圆形文字");
selectObject(select_obj, i);
selectCircleText(select_obj, i);
break;
}
selectObj(i, true) //如果是点击画布中，则相应列表
} else {
//背景，收起对象属性
$('#base_control').hide()
$('#line_control').hide()
$('#pic_control').hide()
$('#out_pic_control').hide()
$('#text_control').hide()
$("#circle_text_control").hide();
$('#out_text_control').hide()
$('#rect_control').hide()
$('#circle_control').hide()
$('#qrcode_Controll').hide()
$('#barcode_controll').hide()
$('#counter_control').hide()
selectObj(-1)
$('#component_type').text(language_str('bg'))
}
})
canvas2.on('object:modified', function (event) {
if (canvas.getActiveObjects().length > 1) {
return
}
if (objs[getIndex(event.target) - 1].type == 3) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
event.target.scaleX = 1
event.target.scaleY = 1
event.target._clearCache()
// $('#text_size').val(event.target.fontSize)
canvas2.renderAll()
} else if (objs[getIndex(event.target) - 1].type == 4) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
event.target.scaleX = 1
event.target.scaleY = 1
event.target._clearCache()
// $('#out_text_size').val(event.target.fontSize)
canvas2.renderAll()
} else if (objs[getIndex(event.target) - 1].type == 10) {
event.target.fontSize *= event.target.scaleX
event.target.fontSize = event.target.fontSize.toFixed(0)
event.target.scaleX = 1
event.target.scaleY = 1
event.target._clearCache()
// $('#count_size').val(event.target.fontSize)
canvas2.renderAll()
} else if (objs[getIndex(event.target) - 1].type == 5) {
canvas2.getActiveObject().set('width', canvas2.getActiveObject().get('width') * canvas2.getActiveObject().get('scaleX'))
canvas2.getActiveObject().set('height', canvas2.getActiveObject().get('height') * canvas2.getActiveObject().get('scaleY'))
canvas2.getActiveObject().set('scaleX', 1)
canvas2.getActiveObject().set('scaleY', 1)
updateControls()
}
console.log('object:modified')
recordState()
})
canvas2.on('mouse:up', (e) => {
//HERE
switch (addState) {
case 1:
addPic(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addPic').css('background-color', '')
break
case 2:
addOutPic(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addOutPic').css('background-color', '')
break
case 3:
addText(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addText').css('background-color', '')
break
case 4:
addOutText(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addOutText').css('background-color', '')
break
case 5:
addRect(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addRect').css('background-color', '')
break
case 6:
addCircle(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addCircle').css('background-color', '')
break
case 7:
addLine(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addLine').css('background-color', '')
break
case 8:
addQrCode(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addQrCode').css('background-color', '')
break
case 9:
addBarCode(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addBarCode').css('background-color', '')
break
case 10:
addCounter(e.pointer)
addState = 0
background_image.hoverCursor = 'default'
canvas2.renderAll()
$('#addCounter').css('background-color', '')
break
case 11:
addCircleText(e.pointer);
addState = 0;
background_image.hoverCursor = "default";
canvas2.renderAll();
$("#addCircleText").css("background-color", "");
break;
}
})
var circle_text_size = slider.render({
elem: '#circle_text_size',
min: 10,
max: 120
, change: function (value) {
canvas.getActiveObject().set("fontSize", value);
canvas.renderAll();
}
});
var circle_text_diameter = slider.render({
elem: '#circle_text_diameter',
min: 50,
max: 1100
, change: function (value) {
canvas.getActiveObject().set("diameter", value);
canvas.renderAll();
}
});
var out_pic_op = slider.render({
elem: '#out_pic_op',
change: function (value) {
console.log(value)
console.log(canvas.getActiveObject())
canvas.getActiveObject().set('opacity', (100 - value) / 100)
canvas.renderAll()
}
})
var pic_op = slider.render({
elem: '#pic_op',
change: function (value) {
console.log(value)
console.log(canvas.getActiveObject())
canvas.getActiveObject().set('opacity', (100 - value) / 100)
canvas.renderAll()
}
})
var rect_op = slider.render({
elem: '#rect_op',
change: function (value) {
console.log(value)
console.log(canvas.getActiveObject())
canvas.getActiveObject().set('opacity', (100 - value) / 100)
canvas.renderAll()
}
})
var circle_op = slider.render({
elem: '#circle_op',
change: function (value) {
console.log(value)
console.log(canvas.getActiveObject())
canvas.getActiveObject().set('opacity', (100 - value) / 100)
canvas.renderAll()
}
})
// 标尺绘制函数
function initRulers() {
const dpi = 300;
const mmToPx = dpi / 25.4; // 1mm = 11.811px (300 DPI)
const rulerHeight = 20;
const rulerWidth = 20;
// 获取实际画布的像素尺寸（px）
// design2.html 的实际画布尺寸是 1012px x 648px
const actualCanvasWidth = canvas1.width || 1012; // 实际画布宽度（px）
const actualCanvasHeight = canvas1.height || 648; // 实际画布高度（px）
// 获取显示区域的尺寸（包括 margin）
const canvasDiv = $('#canvas-div');
const canvasWrapper = $('.canvas-wrapper');
// 使用 canvas-wrapper 的宽度，如果没有则使用 canvas_div 的宽度
let canvasWidth = canvasWrapper.width();
let canvasHeight = canvasWrapper.height();
if (!canvasWidth || canvasWidth === 0) {
const canvas1Width = $('#canvas1').width() || canvasDiv.width() - 20;
canvasWidth = canvas1Width + 20; // 加上 margin-left: 20px
}
if (!canvasHeight || canvasHeight === 0) {
const canvas1Height = $('#canvas1').height() || canvasDiv.height() - 20;
canvasHeight = canvas1Height + 20; // 加上 margin-top: 20px
}
// 设置标尺尺寸（使用显示区域的尺寸）
$('#ruler-h').attr('width', canvasWidth).attr('height', rulerHeight);
$('#ruler-v').attr('width', rulerWidth).attr('height', canvasHeight);
$('.ruler-horizontal').css('width', canvasWidth + 'px');
$('.ruler-vertical').css('height', canvasHeight + 'px');
// 绘制水平标尺
function drawHorizontalRuler() {
const ctx = document.getElementById('ruler-h').getContext('2d');
ctx.clearRect(0, 0, canvasWidth, rulerHeight);
// 背景
ctx.fillStyle = '#2C2C2C';
ctx.fillRect(0, 0, canvasWidth, rulerHeight);
// 边框
ctx.strokeStyle = '#1E1E1E';
ctx.lineWidth = 1;
ctx.strokeRect(0, 0, canvasWidth, rulerHeight);
ctx.beginPath();
ctx.moveTo(0, rulerHeight - 1);
ctx.lineTo(canvasWidth, rulerHeight - 1);
ctx.stroke();
// 刻度线
ctx.strokeStyle = '#888888';
ctx.fillStyle = '#CCCCCC';
ctx.font = '10px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
// 计算：实际画布尺寸（px）对应的物理尺寸（mm），然后根据显示区域的缩放比例计算
// 实际画布物理宽度 = actualCanvasWidth / dpi * 25.4 (mm)
// 显示区域宽度 = actualCanvasWidth * zoom (px)
// 所以：1mm 在显示区域中 = (actualCanvasWidth * zoom) / (actualCanvasWidth / dpi * 25.4) = zoom * dpi / 25.4
const pxPerMm = zoom * mmToPx; // 在显示区域中，1mm对应的像素数
const startX = 0;
const endX = canvasWidth;
// 绘制主要刻度（每10mm）
for (let mm = 0; mm * pxPerMm <= endX; mm += 10) {
const x = startX + mm * pxPerMm;
if (x > endX) break;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, rulerHeight);
ctx.stroke();
// 数字
ctx.fillText(mm + 'mm', x + 2, 2);
}
// 绘制次要刻度（每1mm）
for (let mm = 0; mm * pxPerMm <= endX; mm += 1) {
const x = startX + mm * pxPerMm;
if (x > endX) break;
if (mm % 10 === 0) continue; // 跳过主要刻度
ctx.beginPath();
ctx.moveTo(x, rulerHeight - 8);
ctx.lineTo(x, rulerHeight);
ctx.stroke();
}
}
// 绘制垂直标尺
function drawVerticalRuler() {
const ctx = document.getElementById('ruler-v').getContext('2d');
ctx.clearRect(0, 0, rulerWidth, canvasHeight);
// 背景
ctx.fillStyle = '#2C2C2C';
ctx.fillRect(0, 0, rulerWidth, canvasHeight);
// 边框
ctx.strokeStyle = '#1E1E1E';
ctx.lineWidth = 1;
ctx.strokeRect(0, 0, rulerWidth, canvasHeight);
ctx.beginPath();
ctx.moveTo(rulerWidth - 1, 0);
ctx.lineTo(rulerWidth - 1, canvasHeight);
ctx.stroke();
// 刻度线
ctx.strokeStyle = '#888888';
ctx.fillStyle = '#CCCCCC';
ctx.font = '10px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
// 计算：实际画布尺寸（px）对应的物理尺寸（mm），然后根据显示区域的缩放比例计算
const pxPerMm = zoom * mmToPx; // 在显示区域中，1mm对应的像素数
const startY = 0;
const endY = canvasHeight;
// 绘制主要刻度（每10mm）
for (let mm = 0; mm * pxPerMm <= endY; mm += 10) {
const y = startY + mm * pxPerMm;
if (y > endY) break;
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(rulerWidth, y);
ctx.stroke();
// 数字（旋转90度）
ctx.save();
ctx.translate(2, y + 8);
ctx.rotate(-Math.PI / 2);
ctx.fillText(mm + 'mm', 0, 0);
ctx.restore();
}
// 绘制次要刻度（每1mm）
for (let mm = 0; mm * pxPerMm <= endY; mm += 1) {
const y = startY + mm * pxPerMm;
if (y > endY) break;
if (mm % 10 === 0) continue; // 跳过主要刻度
ctx.beginPath();
ctx.moveTo(rulerWidth - 8, y);
ctx.lineTo(rulerWidth, y);
ctx.stroke();
}
}
// 初始绘制
drawHorizontalRuler();
drawVerticalRuler();
// 监听窗口大小变化
$(window).on('resize', function() {
setTimeout(function() {
const canvasWrapper = $('.canvas-wrapper');
let newWidth = canvasWrapper.width();
let newHeight = canvasWrapper.height();
if (!newWidth || newWidth === 0) {
const canvas1Width = $('#canvas1').width() || $('#canvas-div').width() - 20;
newWidth = canvas1Width + 20; // 加上 margin-left: 20px
}
if (!newHeight || newHeight === 0) {
const canvas1Height = $('#canvas1').height() || $('#canvas-div').height() - 20;
newHeight = canvas1Height + 20; // 加上 margin-top: 20px
}
if (newWidth !== canvasWidth || newHeight !== canvasHeight) {
canvasWidth = newWidth;
canvasHeight = newHeight;
$('#ruler-h').attr('width', newWidth);
$('#ruler-v').attr('height', newHeight);
$('.ruler-horizontal').css('width', newWidth + 'px');
$('.ruler-vertical').css('height', newHeight + 'px');
drawHorizontalRuler();
drawVerticalRuler();
}
}, 100);
});
// 监听画布缩放变化
canvas1.on('after:render', function() {
drawHorizontalRuler();
drawVerticalRuler();
});
canvas2.on('after:render', function() {
drawHorizontalRuler();
drawVerticalRuler();
});
}
})
Reference in New Issue View Git Blame Copy Permalink