diff --git a/data.json b/data.json index 2f33ba0..df7f8e6 100644 --- a/data.json +++ b/data.json @@ -1 +1 @@ -{"history":[{"time":"2025-3-30","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi6.soon"},{"time":"2025-3-30","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi7.soon"}]} \ No newline at end of file +{"history":[{"time":"2025-3-30","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi6.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi7.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi5.soon"}]} \ No newline at end of file diff --git a/design1.html b/design1.html index eb27eed..7699bd2 100644 --- a/design1.html +++ b/design1.html @@ -757,6 +757,7 @@ ipcRenderer.send('get-sys-fonts'); ipcRenderer.send('get-scale-rate'); const { clipboard } = require('electron') + const dpi = 600 //var encrypt = new JSEncrypt(); //encrypt.setPublicKey(`-----BEGIN PUBLIC KEY----- //MIGdMA0GCSqGSIb3DQEBAQUAA4GLADCBhwKBgQDAbKQ46WevL9PapJ+AlZqSzczkTovu7STH @@ -3148,7 +3149,7 @@ title: language_str("selectPic"),//请选择图片 buttonLabel: language_str("comf"),//"确认" filters: [ - { name: 'Image File Type', extensions: ['png', 'jpg'] }, + { name: 'Image File Type', extensions: ['png', 'jpg', 'jpeg'] }, ] }).then(result => { if (result.canceled) return; @@ -4409,14 +4410,14 @@ ] }).then(result => { if (result.canceled) return; - //console.log(result.filePaths) + 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', $(this).attr("data"), type); + ipcRenderer.send('open-design-page', openAs.name, type); return } let left = background_image.left; @@ -4842,7 +4843,7 @@ $("#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/600 + 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")); @@ -5028,7 +5029,7 @@ $("#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/600 + 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")); @@ -5248,7 +5249,7 @@ 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/600 + 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); @@ -5291,7 +5292,7 @@ $("#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/600 + let val = parseFloat(canvas.getActiveObject().get("fontSize"))*72/dpi if (val%0.5!==0) val = Math.round(val*2)/2 $("#count_size").val(val); @@ -5627,15 +5628,15 @@ val = parseFloat($("#text_size").val()) if (val < 1) { val = 1 - } else if (val > 600) { - val = 600 + } 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*600/72); + 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(); @@ -5653,12 +5654,8 @@ recordState(); }) $("#circle_text_text").bind('input propertychange', function () { - let val = $("#circle_text_text").val() - if (!val) { - val = 'Circle TEXT' - $("#circle_text_text").val(val) - } - canvas.getActiveObject().set("text", val); + let val = $("#circle_text_text").val().trim() + canvas.getActiveObject().set("text", ` ${val} `); canvas.renderAll(); updateList(); recordState(); @@ -5680,22 +5677,23 @@ val = parseFloat($("#out_text_size").val()) if (val < 1) { val = 1 - } else if (val > 600) { - val = 600 + } 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*600/72); + canvas.getActiveObject().set("fontSize", val*dpi/72); $("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0)); $("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0)); canvas.renderAll(); recordState(); }) $("#out_text_text").bind('input propertychange', function () { - canvas.getActiveObject().set("text", $("#out_text_text").val()); + let val = $("#out_text_text").val().trim() + canvas.getActiveObject().set("text", ` ${val} `); canvas.renderAll(); updateList(); recordState(); @@ -5781,15 +5779,15 @@ val = parseFloat($("#count_size").val()) if (val < 1) { val = 1 - } else if (val > 600) { - val = 600 + } 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*600/72); + 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(); @@ -5809,7 +5807,8 @@ recordState(); }) $("#text_text").bind('input propertychange', function () { - canvas.getActiveObject().set("text", $("#text_text").val()); + let val = $("#text_text").val().trim() + canvas.getActiveObject().set("text", ` ${val} `); canvas.renderAll(); updateList(); recordState(); @@ -5837,7 +5836,7 @@ } else { objs[idx - 1].show = false; } - JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: val*600/72, font: objs[idx - 1].font }); + 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) { @@ -5853,15 +5852,15 @@ val = parseFloat($(this).val()) if (val < 1) { val = 1 - } else if (val > 600) { - val = 600 + } 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*600/72; + 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'); @@ -6132,7 +6131,7 @@ let angleDeg = getDeg(pointer) let flipped = pointer.y > canvas.height/2 ? true : false obj.set("diameter", distance*2); - obj.set("angle", angleDeg); + // obj.set("angle", angleDeg); obj.set("flipped", flipped); // canvas.renderAll(); } @@ -6682,6 +6681,15 @@ canvas.renderAll(); } }); + var out_pic_op = slider.render({ + elem: '#out_pic_op', + change: function (value) { + console.log(value) + console.log(canvas.getActiveObject()) + canvas.getActiveObject().set('opacity', (100 - value) / 100) + canvas.renderAll() + } + }) var pic_op = slider.render({ elem: '#pic_op' , change: function (value) { diff --git a/design2.html b/design2.html index 8c340f4..70b0b86 100644 --- a/design2.html +++ b/design2.html @@ -58,6 +58,8 @@
+
+
X: @@ -93,13 +95,11 @@
- +
-
-
+
+ + + +
+ +
+
+ +
+
+ +
@@ -186,7 +230,7 @@
-
@@ -252,7 +296,7 @@ style="width: 50px;height:25px;position:relative;bottom:2px" id="rect_radius" />
- +
@@ -286,7 +330,7 @@ id="circle_stroke_width" />
- +
@@ -326,7 +370,7 @@
-
@@ -342,7 +386,7 @@
-
@@ -458,6 +502,9 @@
+
+ +
@@ -523,6 +570,160 @@ return APIFMS } + (function (fabric) { + fabric.CurvedText = fabric.util.createClass(fabric.Object, { + type: 'curved-text', + diameter: 250, + kerning: 0, + text: '', + flipped: false, + fill: '#000', + fontFamily: 'Times New Roman', + fontSize: 24, // in px + fontWeight: 'normal', + fontStyle: '', // "normal", "italic" or "oblique". + cacheProperties: fabric.Object.prototype.cacheProperties.concat('diameter', 'textBackgroundColor', 'kerning', 'flipped', 'fill', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'strokeStyle', 'strokeWidth'), + strokeStyle: null, + strokeWidth: 0, + initialize: function (text, options) { + options || (options = {}); + if (typeof text === 'object' && text) { + for (let key in text) { + this[key] = text[key] + } + } else { + this.text = text; + } + this.callSuper('initialize', options); + this.set('lockUniScaling', true); + var canvas = this.getCircularText(); + this.cropCanvas(canvas); + this.set('width', canvas.width); + this.set('height', canvas.height); + }, + _getFontDeclaration: function () { + return [ + (fabric.isLikelyNode ? this.fontWeight : this.fontStyle), + (fabric.isLikelyNode ? this.fontStyle : this.fontWeight), + this.fontSize + 'px', + (fabric.isLikelyNode ? ('"' + this.fontFamily + '"') : this.fontFamily) + ].join(' '); + }, + cropCanvas: function (canvas) { + var ctx = canvas.getContext('2d'), + w = canvas.width, + h = canvas.height, + pix = { x: [], y: [] }, n, + imageData = ctx.getImageData(0, 0, w, h), + fn = function (a, b) { return a - b }; + for (var y = 0; y < h; y++) { + for (var x = 0; x < w; x++) { + if (imageData.data[((y * w + x) * 4) + 3] > 0) { + pix.x.push(x); + pix.y.push(y); + } + } + } + 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]; + 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.isPackaged ? process.cwd() : path.dirname(process.execPath) @@ -533,6 +734,14 @@ ipcRenderer.send('get-sys-fonts') ipcRenderer.send('get-scale-rate') const { clipboard } = require('electron') + const dpi = 300 + // 创建 PDF 实例 + const pdf = new jspdf.jsPDF({ + orientation: 'landscape', + unit: 'px', + format: [1012, 648] + }); + //var encrypt = new JSEncrypt(); //encrypt.setPublicKey(`-----BEGIN PUBLIC KEY----- //MIGdMA0GCSqGSIb3DQEBAQUAA4GLADCBhwKBgQDAbKQ46WevL9PapJ+AlZqSzczkTovu7STH @@ -575,6 +784,7 @@ 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' }, @@ -690,6 +900,7 @@ front_list = newFontList for (let item of front_list) { $('#text_font_family').append("') + $("#circle_text_font_family").append(""); $('#out_text_font_family').append("') $('#barcode_font_family').append("') $('#count_font_family').append("') @@ -906,10 +1117,36 @@ }) }) }) + // 导出文件 + async function savePdf(buffer) { + let fs = require('fs'); + // 弹出保存对话框 + const { canceled, filePath } = await dialog.showSaveDialog({ + title: '保存文件', + defaultPath: path.join(exePath, 'output.pdf'), // 默认路径 + filters: [{ name: 'PDF 文件', extensions: ['pdf'] }] // 文件过滤器 + }); + + if (canceled) { + console.log('用户取消了保存操作'); + return; + } + + // 将Buffer写入PNG文件到用户选择的路径 + fs.writeFile(filePath, buffer, (err) => { + if (err) { + console.error('写入文件失败:', err); + } else { + layer.msg(language_str("saveSucc") + filePath);//'保存成功至' + console.log('PNG文件已保存至:', filePath); + } + }); + } function display_func(img1, img2, img3) { $('#base_control').hide() $('#line_control').hide() $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -958,6 +1195,12 @@ 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') == '') || //黑填充 透明边框 @@ -1052,6 +1295,12 @@ 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') == '') || //黑填充 透明边框 @@ -1129,6 +1378,40 @@ h1 = document.body.clientHeight * 0.8 - 150 + 'px' w = ((document.body.clientHeight * 0.8 - 150) / 0.62548 + 40) / 0.94 } + let fs = require('fs'); + const Buffer = require('buffer').Buffer; + const buffer3 = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64'); + const printPath3 = path.join(exePath, 'print3.png'); + fs.writeFileSync(printPath3, buffer3); + const buffer4 = Buffer.from(url3.replace(/^data:image\/\w+;base64,/, ""), 'base64'); + const printPath4 = path.join(exePath, 'print4.png'); + fs.writeFileSync(printPath4, buffer4); + if ((objs1.length != 0) & (objs2.length == 0)) { + //只有正面 + let img = new Image() + img.src = printPath3 + + pdf.addImage(img, 'JPEG', 0, 0, 1012, 648) + } else if ((objs1.length == 0) & (objs2.length != 0)) { + //只有背面 + let img = new Image() + img.src = printPath4 + + pdf.addImage(img, 'JPEG', 0, 0, 1012, 648) + } else { + let img = new Image() + img.src = printPath3 + + pdf.addImage(img, 'JPEG', 0, 0, 1012, 648) + + pdf.addPage() + let img2 = new Image() + img2.src = printPath4 + pdf.addImage(img2, 'JPEG', 0, 0, 1012, 648) + } + + var pdfBlob = pdf.output('blob') + var pdfBuffer = pdf.output('arraybuffer') layer.open({ type: 1, area: [w, h], @@ -1138,13 +1421,13 @@
- +
- +
@@ -1153,312 +1436,10 @@
`, btn: [language_str('output'), '打印'], //'导出' btn1: function (index, layero) { - let op = { frontColorPic: '', backColorPic: '', frontBlackPic: '', backBlackPic: '', frontData: [], backData: [], flag: 1, frontDisplayPic: url3, backDisplayPic: url4 } - if ((objs1.length != 0) & (objs2.length == 0)) { - op.flag = 2 - } else if ((objs1.length == 0) & (objs2.length != 0)) { - op.flag = 3 - } - op.frontColorPic = desEncrypt(url1) - op.backColorPic = desEncrypt(url2) - //op.frontBlPic = url5; - //op.backBlPic = url6; - op.frontBlackPic = desEncrypt(url5) - op.backBlackPic = desEncrypt(url6) - for (let item of _objs1) { - let idx = getIndex(item, canvas1) - if (idx == 0) continue //background-image - let type = objs1[idx - 1].type - if (type == 2) { - //out_pic - let xy = getAbsoluteXY(item) - op.frontData.push({ - type: 1, - name: objs1[idx - 1].name, - FontColor: objs1[idx - 1].black ? '#000000' : '@', - transparency: item.get('opacity'), - x: parseInt((xy[0] - background_image1.left).toFixed(0)), - y: parseInt((xy[1] - background_image1.top).toFixed(0)), - h: parseInt((item.get('scaleY') * item.get('height')).toFixed(0)), - w: parseInt((item.get('scaleX') * item.get('width')).toFixed(0)), - rotate: parseInt(item.get('angle').toFixed(0)) - }) - } else if (type == 3) { - //text - 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 == 4) { - //out_text - let xy = getAbsoluteXY(item) - console.log('out-text: ', item.get('text'), xy) - console.log(background_image1.left, background_image1.top) - 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)) - }) - } 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), - HideText: objs1[idx - 1].show, - FontFamily: objs1[idx - 1].font, - DefaultText: objs1[idx - 1].val, - 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 - 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 == 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)) - }) - } else if (type == 8) { - //二维码 - let xy = getAbsoluteXY(item) - op.backData.push({ - type: 4, - name: objs2[idx - 1].name, - color: 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, - FontSize: parseInt(objs2[idx - 1].fontSize), - HideText: objs1[idx - 1].show, - FontFamily: objs2[idx - 1].font, - DefaultText: objs1[idx - 1].val, - color: 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) - /* - dialog.showSaveDialog({ - title:language_str("saveFile"), - filters: [ - { name: 'CS File Type', extensions: ['cs'] }, - ] - }).then(result=>{ - if(result.filePath.substring(result.filePath.length-5).indexOf('.') == -1){ - result.filePath += '.cs'; - } - let fs = require('fs') - fs.writeFileSync(result.filePath,JSON.stringify(op)) - }).catch(err=>{ - console.log() - }) - */ - //return false 开启该代码可禁止点击该按钮关闭 + savePdf(Buffer.from(pdfBuffer)) }, btn2: function () { - var pdf = jspdf.jsPDF({ - orientation: 'landscape', - unit: 'px', - format: [1012, 648] - }) - - if ((objs1.length != 0) & (objs2.length == 0)) { - //只有正面 - let img = new Image() - img.src = url3 - - pdf.addImage(img, 'JPEG', 0, 0, 1012, 648) - } else if ((objs1.length == 0) & (objs2.length != 0)) { - //只有背面 - let img = new Image() - img.src = url3 - - pdf.addImage(img, 'JPEG', 0, 0, 1012, 648) - } else { - let img = new Image() - img.src = url3 - - pdf.addImage(img, 'JPEG', 0, 0, 1012, 648) - - pdf.addPage() - let img2 = new Image() - img2.src = url4 - pdf.addImage(img2, 'JPEG', 0, 0, 1012, 648) - } - - var pdfDataUri = pdf.output('datauristring').replace('data:application/pdf;filename=generated.pdf;base64,', '') - - // 使用 printJS 打印 PDF - //ipcRenderer.send('print-pdf', pdfDataUri); - //return; - // var pdfDataUrl = pdf.output('dataurlstring').replace("data:application/pdf;filename=generated.pdf;base64,", ""); - // console.log(pdfDataUrl) - // 使用printJS打印PDF - // printJS({ - // printable: pdfDataUrl, - // type: 'pdf', - // base64: true - // }); - printJS({ printable: pdfDataUri, type: 'pdf', base64: true }) + printJS({ printable: URL.createObjectURL(pdfBlob), type: 'pdf', onPrintDialogClose: () => URL.revokeObjectURL(pdfBlob) }) } }) } @@ -1476,6 +1457,7 @@ $('#base_control').hide() $('#line_control').hide() $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -1525,6 +1507,12 @@ 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') == '') || //黑填充 透明边框 @@ -1615,6 +1603,12 @@ 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') == '') || //黑填充 透明边框 @@ -1955,6 +1949,7 @@ $('#base_control').hide() $('#line_control').hide() $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -2004,6 +1999,12 @@ if ( idx != 0 && ((objs1[idx - 1].type == 3 && (item.get('fill') == '#000000' || (item.get('fill') == '#ffffff' && false))) || + ( + objs2[idx - 1].type ==11 + && + (item.get("fill") == "#000000" || (item.get("fill") == "#ffffff" && false)) + //圆形文字 && 黑色 + ) || //文字 && 黑色 (objs1[idx - 1].type == 5 && //矩形 (((item.get('fill') == '#000000' || item.get('fill') == '#ffffff') && item.get('stroke') == '') || //黑填充 透明边框 @@ -2093,6 +2094,12 @@ 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') == '') || //黑填充 透明边框 @@ -2558,7 +2565,7 @@ .showOpenDialog({ title: language_str('selectPic'), //请选择图片 buttonLabel: language_str('comf'), //"确认" - filters: [{ name: 'Image File Type', extensions: ['png', 'jpg'] }] + filters: [{ name: 'Image File Type', extensions: ['png', 'jpg', 'jpeg'] }] }) .then((result) => { if (result.canceled) return @@ -2573,6 +2580,7 @@ $('#addOutPic').css('background-color', '') $('#addText').css('background-color', '') + $("#addCircleText").css("background-color", ""); $('#addOutText').css('background-color', '') $('#addRect').css('background-color', '') $('#addCircle').css('background-color', '') @@ -2600,6 +2608,7 @@ $('#addPic').css('background-color', '') $('#addText').css('background-color', '') + $("#addCircleText").css("background-color", ""); $('#addOutText').css('background-color', '') $('#addRect').css('background-color', '') $('#addCircle').css('background-color', '') @@ -2615,6 +2624,7 @@ $('#addPic').css('background-color', '') $('#addOutPic').css('background-color', '') + $("#addCircleText").css("background-color", ""); $('#addOutText').css('background-color', '') $('#addRect').css('background-color', '') $('#addCircle').css('background-color', '') @@ -2624,6 +2634,22 @@ $('#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') @@ -2631,6 +2657,7 @@ $('#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', '') @@ -2646,6 +2673,7 @@ $('#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', '') @@ -2661,6 +2689,7 @@ $('#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', '') @@ -2676,6 +2705,7 @@ $('#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', '') @@ -2691,6 +2721,7 @@ $('#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', '') @@ -2706,6 +2737,7 @@ $('#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', '') @@ -2721,6 +2753,7 @@ $('#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', '') @@ -2762,6 +2795,7 @@ $('#line_control').hide() $('#base_control').hide() $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -2791,6 +2825,7 @@ $('#line_control').hide() $('#base_control').hide() $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -3118,6 +3153,7 @@ $('#base_control').hide() $('#line_control').hide() $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -3151,6 +3187,7 @@ $('#base_control').hide() $('#line_control').hide() $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -3233,6 +3270,32 @@ 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_text_italics').click(function () { if ($(this).hasClass('ui-radio-acitve')) { //已选 @@ -3764,7 +3827,7 @@ let j = JSON.parse(fsData.toString()) let type = j.soonType ? j.soonType : j.backBlackPic ? 2 : 1; if (type == 1) { - ipcRenderer.send('open-design-page', $(this).attr("data"), type); + ipcRenderer.send('open-design-page', openAs.name, type); return } let left = background_image.left @@ -4109,6 +4172,7 @@ //透明度 $('#pic_control').show() + $("#set_bg").show(); pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100) let idx = getIndex(canvas.getActiveObject()) @@ -4152,6 +4216,7 @@ // $("#out_pic_black").prop("checked", objs[idx-1].black ? 'checked' : ''); $('#pic_control').hide() + $("#set_bg").hide(); $('#text_control').hide() $('#out_text_control').hide() $('#rect_control').hide() @@ -4190,7 +4255,9 @@ $('#text_control').show() $('#text_color').val(canvas.getActiveObject().get('fill')) $('#text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor')) - $('#text_size').val(canvas.getActiveObject().get('fontSize')) + 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')) @@ -4215,6 +4282,7 @@ $('#text_linethrough').removeClass('ui-radio-acitve') } $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#out_text_control').hide() $('#rect_control').hide() @@ -4224,6 +4292,108 @@ $('#qrcode_Controll').hide() $('#barcode_controll').hide() } + function getDisdance(x1, y1, x2, y2) { + var dx = Math.abs(x2 - x1); // 计算x轴上的距离差，并取绝对值 + var dy = Math.abs(y2 - y1); // 计算y轴上的距离差，并取绝对值 + var distance = Math.sqrt(dx * dx + dy * dy); // 应用勾股定理计算距离 + return distance; + } + function getDeg(pointer) { + // 计算点击位置与画布中心的坐标差 + var centerX = canvas.width / 2; + var centerY = canvas.height / 2; + var mouseX = pointer.x; + var mouseY = pointer.y; + var dx = mouseX - centerX; + var dy = mouseY - centerY; + // 计算旋转角度（弧度） + var angleRad = Math.atan2(dy, dx); + // 将角度转换为度数 + var angleDeg = angleRad * (180/Math.PI); + if (angleDeg < 0) { + angleDeg += 360; + } + angleDeg += 90 + return angleDeg + } + function addCircleText(pointer) { + let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2) + let angleDeg = getDeg(pointer) + let text = new fabric.CurvedText('Circle TEXT', {//源：圆形文本 + left: pointer.x, + top: pointer.y, + fill: "#000000", + textBackgroundColor: "", + fontStyle: "normal", + fontWeight: "normal", + diameter: distance*2, + fontSize: 30, + underline: false, + linethrough: false, + lockScalingX: true, + lockScalingY: true, + fontFamily: 'Arial', + originX: 'center', + originY: 'center', + angle: angleDeg, + flipped: pointer.y > canvas.height/2 ? true : false + }); + // distance = getDisdance(pointer.x+text.width/2, pointer.y, canvas.width/2,canvas.height/2) + // text.set({diameter: distance*2}) + text.setControlVisible("ml", false); + text.setControlVisible("mt", false); + text.setControlVisible("mr", false); + text.setControlVisible("mb", false); + canvas.add(text); + objs.push({ type: 11, black: false }); + canvas.renderAll(); + updateList(); + recordState(); + } + function selectCircleText() { + console.log(canvas.getActiveObject().get("text")) + $("#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_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', { @@ -4270,7 +4440,9 @@ $('#out_text_control').show() $('#out_text_color').val(canvas.getActiveObject().get('fill')) $('#out_text_text').val(canvas.getActiveObject().get('text')) - $('#out_text_size').val(canvas.getActiveObject().get('fontSize')) + 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) @@ -4300,6 +4472,7 @@ } $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#rect_control').hide() @@ -4313,9 +4486,9 @@ let rect = new fabric.Rect({ left: pointer.x, top: pointer.y, - fill: '#006834', - stroke: '#416666', - strokeWidth: 0, + fill: '', + stroke: "#ff0000", + strokeWidth: 3, width: 100, height: 100 }) @@ -4336,6 +4509,7 @@ let a = canvas.getActiveObject().getCoords() console.log(getCoordsMinX(a)) $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -4350,9 +4524,9 @@ left: pointer.x, top: pointer.y, fill: '', - stroke: '#006834', + stroke: '#ff0000', strokeWidth: 3, - radius: 50, + radius: 100, strokeUniform: true }) canvas.add(circle) @@ -4370,6 +4544,7 @@ $('#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() $('#out_text_control').hide() @@ -4385,7 +4560,7 @@ top: pointer.y, stroke: '#ff0000', strokeWidth: 3, - strokeDashArray: [0, 0] + strokeDashArray: [0, 0], }) line.setControlVisible('tl', false) @@ -4411,6 +4586,7 @@ $('#text_h').val(canvas.getActiveObject().get('strokeWidth')) $('#pic_control').hide() + $("#set_bg").hide(); $('#out_pic_control').hide() $('#text_control').hide() $('#out_text_control').hide() @@ -4474,7 +4650,9 @@ let idx = getIndex(canvas.getActiveObject()) $('#barcode_field_name').val(objs[idx - 1].name) $('#barcode_font_family').val(objs[idx - 1].font) - $('#barcode_size').val(objs[idx - 1].fontSize) + 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() @@ -4511,7 +4689,9 @@ $('#counter_add').val(objs[idx - 1].add) $('#counter_color').val(canvas.getActiveObject().get('fill')) $('#count_font_family').val(canvas.getActiveObject().get('fontFamily')) - $('#count_size').val(canvas.getActiveObject().get('fontSize')) + 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() @@ -4586,6 +4766,9 @@ case 10: str = '
COUNTER_" + i + '
' + str break + case 11: + str = "
" + "CIRCLE_TEXT_" + i + "
" + str; + break; } i++ } @@ -4791,11 +4974,17 @@ recordState() }) }) - $('#qrcode_val').bind('input propertychange', function () { - let item = canvas.getActiveObject() - let idx = getIndex(item) - objs[idx - 1].val = $(this).val() - }) + $("#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) @@ -4830,27 +5019,72 @@ canvas.renderAll() recordState() }) - $('#text_size').bind('input propertychange', function () { - canvas.getActiveObject().set('fontSize', $('#text_size').val()) - $('#text_h').val(canvas.getActiveObject().get('height').toFixed(0)) - $('#text_w').val(canvas.getActiveObject().get('width').toFixed(0)) - 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_size').bind('input propertychange', function () { - canvas.getActiveObject().set('fontSize', $('#out_text_size').val()) - $('#text_h').val(canvas.getActiveObject().get('height').toFixed(0)) - $('#text_w').val(canvas.getActiveObject().get('width').toFixed(0)) - canvas.renderAll() - recordState() - }) + $("#out_text_size").bind('input propertychange', function () { + let val = 1 + if (parseFloat($("#out_text_size").val())) { + val = parseFloat($("#out_text_size").val()) + if (val < 1) { + val = 1 + } else if (val > dpi) { + val = dpi + } else if (val%0.5!==0) { + val = Math.round(val*2)/2 + } + + } + $("#out_text_size").val(val) + canvas.getActiveObject().set("fontSize", val*dpi/72); + $("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0)); + $("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0)); + canvas.renderAll(); + recordState(); + }) $('#out_text_text').bind('input propertychange', function () { - canvas.getActiveObject().set('text', $('#out_text_text').val()) + let val = $("#out_text_text").val().trim() + canvas.getActiveObject().set("text", ` ${val} `); canvas.renderAll() updateList() recordState() @@ -4930,12 +5164,25 @@ canvas.renderAll() recordState() }) - $('#count_size').bind('input propertychange', function () { - canvas.getActiveObject().set('fontSize', $('#count_size').val()) - $('#text_h').val(canvas.getActiveObject().get('height').toFixed(0)) - $('#text_w').val(canvas.getActiveObject().get('width').toFixed(0)) - 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()) @@ -4951,7 +5198,8 @@ recordState() }) $('#text_text').bind('input propertychange', function () { - canvas.getActiveObject().set('text', $('#text_text').val()) + let val = $("#text_text").val().trim() + canvas.getActiveObject().set("text", ` ${val} `); canvas.renderAll() updateList() recordState() @@ -4969,27 +5217,49 @@ recordState() }) }) - $('#barcode_show').click(function () { - let idx = getIndex(canvas.getActiveObject()) - if ($(this).prop('checked')) { - objs[idx - 1].show = true + $("#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 + objs[idx - 1].show = false; } - recordState() - }) - $('#barcode_size').bind('input propertychange', function () { - let item = canvas.getActiveObject() - let idx = getIndex(item) - objs[idx - 1].fontSize = $(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') + 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() - }) + 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()) @@ -5001,6 +5271,12 @@ 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 () { //语言选择 @@ -5202,6 +5478,13 @@ selectObject(select_obj, i) selectCounter(select_obj, i) break + case 11: + + $("#component_type").text(language_str("ctext"));//"圆形文字" + //console.log("圆形文字"); + selectObject(select_obj, i); + selectCircleText(select_obj, i); + break; } } else { //背景，收起对象属性 @@ -5227,9 +5510,24 @@ 'X: ' + (e.pointer.x - (width / 2 - (width / 2 - background_image.left) * zoom)).toFixed(0) + ' Y: ' + (e.pointer.y - (height / 2 - (height / 2 - background_image.top) * zoom)).toFixed(0) ) }) - canvas1.on('object:moving', function (e) { - updateControls() - }) + canvas1.on("object:moving", function (e) { + let obj = canvas.getActiveObject() + if (objs[getIndex(e.target) - 1].type ===11) { + let pointer = { + x: obj.left, + y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2 + } + console.log(obj) + let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2) + let angleDeg = getDeg(pointer) + let flipped = pointer.y > canvas.height/2 ? true : false + obj.set("diameter", distance*2); + // obj.set("angle", angleDeg); + obj.set("flipped", flipped); + // canvas.renderAll(); + } + updateControls(); + }); canvas1.on('object:scaling', function (event) { //if(objs[getIndex(event.target) - 1].type == 5 || objs[getIndex(event.target) - 1].type == 6){ // //canvas.getActiveObject().set("width", canvas.getActiveObject().get("width") * canvas.getActiveObject().get("scaleX")); @@ -5333,6 +5631,13 @@ selectObject(select_obj, i) selectCounter(select_obj, i) break + case 11: + + $("#component_type").text(language_str("ctext"));//"圆形文字" + //console.log("圆形文字"); + selectObject(select_obj, i); + selectCircleText(select_obj, i); + break; } selectObj(i, true) //如果是点击画布中，则相应列表 } else { @@ -5368,7 +5673,7 @@ event.target.scaleX = 1 event.target.scaleY = 1 event.target._clearCache() - $('#text_size').val(event.target.fontSize) + // $('#text_size').val(event.target.fontSize) canvas1.renderAll() updateControls() } else if (objs[getIndex(event.target) - 1].type == 4) { @@ -5377,7 +5682,7 @@ event.target.scaleX = 1 event.target.scaleY = 1 event.target._clearCache() - $('#out_text_size').val(event.target.fontSize) + // $('#out_text_size').val(event.target.fontSize) canvas1.renderAll() } else if (objs[getIndex(event.target) - 1].type == 10) { event.target.fontSize *= event.target.scaleX @@ -5385,7 +5690,7 @@ event.target.scaleX = 1 event.target.scaleY = 1 event.target._clearCache() - $('#count_size').val(event.target.fontSize) + // $('#count_size').val(event.target.fontSize) canvas1.renderAll() } else if (objs[getIndex(event.target) - 1].type == 5) { canvas1.getActiveObject().set('width', canvas1.getActiveObject().get('width') * canvas1.getActiveObject().get('scaleX')) @@ -5468,6 +5773,13 @@ background_image.hoverCursor = 'default' $('#addCounter').css('background-color', '') break + case 11: + addCircleText(e.pointer); + addState = 0; + background_image.hoverCursor = "default"; + canvas1.renderAll(); + $("#addCircleText").css("background-color", ""); + break; } }) canvas1.on('text:changed', (e) => { @@ -5499,9 +5811,24 @@ canvas2.on('mouse:move', (e) => { $('#posText').text('X: ' + (e.pointer.x - background_image.left).toFixed(0) + ' Y: ' + (e.pointer.y - background_image.top).toFixed(0)) }) - canvas2.on('object:moving', function (e) { - updateControls() - }) + canvas2.on("object:moving", function (e) { + let obj = canvas.getActiveObject() + if (objs[getIndex(e.target) - 1].type ===11) { + let pointer = { + x: obj.left, + y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2 + } + console.log(obj) + let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2) + let angleDeg = getDeg(pointer) + let flipped = pointer.y > canvas.height/2 ? true : false + obj.set("diameter", distance*2); + // obj.set("angle", angleDeg); + obj.set("flipped", flipped); + // canvas.renderAll(); + } + updateControls(); + }); canvas2.on('object:scaling', function (e) { updateControls() }) @@ -5594,6 +5921,13 @@ selectObject(select_obj, i) selectCounter(select_obj, i) break + case 11: + + $("#component_type").text(language_str("ctext"));//"圆形文字" + //console.log("圆形文字"); + selectObject(select_obj, i); + selectCircleText(select_obj, i); + break; } selectObj(i, true) //如果是点击画布中，则相应列表 } else { @@ -5623,7 +5957,7 @@ event.target.scaleX = 1 event.target.scaleY = 1 event.target._clearCache() - $('#text_size').val(event.target.fontSize) + // $('#text_size').val(event.target.fontSize) canvas2.renderAll() } else if (objs[getIndex(event.target) - 1].type == 4) { event.target.fontSize *= event.target.scaleX @@ -5631,7 +5965,7 @@ event.target.scaleX = 1 event.target.scaleY = 1 event.target._clearCache() - $('#out_text_size').val(event.target.fontSize) + // $('#out_text_size').val(event.target.fontSize) canvas2.renderAll() } else if (objs[getIndex(event.target) - 1].type == 10) { event.target.fontSize *= event.target.scaleX @@ -5639,7 +5973,7 @@ event.target.scaleX = 1 event.target.scaleY = 1 event.target._clearCache() - $('#count_size').val(event.target.fontSize) + // $('#count_size').val(event.target.fontSize) canvas2.renderAll() } else if (objs[getIndex(event.target) - 1].type == 5) { canvas2.getActiveObject().set('width', canvas2.getActiveObject().get('width') * canvas2.getActiveObject().get('scaleX')) @@ -5724,9 +6058,33 @@ canvas2.renderAll() $('#addCounter').css('background-color', '') break + case 11: + addCircleText(e.pointer); + addState = 0; + background_image.hoverCursor = "default"; + canvas2.renderAll(); + $("#addCircleText").css("background-color", ""); + break; } }) - + var circle_text_size = slider.render({ + elem: '#circle_text_size', + min: 10, + max: 120 + , change: function (value) { + canvas.getActiveObject().set("fontSize", value); + canvas.renderAll(); + } + }); + var circle_text_diameter = slider.render({ + elem: '#circle_text_diameter', + min: 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) { diff --git a/output.pdf b/output.pdf new file mode 100644 index 0000000..f0f56b0 Binary files /dev/null and b/output.pdf differ diff --git a/print.png b/print.png index 7f95903..37ab2ed 100644 Binary files a/print.png and b/print.png differ diff --git a/print3.png b/print3.png new file mode 100644 index 0000000..37ab2ed Binary files /dev/null and b/print3.png differ diff --git a/print4.png b/print4.png new file mode 100644 index 0000000..37ab2ed Binary files /dev/null and b/print4.png differ