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/assets/main.css | 5
src/views/components/whiteBoard.vue | 608 ++++++++++++++++++++++++++++++++++++++
src/views/readerPages/webHome.vue | 321 +++++++++++++++++--
src/assets/js/config.ts | 2
4 files changed, 900 insertions(+), 36 deletions(-)
diff --git a/src/assets/js/config.ts b/src/assets/js/config.ts
index a307bde..e5d0973 100644
--- a/src/assets/js/config.ts
+++ b/src/assets/js/config.ts
@@ -9,6 +9,6 @@
export const appRefCode = "jingshieke";
export const goodsStore = `defaultGoodsStore${appId}`; // 榛樿鍟嗗搧搴�(涔﹀煄)
export const digitalTextbooks = "jsek_digitalTextbooks";//鏁板瓧鏁欐潗
-export const loginCtx = "http://jsysf.bnuic.com/home/#/digitalTextbooks?login=true"; //鐧诲綍閾炬帴
+export const loginCtx = "http://jsek.bnuic.com/home/#/digitalTextbooks?login=true"; //鐧诲綍閾炬帴
// export const loginCtx = ""; //鐧诲綍閾炬帴
diff --git a/src/assets/main.css b/src/assets/main.css
index 9d7db82..c90754c 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -248,6 +248,11 @@
.graphBox .graphSelect .lineSegment{
width:15px;
}
+.acitveGraphType{
+ padding:4px;
+ background-color: #e0e0e0;
+ border-radius: 5px;
+}
.el-input__inner {
border: none !important;
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>
diff --git a/src/views/readerPages/webHome.vue b/src/views/readerPages/webHome.vue
index f709147..2c9cb33 100644
--- a/src/views/readerPages/webHome.vue
+++ b/src/views/readerPages/webHome.vue
@@ -119,8 +119,8 @@
<div>榛樿璧勬簮</div>
<div :class="resourceType == 'default' ? 'text' : 'line'"></div>
</div>
- <hr class="hr" />
- <div class="tabItem hover" @click="selectResourceType('teacher')">
+ <hr class="hr" v-if="userInfo.role == 'Teacher'"/>
+ <div class="tabItem hover" @click="selectResourceType('teacher')" v-if="userInfo.role == 'Teacher'">
<div>鏁欏笀璧勬簮</div>
<div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
</div>
@@ -809,16 +809,24 @@
<div class="graphBox">
<div class="graphSelect">
<div class="flex1">
- <div class="square hover" @click="graphSelect('square')"></div>
+ <div :class="toolSelectData.graphType == 'square' ? 'acitveGraphType' : ''">
+ <div class="square hover" @click="graphSelect('square')"></div>
+ </div>
</div>
<div class="flex1">
- <div class="rotundity hover" @click="graphSelect('rotundity')"></div>
+ <div :class="toolSelectData.graphType == 'rotundity' ? 'acitveGraphType' : ''">
+ <div class="rotundity hover" @click="graphSelect('rotundity')"></div>
+ </div>
</div>
<div class="flex1">
- <div class="triangle hover" @click="graphSelect('triangle')"></div>
+ <div :class="toolSelectData.graphType == 'triangle' ? 'acitveGraphType' : ''">
+ <div class="triangle hover" @click="graphSelect('triangle')"></div>
+ </div>
</div>
<div class="flex1">
- <div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div>
+ <div :class="toolSelectData.graphType == 'lineSegment' ? 'acitveGraphType' : ''">
+ <div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div>
+ </div>
</div>
</div>
<div class="lineStyle">
@@ -1156,6 +1164,11 @@
</div>
</div>
+ <!-- 鐧芥澘 -->
+ <div v-if="whiteBoard" class="whiteBoardBox">
+ <whiteBoardBox @whiteBoardClose="whiteBoardClose"></whiteBoardBox>
+ </div>
+
<el-dialog
title="璧勬簮"
align-center
@@ -1349,6 +1362,7 @@
import formula from '@/views/components/formula.vue'
import wrongQuestion from '@/views/components/wrongQuestion.vue'
import voiceReader from '@/views/components/voiceReader.vue'
+import whiteBoardBox from '@/views/components/whiteBoard.vue'
import logo from '@/assets/images/header/logo.png'
import mulu from '@/assets/images/menu/mulu.png'
import biji from '@/assets/images/menu/biji.png'
@@ -1447,7 +1461,7 @@
import { microApps } from '@/child.ts'
import { open } from 'fs'
let token = localStorage.getItem('token')
-const canvasWith = ref(1000)
+const canvasWith = ref(800)
const canvasheight = ref(3000)
const screenWidth = ref(
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
@@ -1647,7 +1661,7 @@
console.log(res.datas, '鍥句功淇℃伅')
if (!res.datas.length) return
bookInfo.value = res.datas[0]
- if (res.datas[0].purchasedSaleMethodIdList.includes(res.datas[0].defaultSaleMethodId)) {
+ if (res.datas[0].purchasedSaleMethodIdList.indexOf(res.datas[0].defaultSaleMethodId) > -1) {
isBuy.value = true
} else {
isBuy.value = false
@@ -1726,11 +1740,7 @@
name: '鐭ヨ瘑鍥捐氨',
icon: zhishitupu,
isShow: bookConfig.value.textbookComponents.indexOf('6BE6A3DC') > -1
- },
- {
- name: '鎴浘',
- icon: jietu,
- isShow: bookConfig.value.textbookComponents.indexOf('CB0EACEC') > -1
+ // isShow: true
},
{
name: '涔︾',
@@ -1745,6 +1755,11 @@
bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 ||
bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 ||
bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
+ },
+ {
+ name: '鎴浘',
+ icon: jietu,
+ isShow: bookConfig.value.textbookComponents.indexOf('CB0EACEC') > -1
}
]
teachToolsMenuData = [
@@ -1835,6 +1850,7 @@
icon: baiban,
name: '鐧芥澘',
isShow: bookConfig.value.textbookComponents.indexOf('029DB3E0') > -1
+ // isShow: true
},
{
icon: biaozhu,
@@ -2628,6 +2644,7 @@
const menuItemClick = (name) => {
searchText.value = ''
allSearchReault.value = []
+ listLoading.value = false
if (menuState.open && activeMenu.value == name) {
menuState.open = false
} else {
@@ -2808,12 +2825,11 @@
getExercisesList()
break
case '妫�绱�':
- listLoading.value = true
allSearchReault.value = []
- console.log(window.qiankunState.searchBookByKeyword)
if (window.qiankunState && window.qiankunState.searchBookByKeyword) {
let searchReault = window.qiankunState.searchBookByKeyword(searchText.value)
if (searchReault.length > 0) {
+ listLoading.value = true
let catalogueList = sortArr(catalogueData.value, 'chapter')
if (catalogueList.length > 0) {
catalogueList.forEach((item) => {
@@ -2842,7 +2858,8 @@
}
})
}
- console.log(allSearchReault.value, 444)
+ listLoading.value = false
+ }else{
listLoading.value = false
}
}
@@ -3019,7 +3036,7 @@
//鐢诲竷鎮诞鎿嶄綔
-let canvas = null
+let canvasBox: any = null
const floatingToolData = reactive({
activeToolData: '', //閫変腑宸ュ叿
activeBookmark: '', //閫変腑涔︾
@@ -3030,6 +3047,10 @@
//鐢诲竷
const canvasShow = ref(false)
+let textBox: any = null
+let activeElBox: any = null
+//鐧芥澘
+const whiteBoard = ref(false)
//鎴浘浜嬩欢
const nameRef = ref()
@@ -3056,10 +3077,17 @@
}
canvasShow.value = false
+ whiteBoard.value = false
switch (floatingToolData.activeToolData) {
case '鐢荤瑪':
canvasShow.value = true
toolSelectData.activeTool = 'huabi'
+ canvasBox = new fabric.Canvas('canvasRef')
+ canvasBox.setZoom(1); // 璁剧疆鐢诲竷缂╂斁姣斾緥涓�1
+ canvasBox.absolutePan({ x: 0, y: 0 });
+ break
+ case '鐧芥澘':
+ whiteBoard.value = true
break
case '鏍囪':
break
@@ -3087,18 +3115,53 @@
const toolSelectHandle = (title) => {
toolSelectData.activeTool = title
toolSelectData.lineColorActive = ''
+ canvasBox.isDrawingMode = false
switch (title) {
case 'huabi':
- init()
+ canvasBox.skipTargetFind = false
+ canvasBox.isDrawingMode = true
+ toolSelectData.graphType = ''
+ canvasBox.freeDrawingBrush.color = '#333'
+ canvasBox.freeDrawingBrush.width = '3'
+ canvasBox.on('mouse:down', '') // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvasBox.on('mouse:up', '')
+ canvasBox.on('mouse:move', '')
break
case 'wenzi':
+ canvasBox.skipTargetFind = false
+ canvasBox.isDrawingMode = false
+ toolSelectData.graphType = ''
+ textBox = new fabric.IText('璇疯緭鍏ユ枃鏈�', {
+ left: 50,
+ top: 50,
+ fontSize: toolSelectData.fontSizeActive
+ })
+ canvasBox.add(textBox)
+ canvasBox.on('mouse:down', '') // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvasBox.on('mouse:up', '')
+ canvasBox.on('mouse:move', '')
+ break
+ case 'tuxing':
+ canvasBox.isDrawingMode = false
+ canvasBox.selectionColor = 'transparent'
+ canvasBox.skipTargetFind = true
+ toolSelectData.lineColorActive = '#000'
+ break
+ case 'chexiao':
+ canvasBox.skipTargetFind = false
+ canvasBox.isDrawingMode = false
+ canvasBox.remove(activeElBox)
+ canvasBox.requestRenderAll()
+ activeElBox = null
break
case 'tuichu':
+ canvasBox.skipTargetFind = false
+ canvasBox.isDrawingMode = false
canvasShow.value = false
floatingToolData.activeToolData = ''
break
case 'qingchu':
- canvas.clear()
+ canvasBox.clear()
break
}
}
@@ -3106,31 +3169,32 @@
//閫変腑鐢荤瑪绮楃粏
const selectThickness = (str) => {
toolSelectData.thicknessActive = str
- canvas.freeDrawingBrush.color = toolSelectData.thicknessActive
+ canvasBox.freeDrawingBrush.width = toolSelectData.thicknessActive
}
const selectLineType = (str) => {
toolSelectData.lineTypeActive = str
- init()
+ if (toolSelectData.lineTypeActive == 'dashed') {
+ canvasBox.freeDrawingBrush.strokeDashArray = [10]
+ } else {
+ canvasBox.freeDrawingBrush.strokeDashArray = null
+ }
}
//鐢荤瑪棰滆壊閫夋嫨
const lineColorSelect = (item) => {
toolSelectData.lineColorActive = item.key
- canvas.freeDrawingBrush.color = item.key
-}
-//鐢诲竷灞炴��
-const isDrawing = ref(true) // 鏄惁寮�鍚粯鍥撅紝true 寮�鍚紱false 鍏抽棴
-const init = () => {
- canvas = new fabric.Canvas('canvasRef', {
- isDrawingMode: isDrawing.value // 鍚敤缁樼敾妯″紡
- })
- canvas.freeDrawingBrush.color = toolSelectData.lineColorActive
- canvas.freeDrawingBrush.width = toolSelectData.thicknessActive
+ if ((toolSelectData.activeTool == 'huabi')) {
+ canvasBox.freeDrawingBrush.color = item.key
+ }
+ if ((toolSelectData.activeTool == 'wenzi')) {
+ textBox.fill = toolSelectData.lineColorActive
+ }
}
//鏂囧瓧澶у皬
const selectfontSize = (str) => {
toolSelectData.fontSizeActive = str
+ textBox.fontSize = toolSelectData.fontSizeActive
}
//閫夋嫨鍥惧舰
@@ -3138,14 +3202,190 @@
toolSelectData.graphType = type
switch (type) {
case 'square':
+ canvasBox.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvasBox.on('mouse:up', canvasMouseUp)
+ canvasBox.selectionBorderColor = toolSelectData.lineColorActive
break
case 'rotundity':
+ canvasBox.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvasBox.on('mouse:up', canvasMouseUp)
+ canvasBox.on('mouse:move', canvasMouseMove)
break
case 'triangle':
+ canvasBox.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvasBox.on('mouse:up', canvasMouseUp)
+ canvasBox.on('mouse:move', canvasMouseMove)
break
case 'lineSegment':
+ canvasBox.on('mouse:down', canvasMouseDown) // 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+ canvasBox.on('mouse:move', canvasMouseMove) // 榧犳爣鍦ㄧ敾甯冧笂绉诲姩
+ canvasBox.on('mouse:up', canvasMouseUp)
break
}
+}
+
+let downPoint = null // 榧犳爣鎸変笅鐨勫潗鏍�
+let upPoint = null
+let currentCircle = null // 涓存椂鍦嗭紝鍒涘缓鍦嗙殑鏃跺�欎娇鐢�
+let currentTriangle = null // 涓存椂涓夎褰�
+let currentLine = null // 涓存椂绾挎
+function canvasOnMouseDownDel(opt) {
+ // 鍙抽敭锛屼笖鍦ㄥ厓绱犱笂鍙抽敭
+ // button: 1-宸﹂敭锛�2-涓敭锛�3-鍙抽敭
+ // 鍦ㄧ敾甯冧笂鍙抽敭锛宼arget 涓� null
+ if (opt.button === 1 && opt.target) {
+ // 鑾峰彇褰撳墠鍏冪礌
+ activeElBox = opt.target
+ }
+}
+// 榧犳爣鍦ㄧ敾甯冧笂鎸変笅
+function canvasMouseDown(e) {
+ downPoint = e.absolutePointer
+ if (toolSelectData.graphType === 'rotundity') {
+ currentCircle = new fabric.Circle({
+ top: downPoint.y,
+ left: downPoint.x,
+ radius: 0,
+ fill: 'transparent',
+ stroke: toolSelectData.lineColorActive
+ })
+
+ canvasBox.add(currentCircle)
+ }
+ if (toolSelectData.graphType === 'triangle') {
+ currentTriangle = new fabric.Triangle({
+ top: downPoint.y,
+ left: downPoint.x,
+ width: 0,
+ height: 0,
+ fill: 'transparent',
+ stroke: toolSelectData.lineColorActive
+ })
+ canvasBox.add(currentTriangle)
+ }
+ if (toolSelectData.graphType === 'lineSegment') {
+ currentLine = new fabric.Line(
+ [
+ downPoint.x,
+ downPoint.y, // 璧峰鐐瑰潗鏍�
+ downPoint.x,
+ downPoint.y // 缁撴潫鐐瑰潗鏍�
+ ],
+ {
+ stroke: toolSelectData.lineColorActive // 绗旇Е棰滆壊
+ }
+ )
+ canvasBox.add(currentLine)
+ }
+}
+// 榧犳爣鍦ㄧ敾甯冧笂鏉惧紑
+function canvasMouseUp(e) {
+ if (toolSelectData.graphType === 'square') {
+ // 鍒涘缓鐭╁舰
+ createRect(e.absolutePointer)
+ }
+
+ if (toolSelectData.graphType === 'rotundity') {
+ if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {
+ canvasBox.remove(currentCircle)
+ } else {
+ if (currentCircle) {
+ currentCircle.set('stroke', toolSelectData.lineColorActive)
+ }
+ }
+ currentCircle = null
+ }
+
+ if (toolSelectData.graphType === 'triangle') {
+ if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {
+ canvasBox.remove(currentTriangle)
+ } else {
+ currentTriangle.set('stroke', toolSelectData.lineColorActive)
+ }
+ currentTriangle = null
+ }
+
+ if (toolSelectData.graphType === 'lineSegment') {
+ if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {
+ canvasBox.remove(currentLine)
+ } else {
+ currentLine.set('stroke', toolSelectData.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: toolSelectData.lineColorActive
+ })
+ // 灏嗙煩褰㈡坊鍔犲埌鐢诲竷涓�
+ canvasBox.add(rect)
+ downPoint = null
+}
+// 榧犳爣鍦ㄧ敾甯冧笂绉诲姩
+function canvasMouseMove(e) {
+ if (toolSelectData.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)
+
+ canvasBox.requestRenderAll()
+ }
+ if (toolSelectData.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)
+ canvasBox.requestRenderAll()
+ }
+ if (toolSelectData.graphType === 'lineSegment' && currentLine) {
+ const currentPoint = e.absolutePointer
+
+ currentLine.set('x2', currentPoint.x)
+ currentLine.set('y2', currentPoint.y)
+
+ canvasBox.requestRenderAll()
+ }
+}
+
+//鐧芥澘鍏抽棴
+const whiteBoardClose = () => {
+ whiteBoard.value = false
+ floatingToolData.activeToolData = ''
}
//鏍囪鏄剧ず闅愯棌
const labelShow = (str) => {
@@ -5082,7 +5322,7 @@
li > div {
// height: 50px;
- padding: 10px 36px;
+ padding: 10px 36px 10px 25px;
font-size: 16px;
display: flex;
align-items: center;
@@ -5457,11 +5697,22 @@
.wendabox {
width: 100%;
height: 82vh;
+ padding:20px;
iframe {
width: 100%;
height: 100%;
}
+}
+
+.whiteBoardBox {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 2000;
+ background-color: rgba(2, 2, 2, 0.3);
}
.myDialogs,
@@ -5489,9 +5740,9 @@
right: 0px !important;
}
- .el-dialog__body {
- padding: 20px !important;
- }
+ // .el-dialog__body {
+ // padding: 20px !important;
+ // }
.el-dialog__footer {
padding: 10px 20px 20px !important;
--
Gitblit v1.9.1