198 lines
6.8 KiB
Vue
198 lines
6.8 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.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%;
|
|
width: 12rem;
|
|
}
|
|
&.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> |