{{ $t('exportModel.SR') }}
-
{{ $t('exportModel.requiresCredits') }}
+
{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}
@@ -238,7 +248,7 @@
-->
2
4
-
8
+
{{ $t('exportModel.Cancel') }}
-
OK
+
OK
@@ -349,20 +359,17 @@ export default defineComponent({
isDrawingMode: false, // 开启绘图模式
});
brushIndicator = clearBrushIndicator()
-
- JSchangeType(canvas,'init')
canvasOnDrop()//开启鼠标到画布事件
setRemoveImage()//设置元素删除
canvas.on("object:modified", ()=>{
updateCanvasState()
});
canvas.preserveObjectStacking = true;
- console.log(canvas.wrapperEl);
//鼠标移动
// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
// canvas.wrapperEl.onmouseout = clearCanvasKeyDown;//document上添加按下和抬起事件
- canvas.on("mouse:over", event =>setCanvasKeyDown());//document上添加按下和抬起事件
- canvas.on("mouse:out", event =>clearCanvasKeyDown(e));//document上添加按下和抬起事件
+ canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
+ canvas.on("mouse:out", event =>clearCanvasKeyDown(event));//document上添加按下和抬起事件
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on("mouse:out", event=>setCanvasOut(event));
@@ -376,6 +383,8 @@ export default defineComponent({
// obj.target.cornerSize = 10
// obj.target.transparentCorners = false
// });
+ initAligningGuidelines(canvas,true)
+ JSchangeType(canvas,'init')
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
@@ -502,6 +511,7 @@ export default defineComponent({
if(driver__.value.driver){
driverObj__.moveNext()
}
+
});
};
@@ -888,14 +898,15 @@ export default defineComponent({
}
//撤回
let historyState = (str)=> {
- if(str == 'reverse' && reverseCanvasState.value.length > 0){
- canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+ if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
let obj = reverseCanvasState.value.pop()
+ // canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
+ canvasState.value = obj
normalCanvasState.value.push(obj);
}else if(str == '' && normalCanvasState.value.length > 1){
let obj = normalCanvasState.value.pop()
- reverseCanvasState.value.push(obj);
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+ reverseCanvasState.value.push(obj);
isLoadCanvas = true;
}else{
return
@@ -923,8 +934,6 @@ export default defineComponent({
// 监听键盘的 keydown 和 keyup 事件
let keyDown = []
let canvasKeyDown = (event) => {
- console.log(123);
- console.log(event);
if(keyDown.indexOf(event.key)>-1){
}else{
keyDown.push(event.code)
@@ -949,28 +958,34 @@ export default defineComponent({
})
}
let setCanvasKeyDown = (event)=>{
- let e = event || window.event
- e.stopPropagation();
- document.addEventListener('keydown',canvasKeyDown,true);
- document.addEventListener('keyup', canvasKeyUp,true);
+ // let e = event || window.event
+ // e.stopPropagation();
+ document.addEventListener('keydown',canvasKeyDown);
+ document.addEventListener('keyup', canvasKeyUp);
}
let clearCanvasKeyDown = (pointer)=>{
- console.log(123222);
- var pointer = canvas.getPointer(options.e);
- var x = pointer.x;
- var y = pointer.y;
+ // var pointer = canvas.getPointer(pointer);
+ if(!pointer?.target){
+ document.removeEventListener('keydown',canvasKeyDown);
+ document.removeEventListener('keyup', canvasKeyUp);
+ }
+ // var x = pointer.x;
+ // var y = pointer.y;
// 检查是否鼠标离开了画布
- if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
- // 执行你的操作
- console.log('鼠标离开了画布');
- }
-
- document.removeEventListener('keydown',canvasKeyDown,true);
- document.removeEventListener('keyup', canvasKeyUp,true);
+// if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
+// // 执行你的操作
+// console.log('鼠标离开了画布');
+// }
+ // if(!x || !y){
+ // document.removeEventListener('keydown',canvasKeyDown);
+ // document.removeEventListener('keyup', canvasKeyUp);
+ // }
}
- let canvasPencilColor = ref('#000000')
- let canvasPencilWidth = ref(20)
+ let canvasPencilColor = ref('#000000')//画笔颜色
+ let canvasPencilWidth = ref(20)//画笔大小
+ let allSelectWidth = ref(-1)//多选或单选的宽度
+ let allSelect = ref([])//多选或单选的宽度
let setOperation = (str)=>{
operation.value = str
//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
@@ -978,23 +993,41 @@ export default defineComponent({
if(createPatterningIs){
canvas.remove(currentPatterning)
}
+ removeSetText()
+ initAligningGuidelines(canvas,false)
canvas.remove(polyLineBtn)
-
if(str == 'pencil'){
setPencil()
}else if(str == 'move'){
setMove()
- canvas.forEachObject((obj) =>obj.selectable = true);
JSchangeType(canvas,'init')
+ initAligningGuidelines(canvas,true)
+
}else if(str == 'texture'){
setTexture()
}else if(str == 'eraser'){
setEraser()
+ }else if(str == 'text'){
+ setText()
+ JSchangeType(canvas,'init')
}else{
canvas.forEachObject((obj) =>obj.selectable = false);
canvas.isDrawingMode = false
}
}
+ let _setAllSelectTime = null
+ let setAllSelectWidth = ()=>{
+ clearTimeout(_setAllSelectTime)
+ allSelect.value.forEach((item)=>{
+ // item.width = allSelectWidth.value
+ item.scaleX = allSelectWidth.value/item.width
+ item.scaleY = item.scaleX
+ item.setCoords()
+ })
+ _setAllSelectTime = setTimeout(() => {
+ updateCanvasState('')//加载完成后记录一下
+ }, 1500);
+ }
let _clipboard = null // 复制到的内容
let copy = () => {//复制
var activeObject = canvas.getActiveObject();
@@ -1091,7 +1124,7 @@ export default defineComponent({
radius:canvasPencilWidth.value/2,
fill: '#fff',
stroke: '#000',
- strokeWidth: 0,
+ strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
@@ -1192,6 +1225,50 @@ export default defineComponent({
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = canvasPencilWidth.value;
}
+ let setTextFun = (e)=>{
+ if(operation.value != 'text'){
+ return
+ }
+
+ var clickedObject = e.target;
+ if (clickedObject instanceof fabric.Textbox) {
+ }else{
+ var pointer = canvas.getPointer(e.pointer);
+ var x = pointer.x;
+ var y = pointer.y;
+ let textbox = new fabric.Textbox('#', {
+ left: x,
+ top: y,
+ width: 150,
+ fontSize: canvasPencilWidth.value,
+ fill:canvasPencilColor.value,
+
+ })
+ canvas.add(textbox)
+ canvas.renderAll();
+ textbox.enterEditing();
+ }
+
+ }
+ let setText = ()=>{
+ canvas.on('mouse:dblclick',setTextFun)
+ }
+ let removeSetText = ()=>{
+ canvas.off('mouse:dblclick',setTextFun)
+ }
+ // let setTextStyle = (x,y)=>{
+ // var group = new fabric.Group([rect.color, rect.text, rect.text1],{
+ // left,
+ // top,
+ // width: rect.width,
+ // fill: "rgb(255,255,255)",
+ // stroke: "#212121",
+ // strokeWidth: 1,
+ // });
+ // canvas.add(group);
+ // }
+
+
let setTimeOut = {
color:null,
width:null,
@@ -1263,7 +1340,6 @@ export default defineComponent({
}
let setCanvasOut = (event)=>{
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
- clearCanvasKeyDown()//鼠标移出关闭键盘事件
}
//设置再画布上按下
let setCanvasDown = (event)=>{
@@ -1325,7 +1401,16 @@ export default defineComponent({
}else{
// event.target && (event.target.bringToFront())//设置优先级
}
+ var selectedObjects = canvas.getActiveObjects();//获取多选选中的内容
+ if (selectedObjects.length >= 1) {
+ allSelect.value = selectedObjects
+ // allSelectWidth.value = 0
+ allSelectWidth.value = selectedObjects[0].width * selectedObjects[0].scaleX
+ }else{
+ allSelectWidth.value = -1
+ }
if(createPatterningIs){
+
switch (operation.value) {
case 'line':
currentPatterning.set({stroke: canvasPencilColor.value})
@@ -1354,12 +1439,12 @@ export default defineComponent({
}
}
let setHDExport = async ()=>{//获取选中内容的位置信息
- if(allBoardData.value.printboardFiles.length <= 0){
- message.info('Your print is empty')
- return
- }
+ // if(allBoardData.value.printboardFiles.length <= 0){
+ // message.info('Your print is empty')
+ // return
+ // }
if(credits.value < 30){
- message.info('Your points are less than one SR')
+ message.info( useI18.t('exportModel.jsContent3'))
// return
}
showSRExport.value = true
@@ -1456,18 +1541,18 @@ export default defineComponent({
let setExportSR = ()=>{
let arr = []
let data = []
- if(allExportSR.value.filter(item=> item.checked ).length <= 0){
- message.info('Your print is empty')
- return
- }
+ // if(allExportSR.value.filter(item=> item.checked ).length <= 0){
+ // message.info('Your print is empty')
+ // return
+ // }
if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
- message.info('Your points balance is insufficient')
+ message.info(useI18.t('exportModel.jsContent4'))
return
}
- allExportSR.value.forEach(async (item,index)=>{
- let obj = {}
- await new Promise((resolve,reject)=>{
- if(item.checked){
+ let allPromise = allExportSR.value.map(async (item,index)=>{
+ if(item.checked){
+ return await new Promise((resolve,reject)=>{
+ let obj = {}
obj = {
images:item.imgUrl,
scale: scaleSR.value,
@@ -1479,20 +1564,36 @@ export default defineComponent({
if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
arr.push(index)
}
+ resolve(img)
}
img.src = item.imgUrl
- }
- })
+ })
+ }else{
+ return
+ }
})
- if(arr.length > 0){
- let str = arr.join(',')
- message.info(`You selected the ${str} image and zoom ratio more than 4090,`)
- return
- }
- Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
- emit('setTask',rv)
- cancelSRExport()
+ Promise.all(allPromise)
+ .then(promiseArr => {
+ if(arr.length > 0){
+ let str = arr.join(',')
+ message.info(useI18.t('exportModel.jsContent5',{str:str}))
+ return
+ }
+ let aa = promiseArr.filter(item=> item == undefined)
+ if(aa.length == promiseArr.length){
+ message.info(useI18.t('exportModel.jsContent6'))
+
+ }else{
+ Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+ emit('setTask',rv)
+ cancelSRExport()
+ });
+ }
+
+ })
+ .catch(error => {
});
+
}
onMounted(() => {});
return {
@@ -1521,6 +1622,8 @@ export default defineComponent({
textureList,//材质列表
canvasPencilColor,//input选择颜色
canvasPencilWidth,//input选择宽度
+ setAllSelectWidth,//多选设置宽度
+ allSelectWidth,//多选设置宽度的值
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
setHDExport,//高清导出选择的图片
@@ -1827,10 +1930,11 @@ export default defineComponent({
margin-bottom: 2rem;
input{
position: absolute;
- top: 0rem;
- right: 0rem;
+ top: .5rem;
+ right: .5rem;
z-index: 2;
- height: 3rem;
+ height: 2rem;
+ width: 2rem;
}
}
img{
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index ad9f429a..01838094 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -43,17 +43,20 @@
-