This commit is contained in:
X1627315083
2024-06-20 10:36:45 +08:00
parent 814dd1205c
commit dc93403506
28 changed files with 1506 additions and 394 deletions

View File

@@ -31,7 +31,7 @@
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth">
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
</div>
</div>
@@ -76,7 +76,10 @@ export default defineComponent({
let exportWH = 512
let canvasBtn = reactive({
canvasState:'move',
canvasPencilWidth:4,
canvasPencilWidth:{
pencil:4,
eraser:4,
},
spreadState:false,
})
let canvasWH = ref(0);
@@ -166,7 +169,7 @@ export default defineComponent({
}
let rgba = 'rgba(0, 0, 0, 1)'
let brushIndicator = new fabric.Circle({
radius:(canvasBtn.canvasPencilWidth/2),
radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]/2),
fill: '#fff',
stroke: '#000',
strokeWidth: 1,
@@ -198,7 +201,7 @@ export default defineComponent({
let setPencil = ()=>{
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
brushIndicator.set('fill',rgba)
canvas.freeDrawingBrush.isEraser = false
@@ -210,7 +213,7 @@ export default defineComponent({
brushIndicator.set({fill: '#fff'});
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth);
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
@@ -231,7 +234,7 @@ export default defineComponent({
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth)
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
},300)
}
let updateCanvasState = () =>{