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-09-03 16:39:06 +08:00
parent eb54023940 d840d3de35
commit d7a57a39ee
54 changed files with 1298 additions and 723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,14 +21,14 @@
</div> -->
<div class="exportCanvasBox">
<div class="exportCanvasBox_left">
<div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div>
<!-- <div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div> -->
<!-- <label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label> -->
<label>
<div>{{ $t('exportModel.Height') }}:</div>
<div>{{ $t('exportModel.Height') }}:</div>
<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
</label>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
@@ -42,58 +42,47 @@
]"
>
</div>
</div>
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
>
<div class="exportCanvasBox_imgbor exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
>
<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-if="!colorItem.gradient">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
<div v-if="key == 'colorBoards'" class="exportCanvasBox_item_colorBor">
<div v-for="colorItem in item" class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-else>
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
</div>
</div>
</div>
<div
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
</div>
</div>
</div>
<div
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
</div>
</div>
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
{{ $t('exportModel.CanvasTool') }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
closeNav.tool?'icon-rotate':''
]"
>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool exportCanvasBox_title">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
@@ -101,117 +90,108 @@
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i>
</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_operation" :class="{'closeNav' :closeNav.move}">
<div class="exportCanvasBox_operation_bor">
<div class="exportCanvasBox_operation_bor_btn">
<i class="icon iconfont icon-xiala" :class="closeNav.move?'icon-rotate':''" @click.stop="setCloseNav('move')"></i>
</div>
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<label v-show="allSelectWidth > -1 && operation != 'move'">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
<!-- <div
:class="[
'icon',
'iconfont',
'icon-xiala',
closeNav.move?'icon-rotate':''
]"
>
</div> -->
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<label v-show="allSelectWidth > -1">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<label v-show="operation == '' || operation == 'text' || textDataShow">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
</div>
<div class="exportCanvasBox_left_bottom">
<div class="exportCanvasBox_left_credits" v-show="credits<1">
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
</div>
<div class="exportCanvasBox_left_btn Guide_1_38">
<!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
<div class="subitOkPreviewBtn" @click="setSubmit">{{ $t('exportModel.Save') }}</div>
<div class="subitOkPreviewBtn" @click="setShare">{{ $t('exportModel.Share') }}</div>
<div class="subitOkPreviewBtn" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
-->
</div>
<!-- <div @click="toSvg">12312312312</div> -->
<div class="exportCanvasBox_center" :style="[isMoible?'overflow: hidden;':'']">
@@ -219,6 +199,18 @@
<div v-if="isMoible" class="exportCanvasBox_scroll">
<div></div>
</div>
<div class="exportCanvasBox_bottom">
<div class="exportCanvasBox_left_btn Guide_1_38">
<div class="exportCanvasBox_left_credits" v-show="credits<1">
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
</div>
<!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
<div class="subitOkPreviewBtn" @click="setSubmit">{{ $t('exportModel.Save') }}</div>
<div class="subitOkPreviewBtn" @click="setShare">{{ $t('exportModel.Share') }}</div>
<div class="subitOkPreviewBtn" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
<!-- <div class="exportCanvasBox_right">
<div class="exportCanvasBox_title">
High-definition Download
@@ -363,7 +355,7 @@ export default defineComponent({
let normalCanvasState = ref([])//存放canvas操作
let isLoadCanvas = false//撤回或者反撤回false为撤回
let userlikeGroupId = 0
let imgWidth = {} //这是设置画布等宽
let submitCanvasContent = null
let init = (productData) => {
userlikeGroupId = productData.userlikeGroupId
@@ -393,7 +385,7 @@ export default defineComponent({
height: canvasWH.value.height,
isDrawingMode: false, // 开启绘图模式
});
brushIndicator = clearBrushIndicator()
brushIndicator = createBrushIndicator()
canvasOnDrop()//开启鼠标到画布事件
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(deleteObject)
@@ -451,6 +443,9 @@ export default defineComponent({
let data = {
userLikeGroupId:userlikeGroupId
}
arr.forEach((item)=>{
if(item !== 'likeDesignCollectionList')imgWidth[item] = setImageWidth(item)
})
isShowMark.value = true
let oldExportCanvas
let localCanvas = localStorage.getItem('canvasContent')
@@ -486,8 +481,6 @@ export default defineComponent({
});
})
}
console.log(oldExportCanvas);
// arr.forEach((item,index)=>{
if(oldExportCanvas){
canvasWH.value.height = oldExportCanvas.canvasHeight
@@ -500,10 +493,6 @@ export default defineComponent({
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth //这是设置画布等宽
if(item !== 'likeDesignCollectionList' && item !== 'FinalizeImage'){
imgWidth = await setImageWidth(key);
}
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
@@ -530,17 +519,14 @@ export default defineComponent({
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if(item == 'FinalizeImage'){
console.log(allItem);
}
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
if(item == 'likeDesignCollectionList' || item == 'FinalizeImage')imgWidth = await setImageWidth(key,itemCanvasImg);
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
@@ -552,7 +538,7 @@ export default defineComponent({
position.y = maxHeight;
}
}
setCanvasImage(img,key,position.x,position.y,allItem,imgWidth)//设置图片
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
@@ -612,7 +598,6 @@ export default defineComponent({
}
updateCanvasState('')//加载完成后记录一下
setOperation('move')
closeNav.value.tool = true
submitCanvasContent = setInterval(()=>{
let data = setCanvasContent(true)
if(data.objects.length == 0){
@@ -656,7 +641,7 @@ export default defineComponent({
}
let setImageWidth = async (key,img)=>{
let setImageWidth = (key,img)=>{
let imgWidth = canvasWH.value.width; //这是设置画布等宽
if (
disposeMoodboardShow &&
@@ -679,20 +664,13 @@ export default defineComponent({
(sketchGrouping - 1) * 20) /
sketchGrouping;
}
if (key == "likeDesignCollectionList" || key == 'FinalizeImage') {
if (key == "likeDesignCollectionList") {
if(img){
await new Promise((resolve, reject) => {
let imgObj = new Image();
imgObj.onload = function () {
let height = imgObj.height
imgObj.height = canvasWH.value.width / 4 * 1.8
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
// imgObj.remove()
resolve(imgObj.width)
}
imgObj.src = img;
})
let imgObj = JSON.parse(JSON.stringify(img))
let height = imgObj.height
imgObj.height = canvasWH.value.width / 4 * 1.8
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
}
// imgWidth =
@@ -702,33 +680,32 @@ export default defineComponent({
}
return imgWidth
}
let setCanvasImage = (img,key,left,top,data,imgWidth)=>{
console.log(img,key,data,imgWidth);
let setCanvasImage = (img,key,left,top,data)=>{
// data
if(key == 'likeDesignCollectionList' || key == 'FinalizeImage')imgWidth = setImageWidth(key,data.designOutfitUrl);
let imgId = 0
let minioUrl = ''//表示收藏或者generate
let imgUrl = data.imgUrl
if (key == "likeDesignCollectionList") {
imgUrl = data.designOutfitUrl;
imgWidth[key] = setImageWidth(key,img);
}
let url = imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
minioUrl = match[2]
// let id =
let proportion = img.height / img.width; //计算图形宽高比例
// let imgWidth = setImageWidth(key)
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
img.set({
// width: imgWidth/img.width,
// width: imgWidth[key]/img.width,
// height: canvasWH.value.height/img.height,
left,
top,
imgId,
minioUrl,
scaleX:
imgWidth / img.width,
imgWidth[key] / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
// cornerSize: 10, // 选中时，角的大小为20
// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
@@ -917,12 +894,17 @@ export default defineComponent({
};
let closeNav = ref({
nav:true,
nav:false,
tool:false,
move:false,
})
let setCloseNav = (key)=>{
closeNav.value[key] = !closeNav.value[key]
// for (const iterator in closeNav.value) {
// if(key != iterator){
// closeNav.value[iterator] = false
// }
// }
}
function multiselect() {//获取整体宽高
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
@@ -1097,7 +1079,8 @@ export default defineComponent({
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
normalCanvasState.value.push(canvasAsJson);
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
normalCanvasState.value.push(canvasAsJson);
if (isLoadCanvas) {
reverseCanvasState.value = []
isLoadCanvas = false;
@@ -1339,7 +1322,7 @@ export default defineComponent({
}
}
let clearBrushIndicator = ()=>{
let createBrushIndicator = ()=>{
let cator = new fabric.Circle({
radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2,
fill: '#fff',
@@ -2095,13 +2078,19 @@ export default defineComponent({
flex: 1;
// height: 30rem;
// overflow-x: hidden;
.icon{
transition: all .3s;
}
.icon-rotate{
transform: rotate(-180deg);
}
.exportCanvasBox {
flex: 1;
overflow-x: hidden;
display: flex;
margin-top: 2rem;
justify-content: space-between;
flex-direction: column;
.exportCanvasBox_title {
margin-bottom: .5rem;
font-size: 1.8rem;
@@ -2115,12 +2104,8 @@ export default defineComponent({
position: sticky;
background: #f9fafb;
z-index: 2;
.icon{
transition: all .3s;
}
.icon-rotate{
transform: rotate(-180deg);
}
align-items: flex-start;
}
.exportCanvasBox_intro{
margin-bottom: 1rem;
@@ -2130,14 +2115,12 @@ export default defineComponent({
}
.exportCanvasBox_right,
.exportCanvasBox_left {
width: 25rem;
height: 100%;
overflow-x: hidden;
width: 100%;
height: auto;
label {
display: flex;
align-items: center;
margin-bottom: 1rem;
width: 100%;
width: 30%;
div {
width: 8rem;
}
@@ -2165,7 +2148,8 @@ export default defineComponent({
}
.exportCanvasBox_left_item.closeNav{
// max-height: 1000rem;
height: auto;
// height: auto;
display: block;
}
}
.exportCanvasBox_left::-webkit-scrollbar,
@@ -2173,57 +2157,104 @@ export default defineComponent({
.exportCanvasBox_left {
padding-right: 1rem;
margin-right: 2rem;
.exportCanvasBox_left_bottom{
position: sticky;
background: #f9fafb;
z-index: 2;
bottom: -1px;
.exportCanvasBox_left_btn{
display: flex;
justify-content: space-between;
padding-top: 2rem;
flex-wrap: wrap;
.subitOkPreviewBtn{
position: initial;
transform: none;
margin-bottom: 2rem;
width: 40%;
text-align: center;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
.subitOkPreviewBtn:nth-child(2n){
margin-left: 1rem;
}
.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
margin-bottom: 0;
}
}
// height: 7rem;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
>label{
width: 20%;
}
.exportCanvasBox_title {
padding-right: 2rem;
margin: 0 4rem;
position: relative;
}
.exportCanvasBox_left_item{
overflow: hidden;
transition: all .3s;
// max-height: 0;
height: 0;
transform: translate3d(0, 0, 0);
position: absolute;
}
.exportCanvasBox_img {
.exportCanvasBox_left_item,.exportCanvasBox_imgbor,.exportCanvasBox_operation_bor{
background: #fff;
height: auto;
max-height: 30rem;
border: 1px solid;
display: none;
top: 7rem;
position: absolute;
}
.exportCanvasBox_operation{
left: auto;
right: 0;
z-index: 2;
position: absolute;
top: 7rem;
max-height: 30rem;
height: auto;
border: none;
background: none;
.exportCanvasBox_operation_bor_btn{
// transform: translateX(-100%);
// position: absolute;
border: 1px solid;
cursor: pointer;
width: 4rem;
height: 4rem;
background: #fff;
i{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(90deg);
&.icon-rotate{
transform: rotate(270deg);
}
}
}
.exportCanvasBox_operation_bor{
overflow: hidden;
position: initial;
transform: translateX(calc(100% - 4rem));
display: block;
transition: all .3s;
border: none;
display: flex;
align-items: flex-start;
background: rgba(0, 0, 0, 0);
.exportCanvasBox_operation_bor_item{
background: #fff;
border: 1px solid;
width: 28rem;
}
label{
width: 100%;
}
}
&.closeNav{
.exportCanvasBox_operation_bor{
transform: translateX(0%);
}
}
}
.exportCanvasBox_imgbor {
// height: auto;
width: 20rem;
overflow-y: auto;
padding: 1rem;
&.exportCanvasBox_imgbor::-webkit-scrollbar{display: none;}
.exportCanvasBox_allItem {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.exportCanvasBox_item {
text-align: center;
.exportCanvasBox_img{
position: relative;
margin-right: 2rem;
margin-bottom: 2rem;
img {
max-width: 7rem;
@@ -2245,9 +2276,14 @@ export default defineComponent({
}
}
.exportCanvasBox_item_colorBor{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.exportCanvasBox_item_color{
width: 8rem;
margin-right: 2rem;
margin-bottom: 2rem;
.exportCanvasBox_item_BGcolor{
height: 5rem;
@@ -2272,12 +2308,17 @@ export default defineComponent({
}
}
.exportCanvasBox_left_tool{
.exportCanvasBox_left_tool_item_column{
flex-direction: column;
padding: 1rem;
}
.exportCanvasBox_left_tool_item{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 1rem;
align-items: center;
&.leftAlign{
justify-content: flex-start;
}
@@ -2290,6 +2331,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.active{
border: 1px solid;
border-radius: .4rem;
@@ -2307,20 +2349,36 @@ export default defineComponent({
}
}
}
// .exportCanvasBox_right{
// display: flex;
// flex-direction: column;
// padding-left: 1rem;
// position: relative;
// .exportCanvasBox_right_definition{
// // display: flex;
// flex: 1;
// }
// .exportCanvasBox_right_credits{
// margin-bottom: 2rem;
// }
// }
.exportCanvasBox_bottom{
width: 100%;
flex-shrink: 0;
background: #f9fafb;
z-index: 2;
padding-top: 2rem;
.exportCanvasBox_left_credits{
margin-right: auto
}
.exportCanvasBox_left_btn{
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
align-items: flex-start;
.subitOkPreviewBtn{
position: initial;
transform: none;
margin-bottom: 0rem;
width: auto;
text-align: center;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
.subitOkPreviewBtn:nth-child(2n){
margin: 0 1rem;
}
}
}
.exportCanvasBox_center {
flex: 1;
height: 100%;