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: 0,
                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 = 600
        // // 内部剪贴板
        // let clipboardData = {
        //     objects: null,
        //     offset: 10  // 粘贴位置偏移量
        // };

        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 = 1;
            $(function () {
                // 定义CurvedText类


                $("#object_attribute").css("height", "470px");
                $("#obj_list").css("height", document.body.clientHeight - 520);
                $(".obj_list").css("height", $("#obj_list").height() - 32);

                $(".main").show();
                $(".canvas_box").css("height", document.body.clientHeight - 100);
                zoom = $(".canvas_bg_img").width() / 2787
                $("#canvas1").attr("width", $(".canvas_box").width() / zoom);
                $("#canvas1").attr("height", $(".canvas_box").height() / zoom);
                $("#canvas2").attr("width", $(".canvas_box").width() / zoom);
                $("#canvas2").attr("height", $(".canvas_box").height() / zoom);
                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(0, 0), 1);
                canvas2.zoomToPoint(new fabric.Point(0, 0), 1);
                
                // 初始化标尺
                initRulers();
                
                $("#source_front").width(zoom * $("#source_front").width());
                $("#source_back").width(zoom * $("#source_back").width());
                $(".canvas-container:eq(0)").css('transform', 'scale(' + zoom + ')')
                $(".canvas-container:eq(1)").css('transform', 'scale(' + zoom + ')')
                $(".canvas-container:eq(0)").css('width', 0)

                $(".canvas-container:eq(1)").hide();
                var canvas = canvas1;
                fabric.Object.prototype.set({
                    borderColor: "#9013FE",
                    cornerColor: "#9013FE", //激活状态角落图标的填充颜色
                    cornerStrokeColor: "#9013FE", //激活状态角落图标的边框颜色
                    borderOpacityWhenMoving: 1,
                    borderScaleFactor: 6,
                    cornerSize: 24,
                    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: 2787,
                            width: 2787,
                            top: top,
                            left: left
                        });
                        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: 2787,
                            width: 2787,
                            top: top,
                            left: left
                        });
                        let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
                        if (openAs.name != "") {
                            //打开的文件
                            let fs = require('fs')
                            o.soonType = 1
                            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 = 1
                            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) {
                        console.log(val, zoomSlider)
                        canvas.zoomToPoint(
                            new fabric.Point(0, 0),
                            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 + '_1.png', function (i1) {
                        i1.left = background_image.left;
                        i1.top = background_image.top;
                        let img1 = i1;

                        fabric.Image.fromURL('./public/images/back_bg_1.png', function (i2) {
                            i2.left = background_image.left;
                            i2.top = background_image.top;
                            let img2 = i2;
                            fabric.Image.fromURL('./public/images/op_1.png', function (i3) {
                                i2.left = background_image.left;
                                i2.top = background_image.top;
                                let img3 = i3;
                                display_func(img1, img2, img3);
                            })
                        })
                    })
                });
                // 导出文件
                async function saveImageAsPNG(buffer) {
                    let fs = require('fs');
                    // 弹出保存对话框
                    const { canceled, filePath } = await dialog.showSaveDialog({
                        title: '保存图片',
                        defaultPath: path.join(exePath, 'output.png'), // 默认路径
                        filters: [{ name: 'PNG Images', extensions: ['png'] }] // 文件过滤器
                    });

                    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();
                    $("#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;//预览图顶裁剪
                    let list1 = [..._objs1]
                    for (let item of list1) {
                        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()));
                            }
                            g1.push(fabric.util.object.clone(item));
                            continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
                        } else if (idx == 0) {
                            g1.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: 2787,
                        width: 2787,
                        top: all_top,
                        left: all_left
                    });

                    g3.push(img1);
                    let url3 = new fabric.Group(g3).toDataURL({
                        height: 2787,
                        width: 2787,
                        top: all_top,
                        left: all_left
                    });
                    let url5 = new fabric.Group(g5).toDataURL({
                        height: 2787,
                        width: 2787,
                        top: black_top,
                        left: black_left
                    });
                    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()));
                            }
                            g2.push(fabric.util.object.clone(item));
                            continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
                        } else if (idx == 0) {
                            g2.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: 2787,
                        width: 2787,
                        top: top,
                        left: left
                    });
                    let white_url1 = canvas1.getObjects()[0].toDataURL({
                        height: 2787,
                        width: 2787,
                    });
                    g4.push(img2);
                    let url4 = new fabric.Group(g4).toDataURL({
                        height: 2787,
                        width: 2787,
                        top: all_top,
                        left: all_left
                    });
                    let url6 = new fabric.Group(g6).toDataURL({
                        height: 2787,
                        width: 2787,
                        top: black_top,
                        left: black_left
                    });

                    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 buffer = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64');
                    const printPath = path.join(exePath, 'print.png');
                    fs.writeFileSync(printPath, buffer);

                    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="display: flex;justify-content: center;height: 100%;width: 100%;">
        <div class="rotate-div" id="displayImg1" angle="0">
            <img src="${printPath}" style="max-width:100%;max-height:100%;"/>
            <div class="rotate-wrap" onclick="window.rotate('displayImg1')">
                <img src="./public/images/rotate.png" style="height: 64px;width: 64px"/>
            </div>
        </div>
    </div>
