整改design的js
This commit is contained in:
+84
-50
File diff suppressed because one or more lines are too long
+39
-29
File diff suppressed because one or more lines are too long
@@ -0,0 +1,164 @@
|
|||||||
|
// Fabric.js 扩展类
|
||||||
|
|
||||||
|
(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);
|
||||||
|
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
// 多语言支持模块
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 多语言切换
|
||||||
|
*/
|
||||||
|
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));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 多语言字符串获取
|
||||||
|
* @param {string} str - 字符串键
|
||||||
|
* @param {string} s_lan - 当前语言 ('zh', 'ozh', 'en')
|
||||||
|
*/
|
||||||
|
function language_str(str, s_lan) {
|
||||||
|
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" },
|
||||||
|
"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] ? t[str][s_lan] : str;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
langua_ge,
|
||||||
|
language_str
|
||||||
|
};
|
||||||
|
|
||||||
@@ -0,0 +1,212 @@
|
|||||||
|
// 公共工具函数模块
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DES加密函数
|
||||||
|
*/
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取URL参数
|
||||||
|
*/
|
||||||
|
function GetFile() {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
return params;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 日期格式化
|
||||||
|
*/
|
||||||
|
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")];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算两点之间的距离
|
||||||
|
*/
|
||||||
|
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, canvas) {
|
||||||
|
// 计算点击位置与画布中心的坐标差
|
||||||
|
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 checkName(name, objs1, objs2) {
|
||||||
|
//检查字段名是否重复了
|
||||||
|
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, objs1, objs2) {
|
||||||
|
//返回的是不重复的字段名
|
||||||
|
let num = (objs1.length + objs2.length) - 1;
|
||||||
|
do {
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
while (!checkName(pre_name + num, objs1, objs2));//重复了就再加1
|
||||||
|
return pre_name + num;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取对象在画布中的索引
|
||||||
|
*/
|
||||||
|
function getIndex(target, canvas, _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, canvas, objs) {
|
||||||
|
let temp_objs = canvas.getObjects();
|
||||||
|
let i = 0;
|
||||||
|
for (let res of temp_objs) {
|
||||||
|
if (target == res) {
|
||||||
|
return objs[i].type;
|
||||||
|
}
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取坐标的最小X值
|
||||||
|
*/
|
||||||
|
function getCoordsMinX(acoords) {
|
||||||
|
let x = acoords[0].x;
|
||||||
|
for (let item of acoords) {
|
||||||
|
if (item.x < x) {
|
||||||
|
x = item.x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return x;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取坐标的最大X值
|
||||||
|
*/
|
||||||
|
function getCoordsMaxX(acoords) {
|
||||||
|
let x = acoords[0].x;
|
||||||
|
for (let item of acoords) {
|
||||||
|
if (item.x > x) {
|
||||||
|
x = item.x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return x;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取坐标的最小Y值
|
||||||
|
*/
|
||||||
|
function getCoordsMinY(acoords) {
|
||||||
|
let y = acoords[0].y;
|
||||||
|
for (let item of acoords) {
|
||||||
|
if (item.y < y) {
|
||||||
|
y = item.y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return y;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取坐标的最大Y值
|
||||||
|
*/
|
||||||
|
function getCoordsMaxY(acoords) {
|
||||||
|
let y = acoords[0].y;
|
||||||
|
for (let item of acoords) {
|
||||||
|
if (item.y > y) {
|
||||||
|
y = item.y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return y;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
desEncrypt,
|
||||||
|
GetFile,
|
||||||
|
getDate,
|
||||||
|
getAbsoluteXY,
|
||||||
|
getDisdance,
|
||||||
|
getDeg,
|
||||||
|
checkName,
|
||||||
|
resName,
|
||||||
|
getIndex,
|
||||||
|
getType,
|
||||||
|
getCoordsMinX,
|
||||||
|
getCoordsMaxX,
|
||||||
|
getCoordsMinY,
|
||||||
|
getCoordsMaxY
|
||||||
|
};
|
||||||
|
|
||||||
+5781
File diff suppressed because one or more lines are too long
+227
-5688
File diff suppressed because one or more lines are too long
+2833
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+2092
File diff suppressed because one or more lines are too long
+6144
File diff suppressed because one or more lines are too long
+230
-6048
File diff suppressed because one or more lines are too long
+2749
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+3213
File diff suppressed because one or more lines are too long
+1
-1
@@ -98,7 +98,7 @@ layui.use(['layer', 'form', 'jquery'], function () {
|
|||||||
const soonData = await window.sysAPI.readJsonFile(item.path);
|
const soonData = await window.sysAPI.readJsonFile(item.path);
|
||||||
|
|
||||||
if (soonData) {
|
if (soonData) {
|
||||||
src = soonData.fp;
|
src = soonData.frontDisplayPic;
|
||||||
let fileType = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
|
let fileType = soonData.soonType ? soonData.soonType : (soonData.backBlackPic ? 2 : 1);
|
||||||
if (item.type != fileType) {
|
if (item.type != fileType) {
|
||||||
item.type = fileType;
|
item.type = fileType;
|
||||||
|
|||||||
Generated
-10883
File diff suppressed because it is too large
Load Diff
+3
-1
@@ -51,7 +51,6 @@
|
|||||||
"@electron/remote": "^2.0.8",
|
"@electron/remote": "^2.0.8",
|
||||||
"buffer": "^6.0.3",
|
"buffer": "^6.0.3",
|
||||||
"bytenode": "^1.3.4",
|
"bytenode": "^1.3.4",
|
||||||
"create-dmg": "^7.0.0",
|
|
||||||
"electron-squirrel-startup": "^1.0.1",
|
"electron-squirrel-startup": "^1.0.1",
|
||||||
"font-list": "^1.4.2",
|
"font-list": "^1.4.2",
|
||||||
"jr-qrcode": "^1.1.4",
|
"jr-qrcode": "^1.1.4",
|
||||||
@@ -59,5 +58,8 @@
|
|||||||
"less": "^4.1.2",
|
"less": "^4.1.2",
|
||||||
"less-loader": "^10.2.0",
|
"less-loader": "^10.2.0",
|
||||||
"save": "^2.9.0"
|
"save": "^2.9.0"
|
||||||
|
},
|
||||||
|
"optionalDependencies": {
|
||||||
|
"create-dmg": "^6.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user