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-27 16:31:33 +08:00
parent e26d57dd76
commit 21b0af1365
32 changed files with 423 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,7 +47,6 @@
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>
@@ -64,10 +63,9 @@
<div>{{colorItem.name}}</div>
</div>
</div>
</div>
<div
v-if="key != 'moodboardPosition'"
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
@@ -83,27 +81,29 @@
</div>
</div>
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div class="label_item" 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 class="labelHover_show exportCanvasBox_imgbor">
<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" 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>
<div class="label_item" 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>
<div class="label_item texture" v-show="operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@@ -114,15 +114,15 @@
<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>
<div class="label_item" 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>
<div class="label_item" v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item top">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -130,12 +130,12 @@
<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>
<!-- <div class="label_item" 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> -->
<div class="label_item" 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"
@@ -146,11 +146,11 @@
{{item.name}}
</a-select-option>
</a-select>
</label>
</div>
<!-- <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_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
@@ -1527,31 +1527,40 @@ export default defineComponent({
let setTimeOut = {
color:null,
width:null,
colorHistory:null,
}//给切换颜色设置防抖
let colorHistoryList = ref(['rgb(0, 0, 0)'])
let setColorHistory = (value)=>{
canvasPencilColor.value = value
pencilColor()
}
let pencilColor = ()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
clearTimeout(setTimeOut.colorHistory)
setTimeOut.color = setTimeout(()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
},100)
pencilColor()
},200)
setTimeOut.colorHistory = setTimeout(()=>{
colorHistoryList.value.push(canvasPencilColor.value)
},1000)
}
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.width)
@@ -1956,7 +1965,6 @@ export default defineComponent({
let submitLiquefaction = (rv)=>{
const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
console.log(liquefactionData);
liquefactionData.setSrc(rv, function() {
liquefactionData.scaleToWidth(originalWidth);
liquefactionData.scaleToHeight(originalHeight);
@@ -1971,7 +1979,6 @@ export default defineComponent({
liquefactionData = activeObjects[0]
liquefaction.value.init(activeObjects[0])
} else {
console.log('No object selected.');
message.info(useI18.t('exportModel.jsContent6'))
return null;
}
@@ -2031,6 +2038,8 @@ export default defineComponent({
canvasPencilWidth,//input选择宽度
setAllSelectWidth,//多选设置宽度
allSelectWidth,//多选设置宽度的值
colorHistoryList,//历史颜色
setColorHistory,//设置历史颜色
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
setHDExport,//高清导出选择的图片
@@ -2192,7 +2201,7 @@ export default defineComponent({
.exportCanvasBox_left_tool{
margin: 0;
}
label {
.label_item,label {
display: flex;
align-items: center;
width: 23%;
@@ -2340,8 +2349,29 @@ export default defineComponent({
flex: 1;
margin-left: 8rem;
display: flex;
label{
.label_item{
margin-right: 2rem;
position: relative;
.labelHover_show{
position: absolute;
width: 100%;
height: 10rem;
top: 100%;
z-index: 2;
flex-wrap: wrap;
div{
width: 3rem;
height: 3rem;
margin-right: 1rem;
margin-bottom: 1rem;
cursor: pointer;
}
}
}
.label_item:hover{
.labelHover_show{
display: flex;
}
}
}
.exportCanvasBox_left_tool_item{