优化画布功能

TEAMModelOS/ClientApp/src/view/task/mark/ByQu.vue

@@ -51,7 +51,7 @@
                 <!-- <Icon :custom="isFull ? 'iconfont icon-cancel-full' : 'iconfont icon-full-screen'" class="tool-icon" :title="isFull ? '取消全屏' : '全屏'" @click="togglefull" /> -->
             </div>
             <div class="mark-stage">
-                <MarkCanvas :mouseStatus="mouseStatus" :bgImg="ansImg" :drawImgData="drawImgData"></MarkCanvas>
+                <MarkCanvas :status="mouseStatus" :bgImg="ansImg" :drawImgData="drawImgData"></MarkCanvas>
             </div>
             <!-- 打分部分 -->
             <div class="score-wrap">
@@ -60,7 +60,7 @@
                     <InputNumber style="flex:1" :max="10" :min="1" v-model="score" @on-change="setScore"></InputNumber>
                 </div>
                 <div class="quick-score-box">
-                    <Button size="small" type="info" style="margin-right:8px" ghost @click="score = 10">满分</Button>
+                    <Button size="small" type="info" style="margin-right:8px" ghost @click="score = quScoreArr.length - 1">满分</Button>
                     <Button size="small" type="error" ghost @click="score = 0">零分</Button>
                     <Icon :type="isShowNum ? 'md-eye-off' : 'md-eye'" class="toggle-num-status" @click="isShowNum = !isShowNum" />
                     <div :class="['score-key-box', isShowNum ? '':'hind-key-box']">
