aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新绘画功能

Browse Source
This commit is contained in:
X1627315083
2024-11-22 09:20:25 +08:00
parent fe3b89d615
commit 5d9dc7b77d
19 changed files with 3643 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -9,6 +9,7 @@
<title>AiDA</title>
<!-- <link href="https://fonts.font.im/css?family=Roboto:400,500,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
<!-- 字体css -->
<link rel="stylesheet" href="/css/googleapis.css">
<link rel="stylesheet" href="/css/roboto.css">
<link rel="stylesheet" href="/css/sloganFamily.css">

2
public/js/aligning_guidelines.js
View File

@@ -4,7 +4,7 @@
*
*/
var ctx,canvasAligning
function initAligningGuidelines(canvas,bor) {
function initAligningGuidelines(canvas,bor){
ctx = canvas.getSelectionContext()
canvasAligning = canvas
setCanvasAligning(bor)

209
public/js/fabric.brushes.js
View File

@@ -126,6 +126,40 @@ fabric.Point.prototype.normalize = function(thickness) {
* Convert a brush drawing on the upperCanvas to an image on the fabric canvas.
* This makes the drawing editable, it can be moved, rotated, scaled, skewed etc.
*/
fabric.BaseBrush.prototype.convertToPath = function() {
console.log(this.canvas.upperCanvasEl);
var pixelRatio = this.canvas.getRetinaScaling(),
c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
xy = fabric.util.trimCanvas(c),
path = this._points.map(arr => {
arr[1] = arr[1] / this.canvas.getZoom()
arr[2] = arr[2] / this.canvas.getZoom()
return arr.join(' ')
}).join(' '),
pathElemetn = new fabric.Path(path);
if(!xy){
return
}
let pointerX = this.canvas.viewportTransform[4];
let pointerY = this.canvas.viewportTransform[5];
pathElemetn.set({
strokeDashArray: [this._width*3, this._width*3],
strokeWidth: this._width,
stroke: 'black',
fill:'transparent',
}).setCoords();
let group = new fabric.Group([pathElemetn],{
left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
custom:{
dashed:true
}
})
this.canvas.add(group).clearContext(this.canvas.contextTop);
this.canvas.clearContext(this.canvas.contextTop);
}
fabric.BaseBrush.prototype.convertToImg = function() {
var pixelRatio = this.canvas.getRetinaScaling(),
c = fabric.util.copyCanvasElement(this.canvas.upperCanvasEl),
@@ -136,7 +170,12 @@ fabric.BaseBrush.prototype.convertToImg = function() {
}
let pointerX = this.canvas.viewportTransform[4];
let pointerY = this.canvas.viewportTransform[5];
img.set({left:(xy.x)/pixelRatio-pointerX,top:(xy.y)/pixelRatio-pointerY,'scaleX':1/pixelRatio,'scaleY':1/pixelRatio}).setCoords();
img.set({
left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
'scaleX':1/pixelRatio/this.canvas.getZoom(),
'scaleY':1/pixelRatio/this.canvas.getZoom()
}).setCoords();
this.canvas.add(img).clearContext(this.canvas.contextTop);
this.canvas.clearContext(this.canvas.contextTop);
}
@@ -234,8 +273,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this.canvas.contextTop.globalAlpha = this.opacity;
this._size = this.width / 2 + this._baseWidth;
this._drawn = false;
@@ -243,8 +282,8 @@ fabric.CrayonBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this.update(pointer);
this.draw(this.canvas.contextTop);
},
@@ -399,7 +438,6 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
initialize: function(canvas, opt) {
opt = opt || {};
this.canvas = canvas;
this.width = opt.width || this.width;
this.color = opt.color || this.color;
@@ -409,8 +447,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
},
_render: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
var len, i, point = this.setPointer(pointer),
subtractPoint = point.subtract(this._lastPoint),
distance = point.distanceFrom(this._lastPoint),
@@ -422,7 +460,7 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
}
if (distance > 30) {
// this.drawSplash(point, this._inkAmount);
this.drawSplash(point, this._inkAmount);
}
},
@@ -475,8 +513,8 @@ fabric.InkBrush = fabric.util.createClass(fabric.BaseBrush, {
},
_resetTip: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
var len, i, point = this.setPointer(pointer);
this._strokes = [];
@@ -510,8 +548,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
this._count = 0;
@@ -524,8 +562,8 @@ fabric.LongfurBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var i, dx, dy, d, size,
@@ -609,8 +647,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -619,8 +657,8 @@ fabric.WritingBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -680,8 +718,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -690,8 +728,8 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -702,6 +740,67 @@ fabric.MarkerBrush = fabric.util.createClass(fabric.BaseBrush, {
this.convertToImg();
}
}); // End MarkerBrush
/**
* test
* Based on code by Tennison Chan.
*/
fabric.Test = fabric.util.createClass(fabric.BaseBrush, {
color: '#000',
opacity: 1,
_points: [],
_width: 2,
initialize: function(canvas, opt) {
opt = opt || {};
this.canvas = canvas;
this._width = opt._width || this._width;
this.color = opt.color || this.color;
},
_render: function(pointer) {
var ctx, lineWidthDiff, i, len;
ctx = this.canvas.contextTop;
this._points.push(['L', pointer.x, pointer.y]);
// if(this._points.length % 10 < 5){
let points = this._points
ctx.beginPath();
ctx.moveTo(points[points.length - 2][1], points[points.length - 2][2]);
ctx.lineTo(points[points.length - 1][1], points[points.length - 1][2]);
ctx.stroke();
// }
},
onMouseDown: function(pointer) {
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = []
this._points.push(['M', pointer.x, pointer.y]);
var ctx = this.canvas.contextTop;
ctx.strokeStyle = 'rgba(' + 0 + ',' + 0 + ',' + 0 + ',' + 1 + ')';
ctx.lineWidth = this._width * this.canvas.getZoom();
ctx.lineJoin = ctx.lineCap = 'round';
},
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
onMouseUp: function() {
this._points.push(['Z']);
this.convertToPath();
}
}); // End test
/**
* MarkerBrush
* Based on code by Tennison Chan.
@@ -756,8 +855,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.strokeStyle = this.color;
this.canvas.contextTop.lineWidth = this._lineWidth;
@@ -766,8 +865,8 @@ fabric.MarkerBrush1 = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -833,8 +932,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this.canvas.contextTop.lineWidth = this._lineWidth;
this._size = this.width + this._baseWidth;
@@ -842,8 +941,8 @@ fabric.PenBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseMove: function(pointer) {
if (this.canvas._isCurrentlyDrawing) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._render(pointer);
}
},
@@ -900,8 +999,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
for (var i = 0; i < this._nrPainters; i++) {
this._painters.push({ dx:this.canvas.width / 2, dy:this.canvas.height / 2, ax:0, ay:0, div:.1, ease:Math.random() * .2 + .6 });
}
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
//ctx.globalCompositeOperation = 'source-over';
@@ -918,8 +1017,8 @@ fabric.RibbonBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
},
@@ -954,8 +1053,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
var ctx = this.canvas.contextTop,
@@ -967,8 +1066,8 @@ fabric.ShadedBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var ctx = this.canvas.contextTop,
@@ -1025,8 +1124,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseDown: function(pointer) {
this._count = 0;
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
var ctx = this.canvas.contextTop,
@@ -1037,8 +1136,8 @@ fabric.SketchyBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var i, dx, dy, d, factor = .3 * this.width,
@@ -1124,8 +1223,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
onMouseDown: function(pointer) {
this.canvas.contextTop.globalAlpha = this.opacity;
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._point = new fabric.Point(pointer.x, pointer.y);
this._lastPoint = this._point;
@@ -1138,8 +1237,8 @@ fabric.SpraypaintBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = this._point;
this._point = new fabric.Point(pointer.x, pointer.y);
},
@@ -1214,8 +1313,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
var ctx = this.canvas.contextTop,
color = fabric.util.colorValues(this.color),
bgColor = fabric.util.colorValues(this.bgColor);
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._lastPoint = pointer;
this._drawn = false;
@@ -1227,8 +1326,8 @@ fabric.SquaresBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
var ctx = this.canvas.contextTop,
dx = pointer.x - this._lastPoint.x,
dy = pointer.y - this._lastPoint.y,
@@ -1281,16 +1380,16 @@ fabric.WebBrush = fabric.util.createClass(fabric.BaseBrush, {
},
onMouseDown: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points = [pointer];
this._count = 0;
this._colorValues = fabric.util.colorValues(this.color);
},
onMouseMove: function(pointer) {
pointer.x = pointer.x + this.canvas.viewportTransform[4];
pointer.y = pointer.y + this.canvas.viewportTransform[5];
pointer.x = (pointer.x * this.canvas.getZoom()) + this.canvas.viewportTransform[4];
pointer.y = (pointer.y * this.canvas.getZoom()) + this.canvas.viewportTransform[5];
this._points.push(pointer);
var ctx = this.canvas.contextTop,

197
src/component/Canvas/argument.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div class="canvasArgument">
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Width') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
</div>
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Height') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.operation != 'eraser' &&
canvasGeneral.operation != 'texture' &&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div class="title">{{ $t('exportModel.Color') }}</div>
<input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
canvasGeneral.brushwork.value != 'RibbonBrush' &&
canvasGeneral.brushwork.value != 'LongfurBrush'&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
</div>
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
style="width: 12rem "
@change="canvasGeneral.brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
<img style="width: 100%;" :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'pencil' &&
canvasGeneral.operation != 'eraser'&&
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move'&&
canvasGeneral.operation != 'text'&&
canvasGeneral.operation != 'texture'&&
canvasGeneral.operation != ''&&
canvasGeneral.operation != 'zoomIn' &&
canvasGeneral.operation != 'zoomOut' &&
canvasGeneral.operation != 'dashedPencil' &&
canvasGeneral.operation != 'dashed'">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="leftAlign">
<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
</div>
</div>
<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="leftAlign">
<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
</div>
</div> -->
<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
style="flex: 1;width: 15rem;"
@change="canvasGeneral.setFontFamily"
:style="{'font-family':canvasGeneral.fontFamily}"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
export default defineComponent({
components:{},
setup(){
let testModal = ref(true)
let canvasGeneral:any = inject('canvasObj')
const data = reactive({
colorHistoryList:[],
operation:'',
})
const setOperation = (str:any)=>{
data.operation = str
}
const setOper = ()=>{
setOperation('')
}
document.addEventListener('click',setOper)
const closeModal = ()=>{
document.removeEventListener('click',setOper)
}
return {
canvasGeneral,
...toRefs(data),
testModal,
setOperation,
closeModal,
}
}
});
</script>
<style lang='less' scoped>
.canvasArgument{
display: flex;
flex-wrap: wrap;
height: 100%;
.label_item{
margin-right: 2rem;
position: relative;
display: flex;
align-items: center;
.leftAlign{
display: flex;
}
.labelHover_show{
position: absolute;
width: 100%;
height: 10rem;
top: 100%;
z-index: 2;
display: block;
border-radius: 4px;
border: 1px solid;
padding: .5rem 1rem;
background: #fff;
div{
width: 2rem;
height: 2rem;
margin-right: .5rem;
margin-bottom: .5rem;
display: inline-block;
cursor: pointer;
}
}
input{
height: 100%;
}
&.wH input{
width: 5rem;
}
.title{
margin-right: 1rem;
}
.icon-xiala{
cursor: pointer;
transform: rotate(0deg);
height: 4rem;
width: 4rem;
transition: all .3s;
line-height: 4rem;
text-align: center;
&.active{
transform: rotate(180deg);
}
}
}
.label_item:hover{
// .labelHover_show{
// display: flex;
// }
}
}
</style>

184
src/component/Canvas/canvasContent.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="canvasContent_box">
<div class="canvasContent" ref="canvasScaleDom">
<div v-if="isPresuppose" class="generalCanvas_center presuppose">
<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
</div>
<div v-else class="generalCanvas_center canvas" ref="canvasDom">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n'
export default defineComponent({
component:{},
setup(){
let {t} = useI18n()
let canvasType = inject('canvasType')
let canvasGeneral:any = inject('canvasObj')
const data:any = reactive({
canvasScaleDom:null,
canvasDom:null,
isPresuppose:false,
isShowMark:false,
pencilbtnStyle:{},
})
const createCanvas = (canvasSize:any)=>{
data.isPresuppose = false
nextTick(()=>{
canvasGeneral.canvasInit(data.canvasDom,canvasSize)
console.log(canvasGeneral);
})
}
const openMode = (data:any)=>{
let {yes,no} = data
console.log(yes,no);
Modal.confirm({
title: '是否栅格化',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
yes()
},
onCancel(){
no()
}
});
yes()
}
// canvasGeneral.openMode.fun = openMode
const setPresuppose = (presuppose:any)=>{
let canvasDomSize = {
width:data.canvasScaleDom.offsetWidth,
height:data.canvasScaleDom.offsetHeight,
}
let width,height
let scale = [0,0]
if(presuppose == '16/9'){
// scale[0] = 16
// scale[1] = 9
width = 1600
height = 900
}else if(presuppose == '1/1'){
// scale[0] = 1
// scale[1] = 1
width = 1000
height = 1000
}else if(presuppose == '9/16'){
// scale[0] = 9
// scale[1] = 16
width = 900
height = 1600
}
// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
// if(mbHeight < canvasDomSize.height){
// width = canvasDomSize.width
// height = mbHeight
// }else{
// width = canvasDomSize.height / scale[1] * scale[0]
// height = canvasDomSize.height
// }
let canvasSize = {width,height}
createCanvas(canvasSize)
}
onMounted(()=>{
if(canvasType == 'export'){
data.isPresuppose = true
}else{
createCanvas({})
}
})
return {
canvasGeneral,
...toRefs(data),
setPresuppose,
}
}
});
</script>
<style lang='less' scoped>
.canvasContent_box{
height: 100%;
width: 100%;
// padding: 2rem;
background: #e6e6e6;
.canvasContent{
height: 100%;
width: 100%;
position: relative;
}
}
.generalCanvas_center{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
&.canvas{
}
&.presuppose{
display: flex;
align-items: center;
justify-content: center;
> div{
border: 1rem solid #6b6b6b;
color: #6b6b6b;
display: flex;
margin-right: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 900;
cursor: pointer;
border-radius: 4px;
&:last-child{
margin-right: 0;
}
&.presuppose16-9{
height: calc(30rem / 16 * 9);
width: 30rem;
}
&.presuppose1-1{
height: 30rem;
width: 30rem;
}
&.presuppose9-16{
height: 30rem;
width: calc(30rem / 16 * 9);
}
}
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
:deep(.canvas-container){
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}
}
</style>

305
src/component/Canvas/detail.vue Normal file
View File

@@ -0,0 +1,305 @@
<template>
<div class="detail" ref="detailDom"
@mousemove="mousemove($event)"
@touchmove="touchmove($event)"
>
<div class="layer">
<div class="layer-item button" @click="canvasGeneral.createLayer">
新建图层
</div>
<div class="layer-item-box-scroll">
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
<div class="layer-item"
v-for="item,index in layerList"
:key="item"
:style="item?.style"
@click="canvasGeneral.selectLayer(item.id)"
@mousedown="mousedown($event,item,index)"
@touchstart="touchstart($event,item,index)"
@contextmenu="openMenu($event,item,index)"
:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
<i class="fi" :class="[(item.isShow)?'fi-rr-eye':'fi-rr-eye-crossed']" @click.stop="canvasGeneral.layerShowHide(item.id,item)"></i>
<img :src="item.img" alt="">
<div>
{{ item.name }}
</div>
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
</div>
</div>
</div>
</div>
<div class="layer-menu" :style="styleMenu">
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject,watch,computed} from 'vue'
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
component:{},
setup(){
let canvasGeneral:any = inject('canvasObj')
const data = reactive({
detailDom:null as any,
layerList:computed(()=>canvasGeneral.layer.list) as any,
styleMenu:{
left:0+'px',
top:0+'px',
display:'none',
},
itemMenu:{} as any,
})
watch(()=>canvasGeneral.layer.list.length, (newValue, oldValue) => {
let sortedArr = data.layerList.map((item:any) => ({ ...item })).sort((a:any, b:any) => b.index - a.index)
sortedArr.forEach((item:any,index:any)=>{
item.index = sortedArr.length - index
})
data.layerList.forEach((item:any) => {
//图层高度50px 下边距10px
sortedArr.forEach((sortedArrItem:any)=>{
if(item.id == sortedArrItem.id){
item.index = sortedArrItem.index
}
let style = {
top:(data.layerList.length - item.index) * 60 + 'px',
transition:'all .3s',
}
item.style = style
})
});
},{immediate:true});
const incident:any = reactive({
isDown:false,
selectStyleTop:null,
selectStyle:null,
downPoint:null,
select:null,
radius:25,
})
const openMenu = (event:any,item:any,index:number)=>{
if(event.preventDefault)event.preventDefault();
data.itemMenu = item;
data.itemMenu.index = index
let position = data.detailDom.getBoundingClientRect();
data.styleMenu = {
left:event.clientX - position.left+'px',
top:event.clientY - position.top+'px',
display:'block',
}
}
document.onclick = ()=>{
data.styleMenu.display = 'none'
data.itemMenu = {};
}
let mousedown = (event:any,item:any,index:number)=>{
if(event.button != 0)return
let e:any = getMousePosition(event,false)
mouseDownOperation(e,item,index)
}
let ipadDownTime:any = null
let touchstart = (event:any,item:any,index:number)=>{
let e:any = getMousePosition(event,true)
mouseDownOperation(e,item,index)
clearTimeout(ipadDownTime)
ipadDownTime = setTimeout(()=>{
openMenu(e,item,index)
},1000)
}
let mouseDownOperation = (e:any,item:any,index:number)=>{
incident.isDown = true
incident.selectStyleTop = item.style.top
incident.selectStyle = item.style
incident.selectStyle.transition = 'none'
incident.select = item
incident.downPoint = e.clientY
}
let mousemove = (event:any)=>{
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = (event:any)=>{
let e:any = getMousePosition(event,true)
clearTimeout(ipadDownTime)
if(data.styleMenu.display != 'none')data.styleMenu.display = 'none'
mouseMoveOperation(e)
}
let mouseMoveOperation = (e:any)=>{
if(incident.isDown){
let domTop = Number(incident.selectStyleTop.split('px')[0])
let gTop = domTop + (e.clientY - incident.downPoint)
if(gTop < 0){
gTop = 0
}
incident.select.style.top = gTop + 'px'
data.layerList.forEach((item:any,index:number) => {
let itemTop = Number(item.style.top.split('px')[0])
if(Math.abs(gTop - itemTop) < 30 && item.id != incident.select.id){
let itemIndex = item.index
// if(gTop - itemTop > 0){
// console.log('从下往上');
// }
// if(gTop - itemTop < 0){
// console.log('从上往下');
// }
item.index = incident.select.index
incident.select.index = itemIndex
}
})
sort(data.layerList,'move')
}
}
const mouseUp = ()=>{
if(data.styleMenu.display == 'none')clearTimeout(ipadDownTime)
if(incident.isDown){
if(incident.selectStyle)incident.selectStyle.transition = 'all .3s'
incident.selectStyleTop = null
incident.isDown = false
incident.selectStyle = null
incident.select = null
sort(data.layerList,'up')
}
}
document.onmouseup = mouseUp
document.ontouchend = mouseUp
//排序
let time:any = null
let sort = (list:any,str:string)=>{
clearTimeout(time)
// list = list.sort((a:any, b:any) =>{
// return b.index - a.index;
// });
list.forEach((item:any) => {
if(str == 'move'){
if(item.id != incident.select.id)item.style.top = (list.length - item.index) * 60 + 'px'
}else{
item.style.top = (list.length - item.index) * 60 + 'px'
}
});
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
}
return {
canvasGeneral,
...toRefs(data),
openMenu,
mousedown,
touchstart,
mousemove,
touchmove,
}
}
});
</script>
<style lang='less' scoped>
.detail{
width: 100%;
height: 100%;
padding: 1rem;
border: 1px solid #dcdfe6;
position: relative;
* {
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.layer{
display: flex;
flex-direction: column;
height: 100%;
.layer-button{
}
.layer-item{
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem 2rem;
border: 1px solid #e6e6e6;
margin-bottom: 10px;
height: 50px;
border-radius: 4px;
i{
font-size: 18px;
}
&.active{
background: #e6e6e6;
}
.noDelete{
background: #e6e6e6;
opacity: .4;
pointer-events: none;
}
&.button{
justify-content: center;
cursor: pointer;
}
img{
height: 100%;
width: 35px;
object-fit: contain;
}
div{
cursor: pointer;
}
&:last-child{
margin-bottom: 0;
}
}
.layer-item-box-scroll{
flex: 1;
overflow-y: auto;
.layer-item-box{
position: relative;
.layer-item{
position: absolute;
width: 100%;
}
}
}
}
.layer-menu{
position: absolute;
width: 60%;
line-height: 4rem;
background: #fff;
border-radius: 4px;
border: 1px solid;
overflow: hidden;
>div{
border-bottom: 1px solid;
padding: 0 2rem;
cursor: pointer;
}
>div:hover{
background: #e6e6e6;
}
>div:last-child{
border-bottom: none;
}
}
}
</style>

187
src/component/Canvas/index.vue
View File

@@ -0,0 +1,187 @@
<template>
<div class="generalCanvas">
<div class="argument-box">
<argument ref="argument" v-if="canvasObj.canvas"></argument>
</div>
<div class="canvasBox">
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
<div class="canvas">
<canvasContent ref="canvasContent"></canvasContent>
</div>
<div class="detail-box">
<detail ref="detail" v-if="canvasObj.canvas"></detail>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</template>
<script>
import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
import tool from "./tool.vue"
import argument from "./argument.vue"
import detail from "./detail.vue"
import canvasContent from "./canvasContent.vue"
import liquefaction from "@/component/modules/liquefaction.vue";
export default defineComponent({
components: {
tool,
argument,
detail,
canvasContent,
liquefaction,
},
setup(props,{emit}) {
const { t } = useI18n();
const store = useStore();
const isShowMark = ref(false)
const component = reactive({
argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
})
let liquefaction = ref(null)
let liquefactionData = ref()
let groupDashed = ref(null)//用来判断是否需要对group添加img
let canvasType = 'export'
let canvasObj = reactive(canvasGeneral)
provide('canvasType',canvasType)
provide('canvasObj',canvasObj)
provide('isShowMark',isShowMark)
const close = ()=>{
component.forEach((item)=>{
if(item.value.closeModal)item.value.closeModal()
})
}
let expoet = ()=>{
console.log( canvasObj.selectExport());
console.log( canvasObj.allExport());
}
const setLiquefaction = async ()=>{//进入液化页面
canvasObj.getLiquefactionImgObj().then((data)=>{
if(data?.img){
liquefactionData.value = data
liquefaction.value.init(data.img)
}else {
message.info(t('exportModel.jsContent6'))
return null;
}
})
}
const toolLiquefaction = ()=>{//工具点击按钮
setLiquefaction()
}
const submitLiquefaction = (rv)=>{//液化回参
canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
// liquefactionData.value.setSrc(rv, (value)=>{
// // liquefactionData.value.scaleToWidth(originalWidth);
// // liquefactionData.value.scaleToHeight(originalHeight);
// delete liquefactionData.value.minioUrl
// if(groupDashed.value && groupDashed.value._objects.length == 1){
// value.set({
// left:-groupDashed.value.width/2,
// top:-groupDashed.value.height/2,
// })
// groupDashed.value.insertAt(value)
// // canvasObj.addDashedImg(value)
// }
// canvasObj.canvas.renderAll();
// canvasObj.updateCanvasState()
// });
}
onMounted(() => {
});
onBeforeUnmount(()=>{
// canvasGeneral.canvasClear()
})
return {
isShowMark,
liquefaction,
canvasObj,
close,
expoet,
toolLiquefaction,
submitLiquefaction,
};
},
data(prop) {
return {
};
},
computed: {
},
watch: {
},
mounted() {},
methods: {
},
});
</script>
<style lang="less" scoped>
.generalCanvas{
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
.argument-box,
.canvasBox,
.detail-box{
:deep(i){
font-size: 2.5rem;
cursor: pointer;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .3s;
margin-bottom: .5rem;
&.active{
border: 1px solid;
border-radius: .4rem;
}
&.icon-xiala{
transform: rotate(-90deg);
}
&.icon-xialaActive{
transform: rotate(90deg);
}
}
}
.argument-box{
margin-left: 4rem;
height: 4rem;
margin-bottom: 1rem;
}
.canvasBox{
flex: 1;
overflow: hidden;
display: flex;
.canvas{
flex: 1;
overflow: hidden;
}
}
.detail-box{
width: 20%;
margin-left: 1rem;
}
}
</style>

48
src/component/Canvas/test.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<a-modal class="modal_component collection_modal Guide_1_2"
v-model:visible="testModal"
:footer="null"
width="78%"
:maskClosable="false"
:centered="true"
:closable="false"
wrapClassName="#app"
:keyboard="false"
>
<div class="collection_closeIcon closeIcon" >
<!-- <div class="header_right_block" @click.stop="">
<div class="header_cancel_button" >Cancel</div>
</div> -->
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
</div>
<canvasIndex></canvasIndex>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,nextTick} from 'vue'
import canvasIndex from './index.vue'
export default defineComponent({
components:{canvasIndex},
setup(){
let testModal = ref(true)
const init = ()=>{
testModal.value = true
}
const cancelDsign = ()=>{
testModal.value = false
}
return {
testModal,
init,
cancelDsign,
}
}
});
</script>
<style lang='less' scoped>
.box {
border: 1px solid #f00;
}
</style>

168
src/component/Canvas/tool.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<div class="canvasTool">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<div class="label_item uploadImage">
<i class="icon fi fi-br-upload" ></i>
<input type="file" @change="uploadImage">
</div>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
<div class="btnModal" v-show="isMove" :style="moveStyle">
<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
import {base64ToFile} from '@/tool/util'
import { Https } from "@/tool/https";
export default defineComponent({
component:{},
emits:['toolLiquefaction'],
setup(props,{emit}){
let canvasGeneral:any = inject('canvasObj')
let isShowMark:any = inject('isShowMark')
const data:any = reactive({
isMove:false,
moveStyle:{},
})
const uploadImage = (event:any)=>{
isShowMark.value = true
const file = event.target.files[0];
let input = event.target
setOperation('movePosition')
if (file) {
const reader = new FileReader();
reader.onload = (e:any) => {
let file = base64ToFile(e.target.result,'upload')
let formData = new FormData();
formData.append("file", file);
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
rv.imgUrl = rv.minioUrl
isShowMark.value = false
canvasGeneral.addImage(rv)
})
input.value = ''
};
reader.readAsDataURL(file);
}
}
const historyState = (str:any)=>{
canvasGeneral.historyState(str)
}
const setOperation = (str:any)=>{
canvasGeneral.setOperation(str)
}
const openMore = (e:any)=>{
data.isMove=!data.isMove
if(data.isMove){
let domPoint = e.target.getBoundingClientRect()
let domParentPoint = e.target.parentElement.getBoundingClientRect()
const left = domPoint.left - domParentPoint.left;
const top = domPoint.top - domParentPoint.top;
data.moveStyle.top = top + 'px'
data.moveStyle.left = left + domPoint.width + 2 + 'px'
}
}
const setMore = ()=>{
data.isMove = false
}
let setLiquefaction = ()=>{
emit('toolLiquefaction')
}
document.addEventListener('click',setMore)
const closeModal = ()=>{
document.removeEventListener('click',setMore)
}
return {
canvasGeneral,
...toRefs(data),
uploadImage,
historyState,
setOperation,
openMore,
closeModal,
setLiquefaction,
}
}
});
</script>
<style lang='less' scoped>
.canvasTool::-webkit-scrollbar{
display: none;
}
.canvasTool{
display: flex;
flex-direction: column;
position: relative;
align-items: center;
&.leftAlign{
justify-content: flex-start;
}
&.leftAlign{
justify-content: flex-start;
}
.uploadImage{
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
i{
zoom:.8;
}
input{
height: 0;
width: 0;
border: none;
}
}
.uploadImage{
position: relative;
input{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
}
.btnModal{
position: absolute;
z-index: 2;
background: #fff;
top: 0;
border: 1px solid;
display: flex;
padding: .5rem 1rem;
border-radius: 4px;
}
}
</style>

1
src/component/Detail/editFrontBack.vue
View File

@@ -211,7 +211,6 @@ export default defineComponent({
}
let setClone = ()=>{
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')

1
src/component/Events/eventsDetail.vue
View File

@@ -77,6 +77,7 @@ export default defineComponent({
}
let setBack = ()=>{
router.go(-1);
// router.push('/home/events')
}
let openButton = (data:any,index:number)=>{
if(filter.loadingShow[index]){

5
src/component/HomePage/ExportModel.vue
View File

@@ -711,11 +711,6 @@ export default defineComponent({
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
}
// imgWidth =
// (canvasWH.value.width -
// (likeDesign - 1) * 20) /
// likeDesign;
}
return imgWidth
}

61
src/component/LoginPage/googleLogin.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="Container">
<!-- 谷歌登录 -->
<div class="g_id_signin" id="g_id_signin"></div>
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
export default defineComponent({
name: "login",
setup() {
const handleCredentialResponse = async (response) => {
// 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
console.log(response);
let code = response.credential
console.log(code);
// await api.googleLogin(code);
}
onMounted(()=>{
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
// let GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
// 使用谷歌登录的api
const script = document.createElement("script");
script.src = "https://accounts.google.com/gsi/client"
document.body.appendChild(script);
window.addEventListener('load', () => {
window.google.accounts.id.initialize({
// 主要就是填写client_id
client_id: GOOGLE_CLIENT_ID,
auto_select: false,
callback: handleCredentialResponse,
context:"signin",
ux_mode:"popup",
itp_support:true,
});
window.google.accounts.id.renderButton(
document.getElementById("g_id_signin"),
{
type:"standard",
shape:"pill",
theme:"outline",
text:"signin_with",
size:"medium",
logo_alignment:"left",
}
);
})
})
return {
}
},
})
</script>
<style scoped>
.Container{
width: 45%;
}
</style>

4
src/component/LoginPage/verificationCodeInput.vue
View File

@@ -42,8 +42,8 @@ export default defineComponent({
cIndex() {
this.resetCaret();
},
lastCode(val) {
if (val) {
lastCode(newVal,oldVal) {
if (newVal && newVal != oldVal) {
this.$refs.input[this.ctSize - 1].blur();
this.sendCaptcha();
}

16
src/component/modules/liquefaction.vue
View File

@@ -98,10 +98,16 @@ export default defineComponent({
canvasImgData.width = img.width
canvasImgData.height = img.height
let canvasBox = document.querySelector('.liquefaction .liquefaction_canvas_box')
let width = canvasBox.offsetHeight / img.height * img.width
canvas = document.getElementById('c')
let scale = canvasBox.offsetWidth / img.width
let width = canvasBox.offsetWidth
let height = img.height * scale
if(height > canvasBox.offsetHeight){
height = canvasBox.offsetHeight
width = img.width / img.height * height
}
canvas.width = width
canvas.height = canvasBox.offsetHeight
canvas.height = height
let optfor = false
const context = canvas.getContext('2d');
context.drawImage(img, 1, 1, canvas.width, canvas.height);
@@ -351,7 +357,11 @@ export default defineComponent({
text-align: center;
// overflow-x: auto;
position: relative;
overflow-y: hidden;
// overflow-y: hidden;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
}
.liquefaction_parameter{
padding-top: 5rem;

46
src/tool/canvasDrawing.js
View File

@@ -32,10 +32,15 @@ function JSchangeType(canvas, val) {
}
}
//绘制直线
function JScanvasMouseDown(str,e, width,patterning) {//创建线
function JScanvasMouseDown(e, data) {//创建线
let downPoint = e.absolutePointer
let currentPatterning
switch (str) {
let fill = data?.fill || 'rgba(0, 0, 0, 0.2)'
let radius = data?.radius || 5
let width = data?.width || 0
let selectable = data?.selectable
let strokeDashArray = data?.strokeDashArray || [0,0]
switch (data.str) {
case 'rect':
let top = Math.min(downPoint.y)
let left = Math.min(downPoint.x)
@@ -44,9 +49,13 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
currentPatterning = new fabric.Rect({
top,
left,
fill: 'rgba(0, 0, 0, 0.2)',
rx:5,
ry:5,
fill: fill,
stroke:'#000',
strokeWidth:width,
strokeDashArray:strokeDashArray,
rx:radius,
ry:radius,
selectable,
})
break
case 'line':
@@ -55,7 +64,7 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
downPoint.x, downPoint.y // 结束点坐标
],
{
stroke: 'rgba(0, 0, 0, 0.2)', // 笔触颜色
stroke: fill, // 笔触颜色
strokeLineCap: 'round',
strokeWidth:Number(width),
}
@@ -66,9 +75,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
top: downPoint.y,
left: downPoint.x,
radius: 0,
fill: 'rgba(0, 0, 0, 0.2)',
fill: fill,
// fill: 'transparent',
// stroke: 'rgba(0, 0, 0, 0.2)'
// stroke: fill
})
break
case 'triangle':
@@ -77,9 +86,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
left: downPoint.x,
width: 0,
height: 0,
fill: 'rgba(0, 0, 0, 0.2)',
fill: fill,
// fill: 'transparent',
// stroke: 'rgba(0, 0, 0, 0.2)'
// stroke: fill
})
break
case 'ellipse':
@@ -88,9 +97,9 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
left: downPoint.x,
rx: 0,
ry: 0,
fill: 'rgba(0, 0, 0, 0.2)',
fill: fill,
// fill: 'transparent',
// stroke: 'rgba(0, 0, 0, 0.2)'
// stroke: fill
})
break
case 'fold':
@@ -99,7 +108,7 @@ function JScanvasMouseDown(str,e, width,patterning) {//创建线
{ x: downPoint.x, y: downPoint.y }
],{
fill: 'transparent',
stroke: 'rgba(0, 0, 0, 0.2)',
stroke: fill,
objectCaching: false,
strokeWidth:Number(width),
selection:false,
@@ -269,14 +278,15 @@ async function JSSetTexture(src,){
})
return img
}
function JSSetRemoveImage(fun){
let JSSetRemoveImage = (fun)=>{
const deleteIcon = cuowuImg
// 创建删除图片元素
const cornerSize = 24
let deleteImg = document.createElement('img')
deleteImg.src = deleteIcon
function renderIcon(icon) {
return function (ctx, left, top, styleOverride, fabricObject) {
var size = this.cornerSize;
let renderIcon = (icon) => {
return (ctx, left, top, styleOverride, fabricObject)=> {
var size = cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
@@ -292,7 +302,7 @@ function JSSetRemoveImage(fun){
cursorStyle: 'pointer',
mouseUpHandler:fun,
render: renderIcon(deleteImg),
cornerSize: 24
cornerSize: cornerSize
})
}
function JSSetGroup(data){

1914
src/tool/canvasGeneral.js
View File

File diff suppressed because it is too large Load Diff

5
src/views/HomeView/HomeView.vue
View File

@@ -218,8 +218,9 @@
<!-- design collection的进度蒙层 end-->
<affiche ref="affiche"></affiche>
<!-- <RobotAssist></RobotAssist> -->
</div>
<tesst></tesst>
</div>
</template>
<script lang="ts">
@@ -227,6 +228,7 @@ import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode}
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
// import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
import tesst from "@/component/Canvas/test.vue";
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import productImg from "@/component/HomePage/productImg.vue";
@@ -251,6 +253,7 @@ const FileSaver = require("file-saver");
export default defineComponent({
components: {
// HeaderComponent,
tesst,
CollectionModal,
NewCollectionReview,
DesignDetail,

406
src/views/LoginPage.vue
View File

@@ -11,7 +11,8 @@
<div class="login_type_list">
<div
:class="[
'login_type_item','username_login_item',
'login_type_item',
'username_login_item',
'login_active',
]"
>
@@ -20,7 +21,7 @@
</div>
<!-- 账号密码登录 start -->
<!-- v-show="loginType == 'username'" -->
<div >
<div>
<div class="login_form_content" :state="emailStap">
<div class="login_form_title">Name</div>
<input
@@ -43,9 +44,14 @@
v-model="password"
@keydown.enter="submitPerLogin()"
/>
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
<div
class="icon iconfont icon-yanjing_yincang_o password_show_icon"
@click="changePasswordType()"
></div>
</div>
<div class="login_form_title marign_top30">
Email
</div>
<div class="login_form_title marign_top30">Email</div>
<input
class="login_form_input"
placeholder="Enter your email address"
@@ -54,39 +60,23 @@
/>
<!-- 邮箱登录 start -->
<div class="login_form_email" :class="{active:emailStap===2}">
<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
<!-- <div v-show="emailStap === 1" class="forget_password_content">
<div class="forget_password_content_block" @click="changeLoginType('username')">
<span class="icon iconfont fi-br-arrow-left"></span
><span class="forget_password_content_title"
>Log on to AiDA</span
>
</div>
<div class="login_form_content">
<div class="login_form_title">Email</div>
<input
class="login_form_input"
placeholder="Enter your email address"
v-model="email"
@keydown.enter="emailNextStepFun()"
/>
</div>
<div
class="login_submit_button marign_top40"
@click="emailNextStepFun()"
class="login_form_email"
:class="{ active: emailStap === 2 }"
>
Sign In
</div>
</div> -->
<div v-show="emailStap === 2" class="email_last_step">
<div class="email_last_step_block" >
<div
v-show="emailStap === 2"
class="email_last_step"
>
<div class="email_last_step_block">
<span class="email_last_step_content"
>Verify with one-time verification code</span
>Verify with one-time verification
code</span
>
<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
<i
class="fi fi-br-cross email_last_step_block_icon"
@click="emailLastStepFun()"
></i>
</div>
<div class="email_last_step_bottom">
<div class="email_last_step_des">
@@ -94,20 +84,30 @@
Sent to {{ email }}
</div>
<div class="tip_content">
<span v-show="time">{{ time }}s</span>
<span v-show="!time" @click="emailNextStepFun()"
<span v-show="time"
>{{ time }}s</span
>
<span
v-show="!time"
@click="emailNextStepFun()"
>Resend</span
>
</div>
</div>
<VerificationCodeInput
:ct="emailCode"
@sendCaptcha="submitEmailLogin($event)"
@sendCaptcha="
submitEmailLogin($event)
"
></VerificationCodeInput>
<div class="email_last_step_des">
<div class="sent_email_content email_tip_content">
Please check the junk box if you haven't received verification code
<div
class="sent_email_content email_tip_content"
>
Please check the junk box if you
haven't received verification
code
</div>
</div>
</div>
@@ -116,26 +116,39 @@
</div>
<div class="login_form_title marign_top30">
<label :class="{active:emailStap == 2}">
<input :state="emailStap" type="checkbox" v-model="checked">
<span>I agree to all Term, Privacy Policy and Fees</span>
<label :class="{ active: emailStap == 2 }">
<input
:state="emailStap"
type="checkbox"
v-model="checked"
/>
<span
>I agree to all Term, Privacy Policy and
Fees</span
>
</label>
</div>
<div class="thirdPartyLogin marign_top30">
<googleLogin></googleLogin>
</div>
<div
class="login_submit_button marign_top40" :state="emailStap"
class="login_submit_button marign_top40"
:state="emailStap"
@click="submitPerLogin()"
>
Sign in
</div>
<div class="login_text" >
<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
<div class="login_text">
<div
class="forget_password_text"
@click="changeIsLogin(2)"
>
Forgot your password
</div>
</div>
</div>
<!-- 账号密码登录 end -->
</div>
<!-- 邮箱登录 end -->
@@ -149,7 +162,10 @@
<!-- 忘记密码 start -->
<div class="forget_password_content" v-else>
<div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
<div
class="forget_password_content_block"
@click="forgetPasswordLastStepFun()"
>
<!-- <span class="icon iconfont fi-br-arrow-left"></span
> -->
<i class="fi fi-br-arrow-left"></i>
@@ -215,48 +231,70 @@
</div>
</div>
<!-- 忘记密码 end -->
</div>
<div class="login_footer">
<div class="login_footer_item"><div class="login_footer_item_text">©2024 Code-Create Limited</div></div>
<div class="login_footer_item">
<div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-terms-and-conditions/')">Terms&Conditions</div>
<div class="login_footer_item_text">
©2024 Code-Create Limited
</div>
</div>
<div class="login_footer_item">
<div
class="login_footer_item_text footer_item_text_pointer"
@click="
turnToWindow(
'https://code-create.com.hk/aida-terms-and-conditions/'
)
"
>
Terms&Conditions
</div>
<div class="login_footer_line"></div>
<div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-subscription-agreement/')">Privacy Policy</div>
<div
class="login_footer_item_text footer_item_text_pointer"
@click="
turnToWindow(
'https://code-create.com.hk/aida-subscription-agreement/'
)
"
>
Privacy Policy
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref ,onMounted} from "vue";
import { defineComponent, ref, onMounted } from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie ,WriteCookie } from "@/tool/cookie";
import { setCookie, WriteCookie } from "@/tool/cookie";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import googleLogin from "@/component/LoginPage/googleLogin.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
const md5 = require("md5");
export default defineComponent({
components: {
VerificationCodeInput,
VerificationCodeInput,googleLogin
},
setup(){
let timer:any = 0;
const {locale} = useI18n()
setup() {
let timer: any = 0;
const { locale } = useI18n();
const store = useStore();
return{
return {
store,
timer,
locale
}
locale,
};
},
data() {
return {
checked:false,
checked: false,
isLogin: 1, //是否为登录 1-登录， 2-忘记密码
loginType: "username",
emailStap: 1, // 邮箱登录步骤
@@ -272,9 +310,9 @@ export default defineComponent({
newPassword: "", //新密码
isCheckRobot: false,
time: 60, //60秒倒计时
passwordType:'password',
userId:'',
loginTime:true
passwordType: "password",
userId: "",
loginTime: true,
};
},
methods: {
@@ -313,7 +351,7 @@ export default defineComponent({
if (rv) {
this.emailStap = 2;
this.time = 60;
this.emailCode = ["", "", "", "", "", ""]
this.emailCode = ["", "", "", "", "", ""];
this.createTimer();
}
}
@@ -323,12 +361,11 @@ export default defineComponent({
//邮箱登录的上一步
emailLastStepFun() {
this.emailStap = 1;
this.username = "",
this.password = "",
this.email = "";
this.checked=false,
this.loginType = "username",
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
(this.username = ""), (this.password = ""), (this.email = "");
(this.checked = false),
(this.loginType = "username"),
(this.emailCode = ["", "", "", "", "", ""]),
this.clearTimer();
},
//忘记密码的下一步
@@ -369,8 +406,8 @@ export default defineComponent({
let data = {
email: this.forgetPasswordEmail,
emailVerifyCode: emailVerifyCode,
password: '',
verifyEmail:true,
password: "",
verifyEmail: true,
};
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
(rv: any) => {
@@ -381,7 +418,6 @@ export default defineComponent({
}
}
);
},
//改变勾选是否是机器人
@@ -392,11 +428,13 @@ export default defineComponent({
//提交账号密码预先登录
submitPerLogin() {
//输入账号密码
if(this.emailStap>=2){
if (this.emailStap >= 2) {
return;
}else{
} else {
if (!this.username || !this.password) {
message.info("Please enter your account number or password");
message.info(
"Please enter your account number or password"
);
return;
}
//输入邮箱
@@ -411,46 +449,48 @@ export default defineComponent({
}
//判断是否同意隐私政策
if (!this.checked) {
message.info("Agree to all terms, privacy fees and policies");
message.info(
"Agree to all terms, privacy fees and policies"
);
return;
}
let data = {
password: md5(this.password + "abc"),
userName: this.username,
email: this.email,
operationType:"LOGIN",
ip:"",
operationType: "LOGIN",
ip: "",
};
// this.loginType = 'email'
if(this.loginTime){
this.loginTime = false
Https.axiosPost(Https.httpUrls.preLogin, data).then(
(rv: any) => {
if (this.loginTime) {
this.loginTime = false;
Https.axiosPost(Https.httpUrls.preLogin, data)
.then((rv: any) => {
// if (rv) {
// this.loginType = 'email'
// }
this.emailStap = 2;
if (rv) {
this.userId = rv.userId
this.loginType = 'email'
this.userId = rv.userId;
this.loginType = "email";
this.time = 60;
this.emailCode = ["", "", "", "", "", ""]
this.emailCode = ["", "", "", "", "", ""];
this.createTimer();
}
}
).catch(res=>{
})
.catch((res) => {
this.emailStap = 1;
});
setTimeout(() => {
this.loginTime = true
this.loginTime = true;
}, 2000);
}
}
},
changePasswordType(){
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
changePasswordType() {
this.passwordType =
this.passwordType === "password" ? "text" : "password";
},
//邮箱登录提交
@@ -459,50 +499,56 @@ export default defineComponent({
email: this.email,
emailVerifyCode: emailVerifyCode,
loginType: "EMAIL",
userId:this.userId
userId: this.userId,
};
Https.axiosPost(Https.httpUrls.accountLogin, data).then(
(rv: any) => {
Https.axiosPost(Https.httpUrls.accountLogin, data)
.then((rv: any) => {
if (rv) {
if(rv.systemUser == 4){
rv.systemUser = 1
if (rv.systemUser == 4) {
rv.systemUser = 1;
}
this.createTimer();
let isTest = rv.systemUser == 3?true:false
let isBeginner = rv.isBeginner == 1?true:false
let isTest = rv.systemUser == 3 ? true : false;
let isBeginner = rv.isBeginner == 1 ? true : false;
let token = rv.token;
setCookie("isMurmur", false);
setCookie("token", token);
setCookie("isTest", isTest);
setCookie("isBeginner", isBeginner);
setCookie("isBeginnerNum", 0);//从第一步开始，机器人开始的话就是从第二部开始
setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
setCookie("userInfo", JSON.stringify(rv));
this.store.commit("setSystemUser", rv.systemUser)
let obj:any = {
avatar : rv.avatar,
followeeCount : rv.followeeCount,
followerCount : rv.followerCount,
}
this.store.commit("setSystemUser", rv.systemUser);
let obj: any = {
avatar: rv.avatar,
followeeCount: rv.followeeCount,
followerCount: rv.followerCount,
};
this.store.commit("setUserInfo", obj)
if(rv.systemUser == 0){
this.turnToHomePage('/Square');
}else{
if(window.innerWidth < 768){
message.info("If you need to design, please log in using an iPad or computer.");
this.turnToHomePage('/Square');
}else{
this.turnToHomePage('/home');
this.store.commit("setUserInfo", obj);
if (rv.systemUser == 0) {
this.turnToHomePage("/Square");
} else {
if (window.innerWidth < 768) {
message.info(
"If you need to design, please log in using an iPad or computer."
);
this.turnToHomePage("/Square");
} else {
this.turnToHomePage("/home");
}
}
sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
sessionStorage.setItem('sessionId', randomNum);
sessionStorage.setItem('record', JSON.stringify([]))
sessionStorage.setItem(
"isTimeOne",
JSON.stringify(false)
); //是否需要公告 提示 弹窗
let randomNum: any =
Math.floor(Math.random() * 9000000000000000) +
1000000000000000;
sessionStorage.setItem("sessionId", randomNum);
sessionStorage.setItem("record", JSON.stringify([]));
}
}
).catch(res=>{
});
})
.catch((res) => {});
},
//修改密码提交
@@ -511,7 +557,7 @@ export default defineComponent({
email: this.forgetPasswordEmail,
emailVerifyCode: this.forgetEmailValue,
password: md5(this.newPassword + "abc"),
verifyEmail:false,
verifyEmail: false,
};
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
(rv: any) => {
@@ -542,24 +588,24 @@ export default defineComponent({
},
//跳转到首页
turnToHomePage(str:any) {
this.getLang()
turnToHomePage(str: any) {
this.getLang();
// this.$router.push("/home");
// console.log(window.location.search.substring(1));
this.store.commit("clearAllData");
this.store.commit("clearAllCollection");
this.store.commit("setAllBoardDataChoose",{});
this.store.commit("clearShowSketchboard",{});
this.store.commit("setAllBoardDataChoose", {});
this.store.commit("clearShowSketchboard", {});
this.$router.push(str);
},
//获取当前语言
getLang(){
let data ={}
getLang() {
let data = {};
Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
(rv: any) => {
if (rv) {
this.locale = rv
setLang(rv)
this.locale = rv;
setLang(rv);
}
}
);
@@ -585,14 +631,13 @@ export default defineComponent({
}
.login_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
// width: 60rem;
width: 150rem;
background: #FFFFFF;
background: #ffffff;
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
border-radius: 1rem;
padding: 3rem 6rem 6.5rem;
@@ -603,12 +648,12 @@ export default defineComponent({
@media (max-width: 768px) {
width: 100%;
}
.login_content_left{
.login_content_left {
width: 40%;
@media (max-width: 768px) {
width: 100%;
}
.login_form_email{
.login_form_email {
position: absolute;
left: 0;
width: 100%;
@@ -616,24 +661,24 @@ export default defineComponent({
top: 0;
background: #fff;
transform: scale(0);
transition: .3s all;
transition: 0.3s all;
border: 2px solid;
border-radius: 20px;
.email_last_step{
.email_last_step {
width: 100%;
height: 100%;
#app{
#app {
height: auto;
}
}
}
.active{
.active {
transform: scale(1);
}
}
.login_content_right{
.login_content_right {
width: 40%;
img{
img {
width: 100%;
}
}
@@ -645,7 +690,7 @@ export default defineComponent({
text-align: center;
font-size: 3.6rem;
font-weight: bold;
color: #D7D7D7;
color: #d7d7d7;
cursor: pointer;
height: 4rem;
line-height: 4rem;
@@ -663,17 +708,17 @@ export default defineComponent({
display: flex;
justify-content: space-between;
box-sizing: border-box;
label{
label {
display: flex;
span{
span {
font-size: 1.6rem;
margin-left: 10px;
font-weight: normal;
}
&.active{
pointer-events:none;
input{
pointer-events:none;
&.active {
pointer-events: none;
input {
pointer-events: none;
}
}
}
@@ -682,22 +727,22 @@ export default defineComponent({
.login_form_content {
margin-top: 4rem;
position: relative;
&[state="2"]{
>*{
&[state="2"] {
> * {
opacity: 0;
}
.login_form_email{
.login_form_email {
opacity: 1;
}
}
.password_input_block{
.password_input_block {
position: relative;
.password_show_icon{
.password_show_icon {
position: absolute;
font-size: 2.4rem;
right: 2rem;
top:1.7rem;
top: 1.7rem;
cursor: pointer;
}
}
@@ -706,7 +751,7 @@ export default defineComponent({
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #DFDFDF;
border: 0.1rem solid #dfdfdf;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;
@@ -714,7 +759,6 @@ export default defineComponent({
box-sizing: border-box;
outline: none;
&::placeholder {
color: #a5b0c2;
}
@@ -723,10 +767,10 @@ export default defineComponent({
.email_last_step {
// margin-top: 4rem;
.email_last_step_bottom{
.email_last_step_bottom {
padding: 0 40px;
}
.email_last_step_block{
.email_last_step_block {
padding: 10px;
border-bottom: 2px solid;
box-sizing: border-box;
@@ -739,7 +783,7 @@ export default defineComponent({
font-weight: bold;
color: #030303;
}
.email_last_step_block_icon{
.email_last_step_block_icon {
cursor: pointer;
margin-right: 1rem;
height: 20px;
@@ -753,8 +797,6 @@ export default defineComponent({
transform: translateY(1rem);
display: inline-block;
}
}
.login_submit_button {
@@ -767,7 +809,7 @@ export default defineComponent({
font-weight: 500;
color: #ffffff;
cursor: pointer;
&[state="2"]{
&[state="2"] {
cursor: not-allowed;
}
}
@@ -778,7 +820,7 @@ export default defineComponent({
display: flex;
justify-content: flex-end;
.forget_password_text{
.forget_password_text {
cursor: pointer;
}
}
@@ -788,15 +830,15 @@ export default defineComponent({
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
width: 60rem;
background: #FFFFFF;
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
background: #ffffff;
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
border-radius: 1rem;
padding: 3rem 6rem 6.5rem;
box-sizing: border-box;
.forget_password_content_block{
.forget_password_content_block {
cursor: pointer;
}
@@ -830,7 +872,7 @@ export default defineComponent({
width: 100%;
height: 5rem;
margin-top: 1rem;
border: 0.1rem solid #DFDFDF;
border: 0.1rem solid #dfdfdf;
border-radius: 2.5rem;
padding-left: 2.1rem;
line-height: 5rem;
@@ -865,7 +907,7 @@ export default defineComponent({
}
}
.login_footer{
.login_footer {
position: absolute;
display: flex;
align-items: center;
@@ -875,30 +917,28 @@ export default defineComponent({
width: 100%;
padding: 0 4rem;
.login_footer_item{
.login_footer_item {
display: flex;
align-items: center;
.login_footer_item_text{
.login_footer_item_text {
font-size: 1.3rem;
color: #151515;
}
.footer_item_text_pointer{
.footer_item_text_pointer {
cursor: pointer;
}
.login_footer_line{
.login_footer_line {
width: 0.1rem;
height: 2rem;
margin: 0 2rem;
background: #B9B9B9;
background: #b9b9b9;
}
}
}
.marign_top20 {
margin-top: 2rem;
}
@@ -913,7 +953,10 @@ export default defineComponent({
.marign_top40 {
margin-top: 4rem;
}
.thirdPartyLogin{
display: flex;
justify-content: space-between;
}
.tip_content {
font-size: 1.3rem;
font-weight: bold;
@@ -934,11 +977,10 @@ export default defineComponent({
color: #a5b0c2;
}
.email_tip_content{
.email_tip_content {
font-size: 1.4rem;
color: #030303;
}
}
}
</style>