From d7e53e63dd6c435e226d9f08cde31ca35131c911 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 14 四月 2025 15:30:33 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader
---
src/views/components/whiteBoard.vue | 608 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 608 insertions(+), 0 deletions(-)
diff --git a/src/views/components/whiteBoard.vue b/src/views/components/whiteBoard.vue
new file mode 100644
index 0000000..87ade4d
--- /dev/null
+++ b/src/views/components/whiteBoard.vue
@@ -0,0 +1,608 @@
+<template>
+ <div class="page-con">
+ <div class="canvas-box">
+ <div class="canvas-header">
+ <el-icon @click="closeDialog"><CloseBold /></el-icon>
+ </div>
+ <div class="canvas-body">
+ <canvas id="canvasBoard" width="1000" height="750"></canvas>
+ </div>
+ </div>
+ <div class="canvas-tool">
+ <div class="brushBox">
+ <div class="toolList">
+ <el-popover placement="top" width="250" trigger="click">
+ <div class="popinnerBox">
+ <div class="brush">
+ <div class="thickness">
+ <div
+ :class="toolData.thicknessActive == '1' ? 'small active hover' : 'small hover'"
+ @click="selectThickness('1')"
+ ></div>
+ <div
+ :class="toolData.thicknessActive == '3' ? 'middle active hover' : 'middle hover'"
+ @click="selectThickness('3')"
+ ></div>
+ <div
+ :class="toolData.thicknessActive == '5' ? 'large active hover' : 'large hover'"
+ @click="selectThickness('5')"
+ ></div>
+ </div>
+ <div class="lineStyle">
+ <div class="lineTypeBox">
+ <div
+ :class="
+ toolData.lineTypeActive == 'solid' ? 'typeItem lineTypeActive hover' : 'typeItem hover'
+ "
+ @click="selectLineType('solid')"
+ >
+ <div class="solid"></div>
+ <div class="activeIcon" v-if="toolData.lineTypeActive == 'solid'">
+ <img :src="xuanzhong" />
+ </div>
+ </div>
+ <div
+ :class="
+ toolData.lineTypeActive == 'dashed' ? 'typeItem lineTypeActive hover' : 'typeItem hover'
+ "
+ @click="selectLineType('dashed')"
+ >
+ <div class="dashed"></div>
+ <div class="activeIcon" v-if="toolData.lineTypeActive == 'dashed'">
+ <img :src="xuanzhong" />
+ </div>
+ </div>
+ </div>
+ <div class="colorSelectBox">
+ <div
+ v-for="item in colorList"
+ :key="item.key"
+ class="flex1 hover"
+ @click="lineColorSelect(item)"
+ >
+ <div :style="{ background: item.key }" class="scribeItem">
+ <img :src="xuanzhong" v-if="item.key == toolData.lineColorActive" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <template #reference>
+ <div class="floatToolItem hover" @click="toolSelectHandle('huabi')">
+ <el-tooltip class="box-item" effect="dark" content="鐢荤瑪" placement="bottom">
+ <img :src="huabi2" alt="" class="imgBox" />
+ </el-tooltip>
+ </div>
+ </template>
+ </el-popover>
+ <el-popover placement="top" width="250" trigger="click">
+ <div class="popinnerBox">
+ <div class="lineStyle">
+ <div class="lineTypeBox">
+ <div
+ :class="
+ toolData.fontSizeActive == '12' ? 'typeItem lineTypeActive hover' : 'typeItem hover'
+ "
+ @click="selectfontSize('12')"
+ >
+ 灏�
+ <div class="activeIcon" v-if="toolData.fontSizeActive == '12'">
+ <img :src="xuanzhong" />
+ </div>
+ </div>
+ <div
+ :class="
+ toolData.fontSizeActive == '16' ? 'typeItem lineTypeActive hover' : 'typeItem hover'
+ "
+ @click="selectfontSize('16')"
+ >
+ 涓�
+ <div class="activeIcon" v-if="toolData.fontSizeActive == '16'">
+ <img :src="xuanzhong" />
+ </div>
+ </div>
+ <div
+ :class="
+ toolData.fontSizeActive == '20' ? 'typeItem lineTypeActive hover' : 'typeItem hover'
+ "
+ @click="selectfontSize('20')"
+ >
+ 澶�
+ <div class="activeIcon" v-if="toolData.fontSizeActive == '20'">
+ <img :src="xuanzhong" />
+ </div>
+ </div>
+ </div>
+ <div class="lineStyle">
+ <div class="colorSelectBox">
+ <div
+ v-for="item in colorList"
+ :key="item.key"
+ class="flex1 hover"
+ @click="lineColorSelect(item)"
+ >
+ <div :style="{ background: item.key }" class="scribeItem">
+ <img :src="xuanzhong" v-if="item.key == toolData.lineColorActive" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <template #reference>
+ <div class="floatToolItem hover" @click="toolSelectHandle('wenzi')">
+ <el-tooltip class="box-item" effect="dark" content="鏂囧瓧" placement="bottom">
+ <img :src="wenzi2" alt="" class="imgBox" />
+ </el-tooltip>
+ </div>
+ </template>
+ </el-popover>
+ <el-popover placement="top" width="250" trigger="click">
+ <div class="popinnerBox">
+ <div class="graphBox">
+ <div class="graphSelect">
+ <div class="flex1">
+ <div :class="toolData.graphType == 'square' ? 'acitveGraphType' : ''">
+ <div class="square hover" @click="graphSelect('square')"></div>
+ </div>
+ </div>
+ <div class="flex1">
+ <div :class="toolData.graphType == 'rotundity' ? 'acitveGraphType' : ''">
+ <div class="rotundity hover" @click="graphSelect('rotundity')"></div>
+ </div>
+ </div>
+ <div class="flex1">
+ <div :class="toolData.graphType == 'triangle' ? 'acitveGraphType' : ''">
+ <div class="triangle hover" @click="graphSelect('triangle')"></div>
+ </div>
+ </div>
+ <div class="flex1">
+ <div :class="toolData.graphType == 'lineSegment' ? 'acitveGraphType' : ''">
+ <div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div>
+ </div>
+ </div>
+ </div>
+ <div class="lineStyle">
+ <div class="colorSelectBox">
+ <div
+ v-for="item in colorList"
+ :key="item.key"
+ class="flex1 hover"
+ @click="lineColorSelect(item)"
+ >
+ <div :style="{ background: item.key }" class="scribeItem">
+ <img :src="xuanzhong" v-if="item.key == toolData.lineColorActive" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <template #reference>
+ <div class="floatToolItem hover" @click="toolSelectHandle('tuxing')">
+ <el-tooltip class="box-item" effect="dark" content="鍥惧舰" placement="bottom">
+ <img :src="tuxing" alt="" class="imgBox" />
+ </el-tooltip>
+ </div>
+ </template>
+ </el-popover>
+ <div class="floatToolItem hover" @click="toolSelectHandle('chexiao')">
+ <el-tooltip class="box-item" effect="dark" content="鎾ら攢" placement="bottom">
+ <img :src="clearPrevious" alt="" class="imgBox" />
+ </el-tooltip>
+ </div>
+ <!-- <div class="floatToolItem" @click="toolSelectHandle('xiangpi')">
+ <div class="imgBox">
+ <img :src="clear" alt="" />
+ </div>
+ </div> -->
+ <div class="floatToolItem hover" @click="toolSelectHandle('qingchu')">
+ <el-tooltip class="box-item" effect="dark" content="娓呴櫎" placement="bottom">
+ <img :src="qingchu2" alt="" class="imgBox" />
+ </el-tooltip>
+ </div>
+ <div class="layOutTool"></div>
+ <div class="floatToolItem hover" @click="toolSelectHandle('tuichu')">
+ <el-tooltip class="box-item" effect="dark" content="閫�鍑�" placement="bottom">
+ <img :src="tuichu" alt="" class="imgBox" />
+ </el-tooltip>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { requestCtx } from '../../assets/js/config'
+import { defineProps, inject, defineEmits, onMounted, reactive, ref, watch } from 'vue'
+import clearPrevious from '@/assets/images/operation/clearPrevious.png'
+import clear from '@/assets/images/operation/clear.png'
+import tuichu from '@/assets/images/operation/tuichu.png'
+import qingchu2 from '@/assets/images/operation/qingchu.png'
+import tuxing from '@/assets/images/operation/tuxing.png'
+import xuanzhong from '@/assets/images/operation/xuanzhong.png'
+import huabi2 from '@/assets/images/operation/huabi.svg'
+import wenzi2 from '@/assets/images/operation/wenzi.png'
+
+let canvas: any = null
+let text: any = null
+let activeEl: any = null
+function canvasOnMouseDownDel(opt) {
+ // 鍙抽敭锛屼笖鍦ㄥ厓绱犱笂鍙抽敭
+ // button: 1-宸﹂敭锛�2-涓敭锛�3-鍙抽敭
+ // 鍦ㄧ敾甯冧笂鍙抽敭锛宼arget 涓� null
+ if (opt.button === 1 && opt.target) {
+ // 鑾峰彇褰撳墠鍏冪礌
+ activeEl = opt.target
+ }
+}
+onMounted(() => {
+ canvas = new fabric.Canvas('canvasBoard')
+ // 鎸変笅榧犳爣
+ canvas.on('mouse:down', canvasOnMouseDownDel)
+ canvas.setZoom(1); // 璁剧疆鐢诲竷缂╂斁姣斾緥涓�1
+ canvas.absolutePan({ x: 0, y: 0 });
+})
+const emit = defineEmits(['whiteBoardClose'])
+const closeDialog = () => {
+ emit('whiteBoardClose', false)
+}
+
+//鐢荤瑪鎿嶄綔鏍忎簨浠�
+const toolData = reactive({
+ activeTool: '',
+ fontSizeActive: '16', // 鏂囧瓧鎿嶄綔鏂囧瓧澶у皬
+ thicknessActive: '3', //鐢荤瑪閫変腑绮楃粏
+ lineTypeActive: 'solid', //鐢荤瑪閫変腑绾跨被鍨�
+ lineColorActive: '#333', //鐢荤瑪閫変腑绾块鑹�
+ graphType: '' //鍥惧舰绫诲瀷锛屾柟褰紝鍦嗗舰...
+})
+const colorList = reactive([
+ {
+ label: '榛勮壊',
+ key: '#F5E12A'
+ },
+ {
+ label: '缁胯壊',
+ key: '#76F0AE'
+ },
+ {
+ label: '钃濊壊',
+ key: '#59CFF5'
+ },
+ {
+ label: '绱壊',
+ key: '#CAA5FC'
+ },
+ {
+ label: '绮夎壊',
+ key: '#F5A0B9'
+ }
+])
+const toolSelectHandle = (title) => {
+ toolData.activeTool = title
+ toolData.lineColorActive = ''
+ canvas.isDrawingMode = false
+ switch (title) {
+ case 'huabi':
+ canvas.skipTargetFind = false
+ canvas.isDrawingMode = true
+ toolData.graphType = ''
+ canvas.freeDrawingBrush.color = '#333'
+ canvas.freeDrawingBrush.width = '3'
+ canvas.on('mouse:down', '') // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvas.on('mouse:up', '')
+ canvas.on('mouse:move', '')
+ break
+ case 'wenzi':
+ canvas.skipTargetFind = false
+ canvas.isDrawingMode = false
+ toolData.graphType = ''
+ text = new fabric.IText('璇疯緭鍏ユ枃鏈�', {
+ left: 50,
+ top: 50,
+ fontSize: toolData.fontSizeActive
+ })
+ canvas.add(text)
+ canvas.on('mouse:down', '') // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvas.on('mouse:up', '')
+ canvas.on('mouse:move', '')
+ break
+ case 'tuxing':
+ canvas.isDrawingMode = false
+ canvas.selectionColor = 'transparent'
+ canvas.skipTargetFind = true
+ toolData.lineColorActive = '#000'
+ break
+ case 'chexiao':
+ canvas.skipTargetFind = false
+ canvas.isDrawingMode = false
+ canvas.remove(activeEl)
+ canvas.requestRenderAll()
+ activeEl = null
+ break
+ case 'tuichu':
+ canvas.skipTargetFind = false
+ canvas.isDrawingMode = false
+ emit('whiteBoardClose', false)
+ break
+ case 'qingchu':
+ canvas.clear()
+ break
+ }
+}
+
+//閫変腑鐢荤瑪绮楃粏
+const selectThickness = (str) => {
+ toolData.thicknessActive = str
+ canvas.freeDrawingBrush.width = toolData.thicknessActive
+}
+//鐢荤瑪绾跨被鍨�
+const selectLineType = (str) => {
+ toolData.lineTypeActive = str
+ if (toolData.lineTypeActive == 'dashed') {
+ canvas.freeDrawingBrush.strokeDashArray = [10]
+ } else {
+ canvas.freeDrawingBrush.strokeDashArray = null
+ }
+}
+
+//鐢荤瑪/鏂囧瓧/鍥惧舰棰滆壊閫夋嫨
+const lineColorSelect = (item) => {
+ toolData.lineColorActive = item.key
+ if ((toolData.activeTool == 'huabi')) {
+ canvas.freeDrawingBrush.color = item.key
+ }
+ if ((toolData.activeTool == 'wenzi')) {
+ text.fill = toolData.lineColorActive
+ }
+}
+
+//鏂囧瓧澶у皬
+const selectfontSize = (str) => {
+ toolData.fontSizeActive = str
+ text.fontSize = toolData.fontSizeActive
+}
+
+//閫夋嫨鍥惧舰
+const graphSelect = (type) => {
+ toolData.graphType = type
+ switch (type) {
+ case 'square':
+ canvas.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvas.on('mouse:up', canvasMouseUp)
+ canvas.selectionBorderColor = toolData.lineColorActive
+ break
+ case 'rotundity':
+ canvas.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvas.on('mouse:up', canvasMouseUp)
+ canvas.on('mouse:move', canvasMouseMove)
+ break
+ case 'triangle':
+ canvas.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvas.on('mouse:up', canvasMouseUp)
+ canvas.on('mouse:move', canvasMouseMove)
+ break
+ case 'lineSegment':
+ canvas.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvas.on('mouse:move', canvasMouseMove) // 榧犳爣鍦ㄧ敾甯冧笂绉诲姩
+ canvas.on('mouse:up', canvasMouseUp)
+ break
+ }
+}
+
+let downPoint = null // 榧犳爣鎸変笅鐨勫潗鏍�
+let upPoint = null
+let currentCircle = null // 涓存椂鍦嗭紝鍒涘缓鍦嗙殑鏃跺�欎娇鐢�
+let currentTriangle = null // 涓存椂涓夎褰�
+let currentLine = null // 涓存椂绾挎
+// 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+function canvasMouseDown(e) {
+ downPoint = e.absolutePointer
+ if (toolData.graphType === 'rotundity') {
+ currentCircle = new fabric.Circle({
+ top: downPoint.y,
+ left: downPoint.x,
+ radius: 0,
+ fill: 'transparent',
+ stroke: toolData.lineColorActive
+ })
+
+ canvas.add(currentCircle)
+ }
+ if (toolData.graphType === 'triangle') {
+ currentTriangle = new fabric.Triangle({
+ top: downPoint.y,
+ left: downPoint.x,
+ width: 0,
+ height: 0,
+ fill: 'transparent',
+ stroke: toolData.lineColorActive
+ })
+ canvas.add(currentTriangle)
+ }
+ if (toolData.graphType === 'lineSegment') {
+ currentLine = new fabric.Line(
+ [
+ downPoint.x,
+ downPoint.y, // 璧峰鐐瑰潗鏍�
+ downPoint.x,
+ downPoint.y // 缁撴潫鐐瑰潗鏍�
+ ],
+ {
+ stroke: toolData.lineColorActive // 绗旇Е棰滆壊
+ }
+ )
+ canvas.add(currentLine)
+ }
+}
+// 榧犳爣鍦ㄧ敾甯冧笂鏉惧紑
+function canvasMouseUp(e) {
+ if (toolData.graphType === 'square') {
+ // 鍒涘缓鐭╁舰
+ createRect(e.absolutePointer)
+ }
+
+ if (toolData.graphType === 'rotundity') {
+ if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {
+ canvas.remove(currentCircle)
+ } else {
+ if (currentCircle) {
+ currentCircle.set('stroke', toolData.lineColorActive)
+ }
+ }
+ currentCircle = null
+ }
+
+ if (toolData.graphType === 'triangle') {
+ if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {
+ canvas.remove(currentTriangle)
+ } else {
+ currentTriangle.set('stroke', toolData.lineColorActive)
+ }
+ currentTriangle = null
+ }
+
+ if (toolData.graphType === 'lineSegment') {
+ if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {
+ canvas.remove(currentLine)
+ } else {
+ currentLine.set('stroke', toolData.lineColorActive)
+ }
+ currentLine = null
+ }
+}
+// 鍒涘缓鐭╁舰
+function createRect(pointer) {
+ // 鐐瑰嚮浜嬩欢锛屼笉鐢熸垚鐭╁舰
+ if (JSON.stringify(downPoint) === JSON.stringify(pointer)) {
+ return
+ }
+
+ // 鍒涘缓鐭╁舰
+ // 鐭╁舰鍙傛暟璁＄畻
+ let top = Math.min(downPoint.y, pointer.y)
+ let left = Math.min(downPoint.x, pointer.x)
+ let width = Math.abs(downPoint.x - pointer.x)
+ let height = Math.abs(downPoint.y - pointer.y)
+
+ // 鐭╁舰瀵硅薄
+ const rect = new fabric.Rect({
+ top,
+ left,
+ width,
+ height,
+ fill: 'transparent',
+ stroke: toolData.lineColorActive
+ })
+ // 灏嗙煩褰㈡坊鍔犲埌鐢诲竷涓�
+ canvas.add(rect)
+ downPoint = null
+}
+// 榧犳爣鍦ㄧ敾甯冧笂绉诲姩
+function canvasMouseMove(e) {
+ if (toolData.graphType === 'rotundity' && currentCircle) {
+ const currentPoint = e.absolutePointer
+
+ let radius =
+ Math.min(Math.abs(downPoint.x - currentPoint.x), Math.abs(downPoint.y - currentPoint.y)) / 2
+ let top = currentPoint.y > downPoint.y ? downPoint.y : downPoint.y - radius * 2
+ let left = currentPoint.x > downPoint.x ? downPoint.x : downPoint.x - radius * 2
+
+ currentCircle.set('radius', radius)
+ currentCircle.set('top', top)
+ currentCircle.set('left', left)
+
+ canvas.requestRenderAll()
+ }
+ if (toolData.graphType === 'triangle' && currentTriangle) {
+ const currentPoint = e.absolutePointer
+
+ let width = Math.abs(downPoint.x - currentPoint.x)
+ let height = Math.abs(downPoint.y - currentPoint.y)
+
+ let top = currentPoint.y > downPoint.y ? downPoint.y : currentPoint.y
+ let left = currentPoint.x > downPoint.x ? downPoint.x : currentPoint.x
+
+ currentTriangle.set('width', width)
+ currentTriangle.set('height', height)
+ currentTriangle.set('top', top)
+ currentTriangle.set('left', left)
+ canvas.requestRenderAll()
+ }
+ if (toolData.graphType === 'lineSegment' && currentLine) {
+ const currentPoint = e.absolutePointer
+
+ currentLine.set('x2', currentPoint.x)
+ currentLine.set('y2', currentPoint.y)
+
+ canvas.requestRenderAll()
+ }
+}
+
+
+</script>
+<style scoped lang="less">
+.page-con {
+ height: 100%;
+ width: 100%;
+
+ // position: relative;
+ .canvas-header {
+ text-align: right;
+ padding: 10px;
+ background-color: #f1f1f1;
+ border-radius: 5px 5px 0 0;
+ }
+ .canvas-box {
+ width: 1000px;
+ margin: 20px auto;
+ background-color: #fff;
+ border-radius: 5px;
+ }
+ .brushBox {
+ width: 290px;
+ margin: 0 auto;
+ border-radius: 5px;
+ background: #fff;
+ overflow: hidden;
+ box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
+
+ .toolList {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .floatToolItem {
+ margin: 6px 8px;
+ padding: 5px;
+ width: 30px;
+ border-radius: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ // flex: 1;
+ font-size: 14px;
+
+ .imgBox {
+ height: 18px;
+ width: 18px;
+ text-align: center;
+ margin: 0 auto;
+ }
+ }
+
+ .floatToolItem:hover {
+ background-color: rgba(44, 44, 44, 0.2);
+ }
+
+ .layOutTool {
+ height: 20px;
+ margin-right: 5px;
+ border-left: 1px solid #e0e0e0;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1