@@ -114,7 +114,6 @@ export default {
             autoQu: true,//自动切换下一题
             autoStu: true,//自动获取下一学生
             toggleStatus: false,
-            activeIcon: -1,
             isShowNum: true,
             quIndex: 0,
             childIndex: -1,
@@ -134,9 +133,16 @@ export default {
             this.toggleStatus = false
         },
         drawImg(imgIndex) {
+            let curImg = new Image()
+            curImg.src = this.imgs[imgIndex]
+            curImg.onload = () => {
+                this.mouseStatus = 'img'
+                this.drawImgData = curImg
+            }
         },
         //清除所有批注
         clear() {
+
         },
         /**将答案绘制到canvas上 */
         ansToImg() {
@@ -310,11 +316,11 @@ export default {
     },
     computed: {
         //当前题目进度
-        curProg(){
-            let index = this.getScoreIndex(this.quIndex,this.childIndex)
+        curProg() {
+            let index = this.getScoreIndex(this.quIndex, this.childIndex)
             let marked = 0
-            this.stusInfo.forEach(item=>{
-                if(item.info.score[index] != -1){
+            this.stusInfo.forEach(item => {
+                if (item.info.score[index] != -1) {
                     marked++
                 }
             })
@@ -322,7 +328,8 @@ export default {
         },
         curAnswer() {
             if (this.stusInfo && this.stusInfo[this.stuIndex]) {
-                this.score = this.stusInfo[this.stuIndex].info.score[this.getScoreIndex(this.quIndex, this.childIndex)]
+                let s = this.stusInfo[this.stuIndex].info.score[this.getScoreIndex(this.quIndex, this.childIndex)]
+                this.score = s == -1 ? null : s
                 if (this.stusInfo[this.stuIndex].info.answer) {
                     return this.stusInfo[this.stuIndex].info.answer[this.getScoreIndex(this.quIndex, this.childIndex)]
                 } else {

TEAMModelOS/ClientApp/src/view/task/mark/ByStu.vue

@@ -51,7 +51,7 @@
                 <!-- <Icon :custom="isFull ? 'iconfont icon-cancel-full' : 'iconfont icon-full-screen'" class="tool-icon" :title="isFull ? '取消全屏' : '全屏'" @click="togglefull" /> -->
             </div>
             <div class="mark-stage">
-                <MarkCanvas :mouseStatus="mouseStatus" :bgImg="ansImg" :drawImgData="drawImgData" style="padding-bottom:85px"></MarkCanvas>
+                <MarkCanvas :status="mouseStatus" :bgImg="ansImg" :drawImgData="drawImgData" style="padding-bottom:85px"></MarkCanvas>
                 <!-- 题号显示部分 -->
                 <div class="qu-index-box">
                     <div class="qu-tips-box">
@@ -156,13 +156,12 @@ export default {
     },
     methods: {
         drawImg(imgIndex) {
-            // this.activeIcon = imgIndex
-            // this.curImg = new Image()
-            // this.curImg.src = this.imgs[imgIndex]
-            // this.curImg.onload = () => {
-            //     this.mouseStatus = 'img'
-            //     this.startImg({ x: 100, y: 100 })
-            // }
+            let curImg = new Image()
+            curImg.src = this.imgs[imgIndex]
+            curImg.onload = () => {
+                this.mouseStatus = 'img'
+                this.drawImgData = curImg
+            }
         },
         //清除所有批注
         clear() {

TEAMModelOS/ClientApp/src/view/task/mark/MarkCanvas.vue

@@ -16,7 +16,7 @@ export default {
     name: 'MarkCanvas',
     props: {
         // 当前鼠标操作类型
-        mouseStatus: {
+        status: {
             type: String,
             default: 'move',
             required: true
@@ -28,12 +28,13 @@ export default {
         },
         //canvas绘制图片的数据（eg:添加表情包）
         drawImgData: {
-            type: [String, Object],
+            // type: [String, Object],
             default: ''
         }
     },
     data() {
         return {
+            imgData:undefined,
             stage: undefined,
             orgLayer: undefined,
             markLayer: undefined,
@@ -49,7 +50,7 @@ export default {
                 x: 0,
                 y: 0
             },
-            // mouseStatus: 'move', //move：移动  rect:画矩形 resize:调整图形
+            mouseStatus: '', //move：移动  rect:画矩形 resize:调整图形
             resizeBefore: '',
             rect: undefined,
             oval: undefined,
@@ -67,18 +68,12 @@ export default {
             }
             return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
         },
-        move(index) {
-            this.activeIcon = index
+        move() {
             this.mouseStatus = 'move'
         },
-        drawImg(imgIndex) {
-            // this.activeIcon = imgIndex
-            // this.curImg = new Image()
-            // this.curImg.src = this.imgs[imgIndex]
-            // this.curImg.onload = () => {
-            //     this.mouseStatus = 'img'
-            //     this.startImg({ x: 100, y: 100 })
-            // }
+        drawImg() {
+            this.mouseStatus = 'img'
+            this.startImg({ x: 100, y: 100 })
         },
         startImg(current) {
             let _this = this
@@ -86,7 +81,7 @@ export default {
                 id: this.uuid(),
                 draggable: false,
                 strokeScaleEnabled: false,
-                image: _this.curImg,
+                image: _this.imgData ,
                 width: 80,
                 height: 80,
                 x: current.x,
@@ -113,8 +108,7 @@ export default {
             this.stage.add(this.markLayer)
             this.img = null
         },
-        drawText(index) {
-            this.activeIcon = index
+        drawText() {
             this.mouseStatus = 'text'
         },
         startText(current) {
@@ -212,8 +206,7 @@ export default {
             this.markLayer.add(this.text)
             this.stage.add(this.markLayer)
         },
-        drawLine(index) {
-            this.activeIcon = index
+        drawLine() {
             this.mouseStatus = 'line'
         },
         startLine(current) {
@@ -250,8 +243,7 @@ export default {
             this.markLayer.add(this.line)
             this.stage.add(this.markLayer)
         },
-        drawArrow(index) {
-            this.activeIcon = index
+        drawArrow() {
             this.mouseStatus = 'arrow'
         },
         // 绘制箭头
@@ -294,8 +286,7 @@ export default {
             this.markLayer.add(this.arrow)
             this.stage.add(this.markLayer)
         },
-        drawOval(index) {
-            this.activeIcon = index
+        drawOval() {
             this.mouseStatus = 'oval'
         },
         startOval(current) {
@@ -346,18 +337,8 @@ export default {
             this.markLayer.add(this.oval)
             this.stage.add(this.markLayer)
         },
-        drawIcon(index) {
-            this.activeIcon = index
-        },
-        review(index) {
-            this.activeIcon = index
-        },
-        cancelFull(index) {
-            this.activeIcon = index
-        },
         //绘制矩形
-        drawRect(index) {
-            this.activeIcon = index
+        drawRect() {
             this.mouseStatus = 'rect'
         },
         startRect(current) {
@@ -444,11 +425,6 @@ export default {
                 this.myScale()
             }
         },
-        //还原比例
-        restore() {
-            this.scaleDefault = 1
-            this.myScale()
-        },
         myScale() {
             this.stage.children.forEach(item => {
                 item.scale({
@@ -582,8 +558,7 @@ export default {
         },
 
         //清除所有批注
-        clear(index) {
-            this.activeIcon = index
+        clear() {
             this.markLayer.removeChildren()
             this.stage.add(this.markLayer)
         }
@@ -640,7 +615,7 @@ export default {
         bgImg: {
             handler(n, o) {
                 this.$nextTick(() => {
-                    // this.restore()
+                    this.restore()
                     this.orgLayer.removeChildren()
                     this.markLayer.removeChildren()
                     let imageObj = new Image()
@@ -667,6 +642,18 @@ export default {
             },
             immediate: true,
             deep: true
+        },
+        drawImgData: {
+            handler(n, o) {
+                this.imgData = n
+                this.drawImg()
+            }
+        },
+        status:{
+            handler(n,o){
+                this.mouseStatus = n
+            },
+            immediate:true
         }
     }
 }