</div>`,
                        btn: [language_str("output"), "打印"],//'导出'
                        btn1: function (index, layero) {
                            saveImageAsPNG(buffer)
 
                            printJS({ printable: printPath, type: 'image', style: 'img { width: 100%; height: auto; }' })
                        }
                    });
                }
                function output(callback = null, _save = save) {
                    // 类型改变
                    fabric.Image.fromURL('./public/images/op_1.png', function (i1) {
                        i1.left = background_image.left;
                        i1.top = background_image.top;
                        let img1 = i1;
                        fabric.Image.fromURL('./public/images/op_1.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();
                            $("#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);

                                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 //勾选并入黑色图层

                                    )
                                ) {
                                    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()));
                                    }
                                    g1.push(fabric.util.object.clone(item));
                                    continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
                                } else if (idx == 0) {
                                    g1.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: 2787,
                                width: 2787,
                                top: all_top,
                                left: all_left
                            });
                            g3.push(img1);
                            let url3 = new fabric.Group(g3).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: all_top,
                                left: all_left
                            });
                            let url5 = new fabric.Group(g5).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: black_top,
                                left: black_left
                            });
                            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()));
                                    }
                                    g2.push(fabric.util.object.clone(item));
                                    continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
                                } else if (idx == 0) {
                                    g2.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: 2787,
                                width: 2787,
                                top: top,
                                left: left
                            });
                            let white_url1 = canvas1.getObjects()[0].toDataURL({
                                height: 2787,
                                width: 2787,
                            });
                            g4.push(img2);
                            let url4 = new fabric.Group(g4).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: all_top,
                                left: all_left
                            });
                            let url6 = new fabric.Group(g6).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: black_top,
                                left: black_left
                            });
                            // let white_url2 = canvas2.getObjects()[0].toDataURL({
                            //     height: 2787,
                            //     width: 2787,
                            // });
                            //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: '' };
                            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 = '';
                            //op.frontBlPic = url5;
                            //op.backBlPic = url6;
                            op.frontBlackPic = '';
                            op.backBlackPic = '';
                            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) {
                              
                                } else if (type == 11) {

                                    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
                                    });
                                } 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) {
                              
                                } else if (type == 11) {
                              
                                    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" : objs2[idx - 1].circleCenter
                                    });
                                } 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_1.png', function (i1) {
                        i1.left = background_image.left;
                        i1.top = background_image.top;
                        let img1 = i1;
                        fabric.Image.fromURL('./public/images/op_1.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();
                            $("#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);


                                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()));
                                    }
                                    g1.push(fabric.util.object.clone(item));
                                    continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
                                } else if (idx == 0) {
                                    g1.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: 2787,
                                width: 2787,
                                top: all_top,
                                left: all_left
                            });
                            g3.push(img1);
                            let url3 = new fabric.Group(g3).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: all_top,
                                left: all_left
                            });
                            let url5 = new fabric.Group(g5).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: black_top,
                                left: black_left
                            });
                            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()));
                                    }
                                    g2.push(fabric.util.object.clone(item));
                                    continue;//黑色文字 黑色矩形 黑色线条 黑色圆形
                                } else if (idx == 0) {
                                    g2.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: 2787,
                                width: 2787,
                                top: top,
                                left: left
                            });
                            let white_url1 = canvas1.getObjects()[0].toDataURL({
                                height: 2787,
                                width: 2787,
                            });
                            g4.push(img2);
                            let url4 = new fabric.Group(g4).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: all_top,
                                left: all_left
                            });
                            let url6 = new fabric.Group(g6).toDataURL({
                                height: 2787,
                                width: 2787,
                                top: black_top,
                                left: black_left
                            });
                            // let white_url2 = canvas2.getObjects()[0].toDataURL({
                            //     height: 2787,
                            //     width: 2787,
                            // });
                            //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: '' };
                            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 = '';
                            //op.frontBlPic = url5;
                            //op.backBlPic = url6;
                            op.frontBlackPic = '';
                            op.backBlackPic = '';
                            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
                                    /*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))
                                        });
                                    }
                                    */
                                    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
                                    });
                                } 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
                                    /*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))
                                        });
                                    }
                                    */
                                    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" : objs2[idx - 1].circleCenter
                                    });
                                } 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 = 1
                                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 (Windows) 或 CMD + SHIFT + Backspace (Mac) - 清空
                        if (isModifierKey && event.shiftKey && (event.keyCode == 46 || event.keyCode == 8)) {
                            event.preventDefault();
                            $("#clean").click();
                            return;
                        }

                        // CTRL/CMD + DEL (Windows) 或 CMD + Backspace (Mac)  - 删除
                        if (isModifierKey && !event.shiftKey && (event.keyCode == 46 || event.keyCode == 8)) { 
                            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 + "_1.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();
                    $("#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();
                    $("#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();
                    console.log(obj, obj.get("selectable"))
                    let idx = getIndex(obj);
                    const scaleX = 2787 / obj.width
                    const scaleY = 2787 / obj.height
                    obj.set({
                        scaleX: scaleX,
                        scaleY: scaleY,
                        left: ($('#canvas1').width() - 2787) / 2,
                        top: ($('#canvas1').height() - 2787) / 2,
                    });
                    $('#text_w').val(2787)
                    $('#text_h').val(2787)
                    $('#text_x').val(0)
                    $('#text_y').val(0)
                    if (obj.get("selectable")) {
                        obj.set("selectable", false);
                        $("#lock_img").attr("src", "public/images/lock20.png")
                    }
                    canvas.sendToBack(obj);
                    canvas.bringForward(obj);
                    canvas.renderAll();
                    let objItem = objs.splice(idx - 1, 1)[0]
                    objs.unshift(objItem)
                    recordState();
                    updateList();
                    selectObj(0);
                });

                // ==========================================
                // 【新增】状态恢复后的回调函数
                // 作用：确保图片加载完毕后，再刷新界面，防止白屏或对象丢失
                // ==========================================
                function onStateRestored() {
                    // 1. 重新获取背景图引用 (因为旧对象被销毁了)
                    // 注意：canvas 是全局变量，指向当前激活的画板
                    if (canvas.getObjects().length > 0) {
                        background_image = canvas.getObjects()[0];
                        background_image.selectable = false; // 确保背景不可选
                        background_image.evented = false;
                    }

                    // 2. 渲染画布
                    canvas.requestRenderAll();

                    // 3. 取消选中状态
                    selectObj(-1);

                    // 4. 隐藏所有属性面板
                    $("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
                    
                    // 5. 刷新左侧列表
                    updateList();
                }
                // ==========================================
                // 撤销操作 (修复版)
                // ==========================================
                $("#previous").click(function () {
                    if (step.val == 0) return;

                    step.val--;
                    
                    // 判断当前是正面还是背面
                    if ($("#front_side").hasClass("ui-button-active")) {
                        // 1. 恢复业务数据
                        objs1 = JSON.parse(recordObjs1[step.val]);
                        objs = objs1;
                        
                        // 2. 恢复画布 (使用回调函数！)
                        canvas.loadFromJSON(recordJson1[step.val], function() {
                            onStateRestored(); // 图片加载完才执行这一步
                        });
                    } else {
                        // 背面逻辑
                        objs2 = JSON.parse(recordObjs2[step.val]);
                        objs = objs2;
                        
                        canvas.loadFromJSON(recordJson2[step.val], function() {
                            onStateRestored();
                        });
                    }
                });
                // ==========================================
                // 重做操作 (修复版)
                // ==========================================
                $("#next").click(function () {
                    // 获取当前历史记录的最大长度
                    let maxLen = $("#front_side").hasClass("ui-button-active") ? recordObjs1.length : recordObjs2.length;
                    
                    if (step.val >= maxLen - 1) return;

                    step.val++;
                    
                    if ($("#front_side").hasClass("ui-button-active")) {
                        objs1 = JSON.parse(recordObjs1[step.val]);
                        objs = objs1;
                        
                        canvas.loadFromJSON(recordJson1[step.val], function() {
                            onStateRestored(); // 图片加载完才执行这一步
                        });
                    } else {
                        objs2 = JSON.parse(recordObjs2[step.val]);
                        objs = objs2;
                        
                        canvas.loadFromJSON(recordJson2[step.val], function() {
                            onStateRestored();
                        });
                    }
                });

                $("#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();
                });
                $('#vertical_obj').click(function () {
                    let obj = canvas.getActiveObject();
                    obj.set("flipY", !obj.get("flipY"));
                    canvas.renderAll();
                    updateControls();
                    recordState();
                });
                $('#align_obj').click(function () {
                    let obj = canvas.getActiveObject();
                    obj.set("flipX", !obj.get("flipX"));
                    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();
                });
                $("#circle_text_back_transparent").click(function () {
                    canvas.getActiveObject().set("textBackgroundColor", "");
                    $("#circle_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: 2787,
                        width: 2787,
                        top: top,
                        left: left
                    });
                    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: 2787,
                        width: 2787,
                        top: top,
                        left: left
                    });
                    let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, 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 = 1
                        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: 2787,
                        width: 2787,
                        top: top,
                        left: left
                    });
                    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: 2787,
                        width: 2787,
                        top: top,
                        left: left
                    });
                    let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
                    let con_o = Object.assign(o, op1);
                    if (openAs.name != "") {
                        //打开的文件
                        let fs = require('fs')
                        con_o.soonType = 1
                        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 = 1
                        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()
                    })
                }
 
                // ===========================================================
                // 1. 剪贴板数据定义 (修改：改为存储数据 data，而不是对象引用)
                // ===========================================================
                let clipboardData = {
                    data: null, // 存储序列化后的 JSON 数据 + 业务属性
                    offset: 10  // 粘贴位置偏移量
                };

                // ===========================================================
                // 2. 复制函数：深度拷贝当前选中对象的数据
                // ===========================================================
                function copySelection() {
                    const activeObjects = canvas.getActiveObjects();
                    
                    if (!activeObjects || activeObjects.length === 0) {
                        layer.msg(language_str("selectPic") || "请先选择对象"); 
                        return;
                    }

                    // 【核心修复】
                    // 遍历选中的对象，同时保存它的 Fabric 画面数据 和 我们的 objs 业务数据
                    clipboardData.data = activeObjects.map(obj => {
                        let idx = getIndex(obj); // 获取对象在画布中的索引
                        
                        // 获取业务属性 (objs数组中对应的那一项)
                        // 注意：idx=0 是背景图，objs数组是从下标0开始存第1个对象的，所以是 idx-1
                        let appData = (idx > 0 && objs[idx-1]) ? objs[idx-1] : { type: 0 };
                        
                        return {
                            // 1. 保存画面样式 (坐标、颜色、字号等)
                            fabricJson: obj.toObject(['id', 'name', 'selectable', 'evented', 'data']), 
                            // 2. 保存业务属性 (深拷贝，防止引用冲突)
                            appData: JSON.parse(JSON.stringify(appData)) 
                        };
                    });
                    
                    clipboardData.offset = 10; // 重置偏移量
                    console.log(`已复制 ${activeObjects.length} 个对象`);
                    layer.msg("已复制");
                }

                // ===========================================================
                // 3. 粘贴函数：根据保存的数据重建对象
                // ===========================================================
                function pasteFromClipboard() {
                    // 检查是否有数据
                    if (!clipboardData.data || clipboardData.data.length === 0) {
                        // layer.msg("剪贴板为空");
                        return;
                    }

                    // 1. 提取 Fabric JSON 准备恢复画面
                    const jsonToEnliven = clipboardData.data.map(item => item.fabricJson);

                    // 2. 恢复对象 (异步过程)
                    fabric.util.enlivenObjects(jsonToEnliven, function(objects) {
                        canvas.discardActiveObject();
                        
                        objects.forEach((clone, index) => {
                            // --- A. 处理画面位置 ---
                            clone.set({
                                left: clone.left + clipboardData.offset,
                                top: clone.top + clipboardData.offset,
                                evented: true
                            });

                            // 如果是组内对象，需要特殊处理坐标
                            if (clone.group) {
                                clone.set({
                                    left: clone.group.left + clipboardData.offset,
                                    top: clone.group.top + clipboardData.offset
                                });
                            }

                            // --- B. 处理业务数据 ---
                            // 取出复制时保存的 appData
                            let savedAppData = clipboardData.data[index].appData;
                            let newAppData = JSON.parse(JSON.stringify(savedAppData)); // 再次深拷贝
                            
                            // 修改名称，防止 ID 冲突 (例如 TEXT_1 -> TEXT_1_copy)
                            if (newAppData.name) {
                                newAppData.name = newAppData.name + "_copy";
                            }
                            
                            // --- C. 添加到画布和数据数组 ---
                            canvas.add(clone);
                            objs.push(newAppData); // 将新业务数据推入当前页面的 objs 数组
                        });

                        // 3. 选中新粘贴出来的对象
                        let sel = new fabric.ActiveSelection(objects, { canvas: canvas });
                        canvas.setActiveObject(sel);
                        canvas.requestRenderAll();
                        
                        // 4. 刷新列表和历史记录
                        updateList();
                        recordState();
                        
                        // 5. 高亮左侧列表最后一项 (即新粘贴的项)
                        if(objs.length > 0) selectObj(objs.length - 1);
                        
                        // 6. 增加下次粘贴的偏移量 (让用户知道粘贴了新东西)
                        clipboardData.offset += 10;
                    });
                }

                // ===========================================================
                // 4. 按钮事件绑定 (保持原样)
                // ===========================================================
                // 复制
                $("#copy").click(function () {
                    copySelection();
                })
                // 粘贴
                $("#paste").click(function () {
                    pasteFromClipboard();
                })
                
                // 保存 (保持你原有的保存逻辑不变)
                $("#save").click(function () {
                    output(); // 这里调用你的 output 函数
                    return;
                    // ... (下面是你原有的被 return 截断的代码，建议以后清理掉，但这里我按要求保留)
                    let j = canvas1.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
                    // ... (省略你原来那段很长的保存代码) ...
                });


                function getDate() {
                    let date = new Date();
                    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                }
                function getAbsoluteXY(_obj) {
                    let coord = _obj.get("lineCoords");
                    return [_obj.get("left"), _obj.get("top")]
                }
                let fullPath = path.join(exePath, 'data.json')
                // ==========================================
                //  历史记录保存 (修复结构Bug + 自动置顶)
                // ==========================================
                function saveHistory() {
                    let fs = require('fs');
                    let j = { history: [] }; // 默认结构必须是数组

                    try {
                        // 1. 读取并解析现有文件
                        if (fs.existsSync(fullPath)) {
                            let content = fs.readFileSync(fullPath).toString();
                            // 防止空文件报错
                            if (content.trim()) {
                                j = JSON.parse(content);
                            }
                        }
                    } catch (e) {
                        console.error("读取历史记录失败，将重置:", e);
                        // 出错时使用默认空数组，不中断流程
                        j = { history: [] };
                    }
                    
                    // 确保 j.history 是数组 (防御性编程)
                    if (!Array.isArray(j.history)) {
                        j.history = [];
                    }

                    // 2. 【核心优化】先过滤掉当前文件（如果已存在），然后加到最前面
                    // 这样可以实现“最近使用的文件排在第一位”的效果
                    let currentPath = openAs.name;
                    let newList = j.history.filter(item => item.path !== currentPath);
                    
                    // 3. 插入到头部 (Unshift)
                    newList.unshift({
                        time: getDate(),
                        path: currentPath,
                        // type: 1 // 如果需要记录文件类型也可以加在这里
                    });

                    // 4. (可选) 限制历史记录数量，比如只保留最近20条，防止文件无限膨胀
                    if (newList.length > 20) {
                        newList = newList.slice(0, 20);
                    }

                    j.history = newList;

                    // 5. 统一写入
                    try {
                        fs.writeFileSync(fullPath, JSON.stringify(j));
                    } catch (e) {
                        console.error("写入历史记录失败:", e);
                    }
                }

                function open(file) {
                    console.log(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;
                    // }
                    console.log(j.f)
                    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
                    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 是否保存当前文件？                   
                        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 == 2) {
                                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                                         
                            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\":2787,\"height\":2787,\"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,iVBORw0KGgoAAAANSUhEUgAABAwAAAKICAYAAAD0EmiCAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3I5Xldx/HvT3SLdk0ljFyN0t1IEjN2TMEHZXcoKEjmQ9HKUkgURQtv8pGlVN6UlqBJN+Kzwhuo0MjKHhi27pJJUbG7IesNJOUurt2s6T/+cmYZd3bmc12zM7M783kd2Acy3+uc831954lvzpxrzX3w2LbtATPz+Jm5bmYeNzPXzszVM/NtM3Pl4b+r7oO35iUJECBAgAABAgQIECBAgMDFFrhjZr58+O8/ZuZzM3PTzPzTzNw4M/+w1vraxX5T62K94LZtj56ZZ8zMj87MDx3iwMV6ea9DgAABAgQIECBAgAABAgQuVYH/nJmPzsxfzsyfrrX+7WIsckGDwbZtD5mZ587M82bmSRdjIa9BgAABAgQIECBAgAABAgQuc4G/m5n3zMx711q3X6hdL0gw2LbtETPzypl54cz4pwUX6nqelwABAgQIECBAgAABAgSaBfZ/yvCumXnTWuvz5xvivAaDQyh43cz8zMx88/l+s56PAAECBAgQIECAAAECBAgQOE3gf2bm92fm9eczHJyXYLBt24MOnyh4jU8U+KtLgAABAgQIECBAgAABAgTuE4H9EwdvOHzi4Cv39h3c62CwbduJQ8nYf+uBBwECBAgQIECAAAECBAgQIHDfCnxqZn56rbX/hoVzfpxzMNi2bf/ZV8zMr87MFef8DvwgAQIECBAgQIAAAQIECBAgcL4F7pyZ187Mm9da27k8+TkFg23bHjwzfzAzzz6XF/UzBAgQIECAAAECBAgQIECAwEUReP/MPH+t9aXjvtqxg8G2bY+cmT+ZmR847ouZJ0CAAAECBAgQIECAAAECBC66wN/PzDPXWp89zisfKxhs23bNzPzFzHz3cV7ELAECBAgQIECAAAECBAgQIHCfCnx6Zn5srXXzUd/FkYPBtm2Pnpm/mZlHHfXJzREgQIAAAQIECBAgQIAAAQL3G4HPzMwPr7VuOco7OlIw2Lbt4TPzsZm59ihPaoYAAQIECBAgQIAAAQIECBC4XwrcNDNPWWt9Ib27GAy2bbtyZj4yM09OT+bPCRAgQIAAAQIECBAgQIAAgfu9wMdn5ifSFyGeNRgcfnXiH83MT93v1/UGCRAgQIAAAQIECBAgQIAAgaMKvG9mnnO2X7mYgsErZ+Y3jvpq5ggQIECAAAECBAgQIECAAIFLRuCX1lpn/P/8ZwwG27ZdNzN/OzNXXDKreqMECBAgQIAAAQIECBAgQIDAUQXuPHyfwQ339AP3GAy2bXvQzHxiZr7/qK9ijgABAgQIECBAgAABAgQIELjkBD41MyfWWl+5+zs/UzB41cy88ZJb0xsmQIAAAQIECBAgQIAAAQIEjivwmrXWaQ3gtGCwbdvVM/MvM3PVcV/BPAECBAgQIECAAAECBAgQIHDJCdwxM49da3321Hd+T8HgnTPzwktuPW+YAAECBAgQIECAAAECBAgQOFeBd621XnTGYLBt26MPny7Yv8PAgwABAgQIECBAgAABAgQIEOgQ2L/DYP+UwS0n1/2GTxhs2/a2mXlJh4UtCRAgQIAAAQIECBAgQIAAgVME3r7WeulpwWDbtofOzGdm5kpcBAgQIECAAAECBAgQIECAQJ3Af83MI9dat+2b3/UJg23bfmFmfqeOw8IECBAgQIAAAQIECBAgQIDASYEXr7XecfdgcP3MPJERAQIECBAgQIAAAQIECBAgUCtw/VrrSXcFg23brpmZm2o5LE6AAAECBAgQIECAAAECBAicFLhm//LDr/+ThG3bXjYzb2VDgAABAgQIECBAgAABAgQI1Au8bK31WyeDwYdm5mn1JAAIECBAgAABAgQIECBAgACBD6+1nr62bXvgzHxxZq5iQoAAAQIECBAgQIAAAQIECNQL3DEzD9uDwXUzc0M9BwACBAgQIECAAAECBAgQIEDgpMCJPRi8YGbezYQAAQIECBAgQIAAAQIECBAgcBB4wR4M3jIzL0dCgAABAgQIECBAgAABAgQIEDgIvHUPBh+YmWchIUCAAAECBAgQIECAAAECBAgcBD64B4P9+wv27zHwIECAAAECBAgQIECAAAECBAjsAjfuweBfZ+Z7eBAgQIAAAQIECBAgQIAAAQIEDgK37sHg8zPzHUgIECBAgAABAgQIECBAgAABAgeB2/dgsP9+xSuRECBAgAABAgQIECBAgAABAgQOAl/dg8GGgwABAgQIECBAgAABAgQIECBwqoBg4O8DAQIECBAgQIAAAQIECBAgcJqAYOAvBQECBAgQIECAAAECBAgQICAY+DtAgAABAgQIECBAgAABAgQIZAGfMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAX2YPDVmXlAHjVBgAABAgQIECBAgAABAgQIlAh8bQ8Gt83MQ0oWtiYBAgQIECBAgAABAgQIECCQBW7fg8GtM/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\"},\"b\":{\"version\":\"4.6.0\",\"objects\":[{\"type\":\"image\",\"version\":\"4.6.0\",\"originX\":\"left\",\"originY\":\"top\",\"left\":253.5,\"top\":121.5,\"width\":2787,\"height\":2787,\"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,iVBORw0KGgoAAAANSUhEUgAABAwAAAKICAYAAAD0EmiCAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3I5Xldx/HvT3SLdk0ljFyN0t1IEjN2TMEHZXcoKEjmQ9HKUkgURQtv8pGlVN6UlqBJN+Kzwhuo0MjKHhi27pJJUbG7IesNJOUurt2s6T/+cmYZd3bmc12zM7M783kd2Acy3+uc831954lvzpxrzX3w2LbtATPz+Jm5bmYeNzPXzszVM/NtM3Pl4b+r7oO35iUJECBAgAABAgQIECBAgMDFFrhjZr58+O8/ZuZzM3PTzPzTzNw4M/+w1vraxX5T62K94LZtj56ZZ8zMj87MDx3iwMV6ea9DgAABAgQIECBAgAABAgQuVYH/nJmPzsxfzsyfrrX+7WIsckGDwbZtD5mZ587M82bmSRdjIa9BgAABAgQIECBAgAABAgQuc4G/m5n3zMx711q3X6hdL0gw2LbtETPzypl54cz4pwUX6nqelwABAgQIECBAgAABAgSaBfZ/yvCumXnTWuvz5xvivAaDQyh43cz8zMx88/l+s56PAAECBAgQIECAAAECBAgQOE3gf2bm92fm9eczHJyXYLBt24MOnyh4jU8U+KtLgAABAgQIECBAgAABAgTuE4H9EwdvOHzi4Cv39h3c62CwbduJQ8nYf+uBBwECBAgQIECAAAECBAgQIHDfCnxqZn56rbX/hoVzfpxzMNi2bf/ZV8zMr87MFef8DvwgAQIECBAgQIAAAQIECBAgcL4F7pyZ187Mm9da27k8+TkFg23bHjwzfzAzzz6XF/UzBAgQIECAAAECBAgQIECAwEUReP/MPH+t9aXjvtqxg8G2bY+cmT+ZmR847ouZJ0CAAAECBAgQIECAAAECBC66wN/PzDPXWp89zisfKxhs23bNzPzFzHz3cV7ELAECBAgQIECAAAECBAgQIHCfCnx6Zn5srXXzUd/FkYPBtm2Pnpm/mZlHHfXJzREgQIAAAQIECBAgQIAAAQL3G4HPzMwPr7VuOco7OlIw2Lbt4TPzsZm59ihPaoYAAQIECBAgQIAAAQIECBC4XwrcNDNPWWt9Ib27GAy2bbtyZj4yM09OT+bPCRAgQIAAAQIECBAgQIAAgfu9wMdn5ifSFyGeNRgcfnXiH83MT93v1/UGCRAgQIAAAQIECBAgQIAAgaMKvG9mnnO2X7mYgsErZ+Y3jvpq5ggQIECAAAECBAgQIECAAIFLRuCX1lpn/P/8ZwwG27ZdNzN/OzNXXDKreqMECBAgQIAAAQIECBAgQIDAUQXuPHyfwQ339AP3GAy2bXvQzHxiZr7/qK9ijgABAgQIECBAgAABAgQIELjkBD41MyfWWl+5+zs/UzB41cy88ZJb0xsmQIAAAQIECBAgQIAAAQIEjivwmrXWaQ3gtGCwbdvVM/MvM3PVcV/BPAECBAgQIECAAAECBAgQIHDJCdwxM49da3321Hd+T8HgnTPzwktuPW+YAAECBAgQIECAAAECBAgQOFeBd621XnTGYLBt26MPny7Yv8PAgwABAgQIECBAgAABAgQIEOgQ2L/DYP+UwS0n1/2GTxhs2/a2mXlJh4UtCRAgQIAAAQIECBAgQIAAgVME3r7WeulpwWDbtofOzGdm5kpcBAgQIECAAAECBAgQIECAQJ3Af83MI9dat+2b3/UJg23bfmFmfqeOw8IECBAgQIAAAQIECBAgQIDASYEXr7XecfdgcP3MPJERAQIECBAgQIAAAQIECBAgUCtw/VrrSXcFg23brpmZm2o5LE6AAAECBAgQIECAAAECBAicFLhm//LDr/+ThG3bXjYzb2VDgAABAgQIECBAgAABAgQI1Au8bK31WyeDwYdm5mn1JAAIECBAgAABAgQIECBAgACBD6+1nr62bXvgzHxxZq5iQoAAAQIECBAgQIAAAQIECNQL3DEzD9uDwXUzc0M9BwACBAgQIECAAAECBAgQIEDgpMCJPRi8YGbezYQAAQIECBAgQIAAAQIECBAgcBB4wR4M3jIzL0dCgAABAgQIECBAgAABAgQIEDgIvHUPBh+YmWchIUCAAAECBAgQIECAAAECBAgcBD64B4P9+wv27zHwIECAAAECBAgQIECAAAECBAjsAjfuweBfZ+Z7eBAgQIAAAQIECBAgQIAAAQIEDgK37sHg8zPzHUgIECBAgAABAgQIECBAgAABAgeB2/dgsP9+xSuRECBAgAABAgQIECBAgAABAgQOAl/dg8GGgwABAgQIECBAgAABAgQIECBwqoBg4O8DAQIECBAgQIAAAQIECBAgcJqAYOAvBQECBAgQIECAAAECBAgQICAY+DtAgAABAgQIECBAgAABAgQIZAGfMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIEDpfCiFAAAcY0lEQVSAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAUEg2xkggABAgQIECBAgAABAgQI1AkIBnUntzABAgQIECBAgAABAgQIEMgCgkE2MkGAAAECBAgQIECAAAECBOoEBIO6k1uYAAECBAgQIECAAAECBAhkAcEgG5kgQIAAAQIECBAgQIAAAQJ1AoJB3cktTIAAAQIECBAgQIAAAQIEsoBgkI1MECBAgAABAgQIECBAgACBOgHBoO7kFiZAgAABAgQIECBAgAABAllAMMhGJggQIECAAAECBAgQIECAQJ2AYFB3cgsTIECAAAECBAgQIECAAIEsIBhkIxMECBAgQIAAAQIECBAgQKBOQDCoO7mFCRAgQIAAAQIECBAgQIBAFhAMspEJAgQIECBAgAABAgQIECBQJyAY1J3cwgQIECBAgAABAgQIECBAIAsIBtnIBAECBAgQIECAAAECBAgQqBMQDOpObmECBAgQIECAAAECBAgQIJAFBINsZIIAAQIECBAgQIAAAQIECNQJCAZ1J7cwAQIECBAgQIAAAQIECBDIAoJBNjJBgAABAgQIECBAgAABAgTqBASDupNbmAABAgQIECBAgAABAgQIZAHBIBuZIECAAAECBAgQIECAAAECdQKCQd3JLUyAAAECBAgQIECAAAECBLKAYJCNTBAgQIAAAQIECBAgQIAAgToBwaDu5BYmQIAAAQIECBAgQIAAAQJZQDDIRiYIECBAgAABAgQIECBAgECdgGBQd3ILEyBAgAABAgQIECBAgACBLCAYZCMTBAgQIECAAAECBAgQIECgTkAwqDu5hQkQIECAAAECBAgQIECAQBYQDLKRCQIECBAgQIAAAQIECBAgUCcgGNSd3MIECBAgQIAAAQIECBAgQCALCAbZyAQBAgQIECBAgAABAgQIEKgTEAzqTm5hAgQIECBAgAABAgQIECCQBQSDbGSCAAECBAgQIECAAAECBAjUCQgGdSe3MAECBAgQIECAAAECBAgQyAKCQTYyQYAAAQIECBAgQIAAAQIE6gQEg7qTW5gAAQIECBAgQIAAAQIECGQBwSAbmSBAgAABAgQIECBAgAABAnUCgkHdyS1MgAABAgQIECBAgAABAgSygGCQjUwQIECAAAECBAgQIECAAIE6AcGg7uQWJkCAAAECBAgQIECAAAECWUAwyEYmCBAgQIAAAQIECBAgQIBAnYBgUHdyCxMgQIAAAQIECBAgQIAAgSwgGGQjEwQIECBAgAABAgQIECBAoE5AMKg7uYUJECBAgAABAgQIECBAgEAWEAyykQkCBAgQIECAAAECBAgQIFAnIBjUndzCBAgQIECAAAECBAgQIEAgCwgG2cgEAQIECBAgQIAAAQIECBCoExAM6k5uYQIECBAgQIAAAQIECBAgkAX2YPDVmXlAHjVBgAABAgQIECBAgAABAgQIlAh8bQ8Gt83MQ0oWtiYBAgQIECBAgAABAgQIECCQBW7fg8GtM/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: 2787,
                            width: 2787,
                            top: top,
                            left: left
                        });
                        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: 2787,
                            width: 2787,
                            top: top,
                            left: left
                        });
                        let o = { f: j, b: {}, fo: objs1, bo: objs2, fp: fp, bp: '' };
                        if (openAs.name != "") {
                            //打开的文件
                            let fs = require('fs')
                            o.soonType = 1
                            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 = 1
                            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_1.png', function (image) {
                        let width = $("#canvas1").width()

                        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) {
                            image.scale(1, 1);
                            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.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.Text('TEXT', {//源：文本
                        left: pointer.x,
                        top: pointer.y,
                        fill: "#000000",
                        textBackgroundColor: "",
                        fontStyle: "normal",
                        fontWeight: "normal",
                        fontSize: 100,
                        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")
                    }
                    $("#circle_text_control").hide();
                    $("#pic_control").hide();
                    $("#set_bg").hide();
                    $("#out_pic_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: 100,
                        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 });
                    canvas.renderAll();
                    updateList();
                    recordState();
                }
                function selectCircleText() {
                    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")-500);
                    $("#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",
                        fontSize: 100,
                        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: 10,
                        width: 300,
                        height: 300
                    });
                    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: 10,
                        radius: 150,
                        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([100, 200, 400, 200], {
                        left: pointer.x,
                        top: pointer.y,
                        stroke: '#ff0000',
                        strokeWidth: 10,
                        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;
                        image.scale(2.4, 2.4)
                        canvas.add(image);
                        objs.push({ type: 8, name: resName("QR_CODE_"), color: "#000000", val: "https://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();
                    $("#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();
                    $("#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;
                        image.scale(2.4, 2.4)
                        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();
                    $("#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();
                }
                function addCounter(pointer) {
                    let text = new fabric.Text('0', {
                        left: pointer.x,
                        top: pointer.y,
                        fontSize: 100,
                        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();
                    $("#set_bg").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++;
                    }
                }
              // ===========================================================
                // 1. 刷新对象列表 (序号顺序：底层=1，顶层=N，修复：Flex布局防遮挡 + 序号靠右)
                // ===========================================================
                function updateList() {
                    let str = "";
                    let i = 0;
                    
                    // 定义行样式：Flex布局，两端对齐，相对定位防止溢出
                    const rowStyle = "display:flex; justify-content:space-between; align-items:center; height:32px; padding:0 5px; cursor:pointer; border-bottom:1px solid #444; color:#ccc; font-size:12px; position:relative;";
                    // 定义左侧内容样式
                    const leftStyle = "display:flex; align-items:center; overflow:hidden; white-space:nowrap; max-width:180px;";
                    // 定义序号样式：靠右，有左边框
                    const indexStyle = "min-width:24px; text-align:center; padding-left:5px; color:#666; border-left:1px solid #555;";

                    for (let item of objs) {
                        let displayIndex = i + 1; // 序号底层为1
                        
                        // 图标逻辑
                        let iconName = "rect.svg";
                        switch (item.type) {
                            case 1: iconName = "images.svg"; break;
                            case 2: iconName = "images_add.svg"; break;
                            case 3: iconName = "text.svg"; break;
                            case 4: iconName = "text2.svg"; break;
                            case 5: iconName = "rect.svg"; break;
                            case 6: iconName = "round.svg"; break;
                            case 7: iconName = "line.svg"; break;
                            case 8: iconName = "qrcode.svg"; break;
                            case 9: iconName = "barcode.svg"; break;
                            case 10: iconName = "counter.svg"; break;
                            case 11: iconName = "text3.svg"; break;
                        }
                        
                        // 名称逻辑
                        let nameText = item.name ? item.name : 
                                      (item.type === 3 ? "TEXT_" + displayIndex : 
                                      (item.type === 1 ? "IMG_" + displayIndex : "OBJ_" + displayIndex));

                        // 组装 HTML
                        str = `<div style="${rowStyle}">
                                    <div style="${leftStyle}">
                                        <img src="public/images/${iconName}" id="obj${i}" style="width:16px; margin-right:5px;">
                                        <span title="${nameText}">${nameText}</span>
                                    </div>
                                    <span style="${indexStyle}">${displayIndex}</span>
                               </div>` + str;
                        i++;
                    }
                    $(".obj_list").html(str);
                    
                    // 重新绑定点击事件（防止 updateList 后点击失效）
                    $(".obj_list > div").on("click", function () {
                        let imgId = $(this).find("img").attr("id");
                        if(imgId) {
                            let idx = parseInt(imgId.replace("obj", ""));
                            selectObj(idx);
                        }
                    });
                }

                // ===========================================================
                // 2. 列表选中高亮 (修复：自动滚动 + 防冲突)
                // ===========================================================
                function selectObj(objIndices, isFromCanvas = false) {
                    let indicesArray = (Array.isArray(objIndices)) ? objIndices : ((typeof objIndices === 'number' && objIndices >= 0) ? [objIndices] : []);

                    // 清除所有高亮
                    $('.obj_list > div').css("background-color", "transparent");

                    // 遍历列表查找并高亮
                    $('.obj_list > div').each(function () {
                        let $img = $(this).find("img");
                        if ($img.length === 0) return;
                        
                        let idIndex = parseInt($img.attr("id").replace("obj", ""));
                        
                        if (indicesArray.includes(idIndex)) {
                            $(this).css("background-color", "#6F7A84");
                            
                            // 自动滚动到可视区域
                            if (isFromCanvas && indicesArray[0] === idIndex) {
                                this.scrollIntoView({ behavior: "smooth", block: "nearest" });
                            }
                        }
                    });

                    // 如果是点击列表，触发画布选中
                    if (!isFromCanvas && indicesArray.length === 1) {
                        let target = canvas.getObjects()[indicesArray[0] + 1];
                        if (target) {
                            canvas.setActiveObject(target);
                            canvas.requestRenderAll();
                            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);
                }
                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_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($("#qrcode_val").val(), { 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();
                })
                $("#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();
                })
                $("#out_text_color").bind('input propertychange', function () {
                    canvas.getActiveObject().set("fill", $("#out_text_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();
                })
                $("#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").on('input propertychange', function () {
                    let val = $(this).val(); 
                    
                    // 【核心修改】如果值为空，强制给 2 个空格
                    // 这样宽度足够宽，容易点击选中
                    if (val === "") {
                        val = "  "; 
                    }
                    
                    let obj = canvas.getActiveObject();
                    if (obj) {
                        obj.set("text", val);
                        obj.setCoords(); 
                        canvas.requestRenderAll();
                        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").on('input propertychange', function () {
                    // 1. 获取输入框的值，不要用 trim()，否则无法输入空格
                    let val = $(this).val(); 
                    
                    // 2. 核心修改：只有当删光时，才给 4 个空格作为占位符
                    if (val === "") {
                        val = "  "; // 4个空格，比原来的2个更宽，更好点
                    }
                    // 3. 更新对象
                    // 注意：这里直接用 val，不再用 ` ${val} `，这样有文字时就不会强制加空格了
                    canvas.getActiveObject().set("text", val);
                    canvas.requestRenderAll(); // 使用 requestRenderAll 性能更好
                    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();
                });
                $("#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();
                });
                $("#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();
                    
                    // 1. 未选中任何对象
                    if (!select_obj) {
                        $("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
                        $("#component_type").text(language_str("bg"));
                        selectObj(-1, true); // 传 true，只更新UI
                        return;
                    }

                    // 2. 获取索引
                    let i = getIndex(select_obj);

                    if (i != 0) {
                        // --- 选中了普通对象 ---
                        --i; // 转换为 objs 数组下标
                        
                        if(objs[i]) {
                            switch (objs[i].type) {
                                case 1: // 图片
                                    $("#component_type").text(language_str("img"));
                                    selectObject(select_obj, i); selectPic(select_obj, i); break;
                                case 2: // 合成图片
                                    $("#component_type").text(language_str("simg"));
                                    selectObject(select_obj, i); selectOutPic(select_obj, i); break;
                                case 3: // 文本
                                    $("#component_type").text(language_str("text"));
                                    selectObject(select_obj, i); selectText(select_obj, i); break;
                                case 4: // 合成文本
                                    $("#component_type").text(language_str("stext"));
                                    selectObject(select_obj, i); selectOutText(select_obj, i); break;
                                case 5: // 矩形
                                    $("#component_type").text(language_str("rect"));
                                    selectObject(select_obj, i); selectRect(select_obj, i); break;
                                case 6: // 圆形
                                    $("#component_type").text(language_str("circ"));
                                    selectObject(select_obj, i); selectCircle(select_obj, i); break;
                                case 7: // 直线
                                    $("#component_type").text(language_str("line"));
                                    selectObject(select_obj, i); selectLine(select_obj, i); break;
                                case 8: // 二维码
                                    $("#component_type").text(language_str("qrc"));
                                    selectObject(select_obj, i); selectQrCode(select_obj, i); break;
                                case 9: // 条形码
                                    $("#component_type").text(language_str("barc"));
                                    selectObject(select_obj, i); selectBarCode(select_obj, i); break;
                                case 10: // 计数器
                                    $("#component_type").text(language_str("counter"));
                                    selectObject(select_obj, i); selectCounter(select_obj, i); break;
                                case 11: // 圆形文本
                                    $("#component_type").text(language_str("ctext"));
                                    selectObject(select_obj, i); selectCircleText(select_obj, i); break;
                            }
                        }

                        // 【关键】这里传入 true！
                        // 意思是：因为我已经是在画布上选中它了，selectObj 函数只负责把左边的条目变灰，不要再回头去 setActiveObject 了
                        selectObj(i, true); 

                    } else {
                        // --- 选中了背景 ---
                        $("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
                        selectObj(-1, true);
                        $("#component_type").text(language_str("bg"));
                    }
                }

                // ===========================================================
                //  统一事件监听 (替代原有的 canvas1.on 和 canvas2.on)
                // ===========================================================
                // 提取对象移动逻辑 (供正反面复用)
                function handleObjectMoving(e) {
                    let obj = e.target;
                    let idx = getIndex(obj);
                    // 圆形文本特殊处理
                    if (idx > 0 && idx <= objs.length && objs[idx - 1] && objs[idx - 1].type === 11 && $("#circle_text_center").prop("checked")) {
                        let pointer = { x: obj.left, y: obj.top };
                        let distance = getDisdance(pointer.x, pointer.y, canvas.width / 2, canvas.height / 2);
                        let angleDeg = getDeg(pointer);
                        let flipped = pointer.y > canvas.height / 2 ? true : false;
                        
                        if(typeof circle_text_diameter !== 'undefined') circle_text_diameter.setValue(distance * 2 - 500);
                        obj.set("diameter", distance * 2);
                        obj.set("angle", angleDeg);
                        obj.set("flipped", flipped);
                    }
                    updateControls();
                }

                // 启动监听
                // ===========================================================
                // 统一事件绑定 (已集成边界检测)
                // ===========================================================
// ===========================================================
                // 3. 统一事件绑定 (修复：使用 Global Composite Operation 实现完美遮罩)
                // ===========================================================
                function initCanvasEvents() {
                    [canvas1, canvas2].forEach(currentCanvas => {
                        
                        // 1. 鼠标移动
                        currentCanvas.on("mouse:move", (e) => {
                            let offsetX = 0, offsetY = 0;
                            if (currentCanvas === canvas2 && typeof background_image !== 'undefined') {
                                offsetX = background_image.left;
                                offsetY = background_image.top;
                            }
                            if(e.pointer) {
                                $("#posText").text("X: " + (e.pointer.x - offsetX).toFixed(0) + " Y: " + (e.pointer.y - offsetY).toFixed(0));
                            }
                            updateRulerGuides(e.e);
                        });

                        // 2. 鼠标移出
                        currentCanvas.on("mouse:out", () => {
                            $("#ruler-guide-h").hide(); $("#ruler-guide-v").hide();
                        });

                        // 3. 选中处理
                        currentCanvas.on('mouse:down', handleObjectSelected);

                        // 4. 鼠标松开 (添加对象)
                        currentCanvas.on("mouse:up", (e) => {
                            if (addState === 0) return;
                            const ptr = e.pointer;
                            switch (addState) {
                                case 1: addPic(ptr); break;
                                case 2: addOutPic(ptr); break;
                                case 3: addText(ptr); break;
                                case 4: addOutText(ptr); break;
                                case 5: addRect(ptr); break;
                                case 6: addCircle(ptr); break;
                                case 7: addLine(ptr); break;
                                case 8: addQrCode(ptr); break;
                                case 9: addBarCode(ptr); break;
                                case 10: addCounter(ptr); break;
                                case 11: addCircleText(ptr); break;
                            }
                            addState = 0;
                            if(typeof background_image !== 'undefined') background_image.hoverCursor = "default";
                            currentCanvas.renderAll();
                            $("#addPic, #addOutPic, #addText, #addOutText, #addRect, #addCircle, #addLine, #addQrCode, #addBarCode, #addCounter, #addCircleText").css("background-color", "");
                        });

                        // 5. 对象移动 (只保留圆形文本逻辑，去掉了 checkOutOfBounds)
                        currentCanvas.on("object:moving", (e) => {
                             handleObjectMoving(e);
                        });

                        // 6. 变换事件
                        currentCanvas.on("object:rotating", updateControls);
                        currentCanvas.on("object:scaling", updateControls);
                        currentCanvas.on("object:rotated", () => { recordState(); });
                        currentCanvas.on('text:editing:entered', () => { _textEdit = true; });
                        currentCanvas.on('text:editing:exited', () => { _textEdit = false; });
                        currentCanvas.on("text:changed", (e) => { $("#text_text").val(e.target.get("text")); });

                        // 7. 对象修改后
                        currentCanvas.on('object:modified', function (event) {
                            if (currentCanvas.getActiveObjects().length > 1) return;
                            let idx = getIndex(event.target);
                            if(idx <= 0) return;
                            let objData = objs[idx - 1];
                            let target = event.target;

                            if ([3, 4, 10].includes(objData.type)) { 
                                target.fontSize = (target.fontSize * target.scaleX).toFixed(0);
                                target.scaleX = 1; target.scaleY = 1;
                                target._clearCache();
                                if(objData.type == 3) $("#text_size").val(target.fontSize);
                                if(objData.type == 4) $("#out_text_size").val(target.fontSize);
                                if(objData.type == 10) $("#count_size").val(target.fontSize);
                                currentCanvas.renderAll();
                                updateControls();
                            } else if (objData.type == 5) { 
                                target.width *= target.scaleX; target.height *= target.scaleY;
                                target.scaleX = 1; target.scaleY = 1;
                                updateControls();
                            }
                            recordState();
                        });
                        // ==================================================
                        // 8. 【完美修复版】渲染后绘制：外部蒙版 + 中心圆孔 (修复三角形Bug)
                        // ==================================================
                        currentCanvas.on('after:render', function () {
                            let bgObj = (currentCanvas === canvas1) ? background_image1 : background_image2;
                            
                            if (bgObj) {
                                const ctx = currentCanvas.getContext();
                                const width = currentCanvas.width;
                                const height = currentCanvas.height;

                                // 1. 计算圆心
                                const cx = bgObj.left + (bgObj.width * bgObj.scaleX) / 2;
                                const cy = bgObj.top + (bgObj.height * bgObj.scaleY) / 2;
                                
                                // 2. 计算半径
                                // 外半径 (光盘大小)
                                const r_outer = (bgObj.width * bgObj.scaleX) / 2; 

                                // 内半径 (中心孔)
                                const dpi = 600;
                                const mmToPx = dpi / 25.4;
                                let holeDiameterMm = 24; // 默认 15mm
                                
                                // 切换版本判断 (15mm vs 38mm)
                                if (currentCanvas === canvas1 && typeof bg_version !== 'undefined' && bg_version === 2) {
                                    holeDiameterMm = 42; 
                                }
                                
                                // 比例计算法：确保孔径随缩放适配
                                // r_inner = r_outer * (孔径 / 光盘标准直径120mm)
                                const r_inner = r_outer * (holeDiameterMm / 120);

                                ctx.save();
                                ctx.beginPath();

                                // A. 绘制全屏矩形 (顺时针)
                                ctx.rect(0, 0, width, height);

                                // B. 挖掉外圆 (逆时针) 
                                // 【关键修复】画圆前，必须把笔移动到圆的起点 (cx + r, cy)
                                // 否则 Canvas 会画一条线连过来，形成奇怪的三角形
                                ctx.moveTo(cx + r_outer, cy); 
                                ctx.arc(cx, cy, r_outer, 0, Math.PI * 2, true);

                                // C. 填补内圆 (顺时针)
                                // 【关键修复】同理，把笔移动到内圆的起点
                                ctx.moveTo(cx + r_inner, cy);
                                ctx.arc(cx, cy, r_inner, 0, Math.PI * 2, false);

                                ctx.closePath();
                                ctx.fillStyle = "rgba(0, 0, 0, 0.9)"; // 90% 遮罩
                                ctx.fill();
                                ctx.restore();
                            }
                        });
                    });
                }
                // 立即启动
                initCanvasEvents();
                // ===========================================================
                // Slider 滑块初始化 (保持原样)
                // ===========================================================
                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: 500, max: 4000,
                    change: function (value) {
                        canvas.getActiveObject().set("diameter", value);
                        canvas.renderAll();
                    }
                });
                var out_pic_op = slider.render({
                    elem: '#out_pic_op',
                    change: function (value) {
                        canvas.getActiveObject().set('opacity', (100 - value) / 100);
                        canvas.renderAll();
                    }
                });
                var pic_op = slider.render({
                    elem: '#pic_op',
                    change: function (value) {
                        canvas.getActiveObject().set("opacity", (100 - value) / 100);
                        canvas.renderAll();
                    }
                });
                var rect_op = slider.render({
                    elem: '#rect_op',
                    change: function (value) {
                        canvas.getActiveObject().set("opacity", (100 - value) / 100);
                        canvas.renderAll();
                    }
                });
                var circle_op = slider.render({
                    elem: '#circle_op',
                    change: function (value) {
                        canvas.getActiveObject().set("opacity", (100 - value) / 100);
                        canvas.renderAll();
                    }
                });
// ===========================================================
                // 3. 标尺功能 (0点复位 + 拖拽辅助线 + 透明度)
                // ===========================================================
                function initRulers() {
                    const dpi = 600;
                    const mmToPx = dpi / 25.4;
                    const rulerHeight = 20;
                    const rulerWidth = 20;
                    
                    const canvasWrapper = $('.canvas-wrapper');
                    const canvasBox = $('.canvas_box');
                    
                    // 确保容器定位
                    if(canvasWrapper.css('position') === 'static') canvasWrapper.css('position', 'relative');
                    
                    // 初始化尺寸
                    let canvasWidth = canvasWrapper.width() || 800;
                    let canvasHeight = canvasWrapper.height() || 600;

                    const $rulerH = $('#ruler-h');
                    const $rulerV = $('#ruler-v');

                    $rulerH.attr('width', canvasWidth).attr('height', rulerHeight);
                    $rulerV.attr('width', rulerWidth).attr('height', canvasHeight);
                    
                    // --- 1. 绑定拖拽事件 (核心新功能) ---
                    // 定义临时拖拽线 DOM
                    let $dragLine = null;
                    
                    // 通用拖拽开始函数
                    const startDragGuide = (type, e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        // 创建临时显示的线
                        $dragLine = $('<div class="guide-line-drag"></div>');
                        $('.canvas-wrapper').append($dragLine);
                        
                        if (type === 'horizontal') {
                            // 从上往下拖 (水平线)
                            $dragLine.css({
                                left: 0, width: '100%', height: '1px', top: e.offsetY
                            });
                        } else {
                            // 从左往右拖 (垂直线)
                            $dragLine.css({
                                top: 0, height: '100%', width: '1px', left: e.offsetX
                            });
                        }

                        // 绑定 document 移动事件
                        $(document).on('mousemove.ruler', function(moveEvent) {
                            let wrapperOffset = canvasWrapper.offset();
                            if (type === 'horizontal') {
                                let relY = moveEvent.pageY - wrapperOffset.top;
                                $dragLine.css('top', relY + 'px');
                            } else {
                                let relX = moveEvent.pageX - wrapperOffset.left;
                                $dragLine.css('left', relX + 'px');
                            }
                        });

                        // 绑定松开事件 (创建真实的 Fabric 线)
                        $(document).on('mouseup.ruler', function(upEvent) {
                            $(document).off('mousemove.ruler mouseup.ruler');
                            
                            if (!$dragLine) return;
                            
                            // 获取最终位置
                            let wrapperOffset = canvasWrapper.offset();
                            let finalX = upEvent.pageX - wrapperOffset.left;
                            let finalY = upEvent.pageY - wrapperOffset.top;
                            
                            // 移除临时线
                            $dragLine.remove();
                            $dragLine = null;

                            // 只有拖入画布区域才创建
                            if (finalX > rulerWidth && finalY > rulerHeight) {
                                createFabricGuide(type, finalX, finalY);
                            }
                        });
                    };

                    // 绑定到标尺 DOM
                    $rulerH.off('mousedown').on('mousedown', (e) => startDragGuide('horizontal', e));
                    $rulerV.off('mousedown').on('mousedown', (e) => startDragGuide('vertical', e));

                    // --- 2. 在画布中创建辅助线 ---
                    function createFabricGuide(type, domX, domY) {
                        // 计算画布内的逻辑坐标 (减去 margin 偏移，除以缩放)
                        // 注意：这里我们重新回到“原点在画布0,0”的逻辑
                        // canvasBox.offset() 是画布容器的绝对位置
                        let boxOffset = canvasBox.offset();
                        let wrapperOffset = canvasWrapper.offset();
                        
                        // 计算相对于 canvasBox 的像素位置
                        let relX = domX - (boxOffset.left - wrapperOffset.left);
                        let relY = domY - (boxOffset.top - wrapperOffset.top);

                        // 转为 Fabric 坐标 (除以 zoom)
                        let canvasX = relX / zoom;
                        let canvasY = relY / zoom;
                        
                        // 构造线对象
                        let linePoints = [];
                        if (type === 'horizontal') {
                            // 水平线：贯穿整个画布宽度
                            // 为了让线足够长，我们设一个很大的值，或者设为 canvas.width
                            linePoints = [-5000, canvasY, 5000, canvasY];
                        } else {
                            // 垂直线
                            linePoints = [canvasX, -5000, canvasX, 5000];
                        }

                        let guideLine = new fabric.Line(linePoints, {
                            stroke: '#00FFFF',   // 青色高亮
                            strokeWidth: 1 / zoom, // 线条粗细随缩放调整，保持视觉一致
                            strokeDashArray: [5, 5], // 虚线
                            selectable: true,    // 允许选中移动
                            evented: true,
                            hasControls: false,  // 没有缩放控制点
                            hasBorders: false,
                            lockRotation: true,  // 锁定旋转
                            lockScalingX: true,
                            lockScalingY: true,
                            hoverCursor: type === 'horizontal' ? 'ns-resize' : 'ew-resize',
                            // 自定义属性标记
                            isGuideLine: true,
                            ignoreSave: true     // 保存时可以根据这个标记过滤掉
                        });

                        // 限制移动方向
                        guideLine.on('moving', function(e) {
                            if (type === 'horizontal') {
                                this.left = -5000; // 锁定 X 轴不许动
                            } else {
                                this.top = -5000;  // 锁定 Y 轴不许动
                            }
                        });

                        canvas.add(guideLine);
                        canvas.setActiveObject(guideLine);
                        canvas.renderAll();
                    }


                    // --- 3. 绘制标尺 (核心绘制循环) ---
                    function updateAndDraw() {
                        const pxPerMm = zoom * mmToPx;
                        
                        // 【修改点】原点复位逻辑
                        // 现在原点就是 Canvas 的 (0,0) 点
                        // 加上 canvasBox 的 margin 偏移量，让标尺 0 刻度对齐画布边缘
                        let boxMarginLeft = parseFloat(canvasBox.css('margin-left')) || 0;
                        let boxMarginTop = parseFloat(canvasBox.css('margin-top')) || 0;
                        
                        let originX = boxMarginLeft;
                        let originY = boxMarginTop;

                        const ctxH = document.getElementById('ruler-h').getContext('2d');
                        const ctxV = document.getElementById('ruler-v').getContext('2d');

                        const drawAxis = (ctx, isH) => {
                            let len = isH ? canvasWidth : canvasHeight;
                            ctx.clearRect(0, 0, isH ? len : rulerWidth, isH ? rulerHeight : len);
                            
                            // 背景改为透明 (配合 CSS)
                            // ctx.fillStyle = 'rgba(44, 44, 44, 0.7)'; // 也可以在这里画
                            // ctx.fillRect(...) 
                            // 这里我们留空，让 CSS 背景色透出来

                            ctx.strokeStyle = '#999'; // 刻度颜色稍亮一点
                            ctx.lineWidth = 1; 
                            ctx.beginPath();
                            
                            // 绘制底边线
                            if(isH) { ctx.moveTo(0, 19); ctx.lineTo(len, 19); } 
                            else { ctx.moveTo(19, 0); ctx.lineTo(19, len); }
                            ctx.stroke();

                            ctx.fillStyle = '#CCC'; 
                            ctx.font = '9px Arial';
                            ctx.textAlign = isH ? 'left' : 'center'; 
                            ctx.textBaseline = isH ? 'top' : 'middle';
                            ctx.beginPath();
                            
                            // 绘制刻度 (只向正方向绘制)
                            // 既然原点复位到0了，我们只需要从0开始画
                            for (let mm = 0; ; mm += 1) {
                                let pos = (isH ? originX : originY) + (mm * pxPerMm);
                                
                                if (pos > len) break;
                                
                                let isMajor = mm % 10 === 0; // 1cm
                                let isMedium = mm % 5 === 0; // 0.5cm
                                let tickLen = isMajor ? 15 : (isMedium ? 8 : 4);
                                
                                if(isH) {
                                    ctx.moveTo(pos, 20 - tickLen); ctx.lineTo(pos, 20);
                                    if(isMajor) ctx.fillText(mm/10, pos + 2, 2); // 显示 cm 数值
                                } else {
                                    ctx.moveTo(20 - tickLen, pos); ctx.lineTo(20, pos);
                                    if(isMajor) {
                                        ctx.save(); 
                                        ctx.translate(8, pos + 2); 
                                        ctx.rotate(-Math.PI/2); 
                                        ctx.fillText(mm/10, 0, 0); 
                                        ctx.restore();
                                    }
                                }
                            }
                            ctx.stroke();
                        };
                        
                        drawAxis(ctxH, true);
                        drawAxis(ctxV, false);
                    }
                    
                    canvas1.on('after:render', updateAndDraw);
                    canvas2.on('after:render', updateAndDraw);
                    $(window).resize(() => setTimeout(updateAndDraw, 100));
                    updateAndDraw();
                }
                
                // 辅助函数：更新光标位置
                function updateRulerGuides(nativeEvent) {
                    if (!nativeEvent) return;
                    const wrapper = $('.canvas-wrapper');
                    const offset = wrapper.offset();
                    if (!offset) return;
                    $("#ruler-guide-h").css({ left: (nativeEvent.pageX - offset.left) + 'px', display: 'block' });
                    $("#ruler-guide-v").css({ top: (nativeEvent.pageY - offset.top) + 'px', display: 'block' });
                }



                
            })
        });