zdg #92

Merged
zhengdegang merged 8 commits from zdg into main 2024-08-02 09:23:15 +08:00
3 changed files with 49 additions and 6 deletions
Showing only changes of commit b4e7867922 - Show all commits

View File

@ -0,0 +1,3 @@
<svg style="fill: currentColor;color: #ccc;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M1023 366.1L662.3 5.2 585 82.6l-34.4-34.4L69.7 538l34.4 34.4-51.5 34.4c-68.7 68.7-68.7 171.9 0 240.6l120.2 120.3c68.7 68.7 171.8 68.7 240.5 0l42.9-43 34.4 34.4 489.5-489.8-34.4-25.8 77.3-77.4zM662.3 65.4l300.6 300.8-51.5 51.6-300.6-309.5 51.5-42.9zM404.7 924.7c-60.1 60.2-154.6 60.2-214.7 0l-94.5-94.5c-60.1-60.2-60.1-154.7 0-214.8l34.4-17.2L430.5 899l-25.8 25.7z" />
</svg>

After

Width:  |  Height:  |  Size: 502 B

View File

@ -624,7 +624,7 @@ export class History {
const canvas = this.FabricVue?.canvas const canvas = this.FabricVue?.canvas
if (canvas) { if (canvas) {
this.diffs = this.diffs.slice(0, this.index) this.diffs = this.diffs.slice(0, this.index)
const canvasJson = Utils.getCanvasJSON() const canvasJson = Utils.getCanvasJSON(canvas)
const delta = diff(canvasJson, this.canvasData) const delta = diff(canvasJson, this.canvasData)
this.diffs.push(delta) this.diffs.push(delta)
@ -686,7 +686,7 @@ export class History {
initHistory() { initHistory() {
const canvas = this.FabricVue.canvas const canvas = this.FabricVue.canvas
if (canvas) { if (canvas) {
const canvasJson = Utils.getCanvasJSON() const canvasJson = Utils.getCanvasJSON(canvas)
this.canvasData = canvasJson this.canvasData = canvasJson
this.index = 0 this.index = 0
this.diffs = [] this.diffs = []
@ -1010,4 +1010,5 @@ export class fabricVue {
} }
export const FabricVue = new fabricVue() export const FabricVue = new fabricVue()
export default FabricVue export default FabricVue
export const Fabric = fabric

View File

@ -1,6 +1,9 @@
<template> <template>
<canvas ref="canvasRef" /> <canvas ref="canvasRef" />
<button @click="eraseTo">橡皮擦</button> <button @click="eraseTo">橡皮擦
<i class="iconfont icon-xiangpica"></i>
<img src="/imgs/erase.svg" alt="" srcset="">
</button>
</template> </template>
<script setup> <script setup>
@ -8,7 +11,7 @@
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
// import { FabricVue } from '@/plugins/fabric' // import { FabricVue } from '@/plugins/fabric'
// import { useBoardStore } from '@/store/modules/draw' // import { useBoardStore } from '@/store/modules/draw'
import {FabricVue, TYPES} from '@/plugins/fabric' import {Fabric,FabricVue, TYPES} from '@/plugins/fabric'
let canvasRef = ref(null) let canvasRef = ref(null)
onMounted(async() => { onMounted(async() => {
@ -21,12 +24,48 @@ onMounted(async() => {
// FabricVue.canvas.setHeight(500) // FabricVue.canvas.setHeight(500)
FabricVue.drawConfig.drawColors = ['red'] FabricVue.drawConfig.drawColors = ['red']
await FabricVue.initCanvas(canvasRef.value, option) await FabricVue.initCanvas(canvasRef.value, option)
// const pencilBrush = new fabric.PencilBrush(canvas)
// FabricVue.canvas.isDrawingMode = true
} }
}) })
const eraseTo = () => { // const eraseTo = () => { //
FabricVue.handleMode(TYPES.ActionMode.ERASE) FabricVue.handleMode(TYPES.ActionMode.ERASE)
const brush = FabricVue.canvas.freeDrawingBrush
console.log('brush', brush)
// FabricVue.canvas.freeDrawingCursor = `url(/imgs/erase.svg),crosshair `
let tempRect
FabricVue.canvas.on('mouse:down', (e) => {
})
FabricVue.canvas.on('mouse:move', (e) => {
if (tempRect) {
tempRect.set({
left: e.pointer.x - brush.width/2,
top: e.pointer.y - brush.width/2,
})
FabricVue.canvas.renderAll()
} else {
tempRect = new Fabric.Rect({
left: e.pointer.x - brush.width/2,
top: e.pointer.y - brush.width/2,
width: brush.width,
height: brush.width,
fill: 'transparent',
stroke: 'red',
strokeWidth: 1,
hasControls: false,
hasBorders: false,
selectable: false,
evented: false
})
FabricVue.canvas.add(tempRect)
}
})
FabricVue.canvas.on('mouse:up', (e) => {
if (tempRect) {
FabricVue.canvas.remove(tempRect);
tempRect = null;
}
})
} }
</script> </script>