251 lines
8.4 KiB
Vue
251 lines
8.4 KiB
Vue
<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.layerWidth">
|
|
</div>
|
|
<div class="label_item wH">
|
|
<div class="title">{{ $t('exportModel.Height') }}</div>
|
|
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.layerHeight">
|
|
</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 color" 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">
|
|
</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
<div class="label_item" v-if="elementList" v-show="
|
|
canvasGeneral.operation != 'dashedPencil' &&
|
|
canvasGeneral.operation != 'dashed'">
|
|
<div>{{ $t('exportModel.select') }}:</div>
|
|
<span class="icon iconfont icon-xiala" @click.stop="setOperation('element')" :class="{active: operation == 'element'}"></span>
|
|
<div class="labelHover_show element" v-show="operation == 'element'" @click.stop="">
|
|
<div v-for="titleItem,key in elementList" class="elementItem">
|
|
<div class="titleItem">{{ titleItem?.name }}</div>
|
|
<div class="titleImgList">
|
|
<div class="titleImgItem" v-for="imgItem in titleItem?.list">
|
|
<img :src="imgItem?.url || imgItem?.designOutfitUrl || imgItem?.imgUrl || imgItem?.minioUrl" @click="addImage(imgItem)" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,ref,reactive,computed,toRefs,inject} from 'vue'
|
|
import { useStore } from "vuex";
|
|
export default defineComponent({
|
|
components:{},
|
|
props:{
|
|
elementList:{
|
|
type:Object,
|
|
default:()=>{return {}}
|
|
}
|
|
},
|
|
setup(){
|
|
const store = useStore();
|
|
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)
|
|
}
|
|
const addImage = (item:any)=>{
|
|
if(!item.minioUrl)item.minioUrl = item.imgUrl
|
|
item.imgUrl = item?.url || item?.designOutfitUrl || item?.imgUrl || item?.minioUrl
|
|
canvasGeneral.addImage(item)
|
|
}
|
|
return {
|
|
canvasGeneral,
|
|
...toRefs(data),
|
|
testModal,
|
|
setOperation,
|
|
closeModal,
|
|
addImage
|
|
}
|
|
}
|
|
});
|
|
</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;
|
|
&.color{
|
|
div{
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin-right: .5rem;
|
|
margin-bottom: .5rem;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
&.element{
|
|
height: auto;
|
|
max-height: 40rem;
|
|
overflow-y: auto;
|
|
>.elementItem{
|
|
margin-bottom: 1rem;
|
|
> .titleImgList{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.titleImgItem{
|
|
width: 50%;
|
|
padding: 1rem;
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
input{
|
|
height: 100%;
|
|
width: 12rem;
|
|
}
|
|
&.wH input{
|
|
}
|
|
.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> |