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/modules/generalCanvas.vue
View File

@@ -1,20 +1,23 @@
<template>
<div class="generalCanvas">
<div class="generalCanvas_left">
<label>
<div class="label_item">
<div>{{ $t('exportModel.Height') }}:</div>
<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
</label>
</div>
<div class="generalCanvas_operation_bor_item generalCanvas_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"
@@ -24,8 +27,8 @@
<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"
@@ -35,15 +38,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="generalCanvas_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="generalCanvas_left_tool_item top">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -51,8 +54,8 @@
<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="(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"
@@ -62,7 +65,7 @@
{{item.name}}
</a-select-option>
</a-select>
</label>
</div>
</div>
</div>
@@ -83,10 +86,10 @@
<!-- <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">
<div class="label_item uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
</div>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
@@ -100,7 +103,7 @@
</div>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
import {defineComponent, computed, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -759,31 +762,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)
@@ -1000,6 +1012,9 @@ export default defineComponent({
fontFamily.value = arr[0].value
init()
});
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
return {
toSvg,
t,
@@ -1029,6 +1044,8 @@ export default defineComponent({
canvasPencilWidth,//input选择宽度
setAllSelectWidth,//多选设置宽度
allSelectWidth,//多选设置宽度的值
colorHistoryList,//历史颜色
setColorHistory,//设置历史颜色
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
brushworkChange,//切换笔触的回调
@@ -1173,7 +1190,7 @@ export default defineComponent({
align-items: flex-start;
position: relative;
flex-direction: row;
>label{
>.label_item{
width: 20%;
}
.generalCanvas_title {
@@ -1273,8 +1290,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;
}
}
}
.generalCanvas_left_tool_item{

6
src/component/modules/generalMiniCanvas.vue
View File

@@ -30,7 +30,7 @@
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
@@ -98,6 +98,9 @@ export default defineComponent({
onMounted(()=>{
init()
})
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
@@ -460,6 +463,7 @@ export default defineComponent({
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
width: 100%;
background: #e6e6e6;
&:hover{