update

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "element-ui": "^2.13.0",
+    "fabric": "^4.0.0-beta.7",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
     "lib-flexible": "^0.3.2",

src/utils/sysTrainData.js

@@ -3,15 +3,15 @@ let pics = {
         img: 'http://static.ledouya.com/Fv5aEzosPewxxfn1IUJ22hPO45QP',
         dot: [
             {x: 100, y: 200, label: 1},
-            {x: 110, y: 120, label: 2},
-            {x: 122, y: 64, label: 3},
-            {x: 162, y: 24, label: 4},
-            {x: 230, y: 180, label: 5},
+            {x: 88, y: 100, label: 2},
+            {x: 500, y: 200, label: 3},
+            {x: 400, y: 369, label: 9},
+            {x: 500, y: 451, label: 10},
             {x: 292, y: 104, label: 6},
             {x: 300, y: 40, label: 7},
             {x: 180, y: 140, label: 8},
-            {x: 240, y: 60, label: 9},
-            {x: 20, y: 20, label: 10}
+            {x: 375, y: 88, label: 4},
+            {x: 375, y: 281, label: 5},
         ]
     },
     B: {

src/views/pidRemember/sysTrain.vue

@@ -7,17 +7,20 @@
             {{'('+(tabIndex+1)+')'}}{{ gameState==='not' ? '请记住图中地点桩位置及其顺序' :'请依次点击复位图中的地点桩'}}
             <div v-if="gameState === 'progress'" @click="next">结束训练</div>
         </div>
-        <div class="box" @click="handleClick">
-            <div class="dot-area" v-if="gameState === 'not'">
-                <div class="dot"
-                     v-for="(item,index) in dotData.dot"
-                     :key="index"
-                     :style="{left:(item.x-15)+'px',top:(item.y-15)+'px'}"
-                >{{item.label}}
-                </div>
-            </div>
-            <img class="img" :src="dotData.img"/>
-        </div>
+        <canvas id="myCanvas"></canvas>
+
+        <!--                <div style="margin-top: 50px" class="box" @click="handleClick">-->
+        <!--                    <div class="dot-area" v-if="gameState === 'not'">-->
+        <!--                        <div class="dot"-->
+        <!--                             v-for="(item,index) in dotData.dot"-->
+        <!--                             :key="index"-->
+        <!--                             :style="{left:(item.x-15)+'px',top:(item.y-15)+'px'}"-->
+        <!--                        >{{item.label}}-->
+        <!--                        </div>-->
+        <!--                    </div>-->
+        <!--                    <img class="img" :src="dotData.img"/>-->
+        <!--                </div>-->
+
         <!--        <viewer :images="[dotData.img]">-->
         <!--            <img :src="dotData.img">-->
         <!--        </viewer>-->
@@ -34,8 +37,8 @@
 
 <script>
     import BaseCasePage from "../../framework/core/baseCasePage";
-
     import {pics} from '../../utils/sysTrainData';
+    import {fabric} from 'fabric'
 
     export default new BaseCasePage({
         name: "index",
@@ -44,22 +47,85 @@
                 tabSelectList: [],
                 tabIndex: 0,
                 dotData: {},
-                offset_num: 10,//偏移值10个像素
+                offset_num: 12,//偏移值10个像素
                 tabList: [],
                 rightIndex: -1,
-                gameState: "not"
+                gameState: "not",
+                ctx: null
             };
         },
         methods: {
-            handleClick(e) {
+            draw(drawPoints = true) {
+                this.ctx.clear();
+                this.ctx.setWidth(window.innerWidth);
+                this.renderImage(this.ctx, [
+                    this.dotData.img
+                ], drawPoints)
+            },
+            renderImage(ctx, imgSrc, drawPoints = true) {
+
+                fabric.Image.fromURL(imgSrc[0], (img) => {
+                    let scaleX = ctx.width / img.width;
+                    let ctxHeight = scaleX * img.height;
+                    ctx.setHeight(ctxHeight);
+                    let scaleY = ctx.height / img.height;
+                    console.log(scaleX, ctx.width, ctx.height, ctx.width / ctx.height);
+                    console.log(img.width, img.height, img.width / img.height);
+                    img.set({
+                        // 通过scale来设置图片大小，这里设置和画布一样大
+                        scaleX: scaleX,
+                        scaleY: scaleY,
+                    });
+                    // 设置背景
+                    ctx.setBackgroundImage(img, ctx.renderAll.bind(ctx));
+                    ctx.renderAll();
+                    if (drawPoints) {
+                        this.drawPoints(ctx, this.dotData.dot, 10, scaleX, scaleY);
+                    } else {
+                        ctx.on({
+                            'mouse:down': (o) => {
+                                //鼠标在画布上按下事件(起点)
+                                let left = o.pointer.x / scaleX;   //鼠标按下的X的起点
+                                let top = o.pointer.y / scaleY;   //鼠标按下的y的起点
+                                this.handleClick(left, top);
+                            },
+                        })
+                    }
+                });
+            },
+            drawPoints(ctx, points, r, scaleX = 1, scaleY = 1) {
+                for (let i = 0; i < points.length; i++) {
+                    let circle = new fabric.Circle({
+                        radius: points[i].r || r,
+                        originX: 'center',
+                        originY: 'center',
+                        left: scaleX * points[i].x,
+                        top: scaleY * points[i].y,
+                        strokeWidth: 2,
+                        stroke: "#db3b21",
+                        fill: false,
+                        selectable: false
+                    });
+                    let text = new fabric.IText(i + 1 + '', {
+                        originX: 'center',
+                        originY: 'center',
+                        left: scaleX * points[i].x,
+                        top: scaleY * points[i].y,
+                        fill: '#fff',
+                        fontSize: 12,
+                        selectable: false
+                    });
+                    ctx.add(circle);
+                    ctx.add(text);
+                }
+            },
+            handleClick(left, top) {
                 if (this.gameState === "not") return;
 
                 if (this.rightIndex >= this.dotData.dot.length - 1) {
                     this.next();
                     return;
                 }
-                let top = e.offsetY;
-                let left = e.offsetX;
                 let rightPoint = this.dotData.dot[this.rightIndex + 1];
                 console.log('rightPoint', rightPoint.x, rightPoint.y);
                 console.log('point', left, top);
@@ -76,6 +142,7 @@
             start() {
                 this.fillList = [];
                 this.updateGameState("progress");
+                this.draw(false);
             },
             initTabData() {
                 this.rightIndex = -1;
@@ -88,6 +155,7 @@
                         hit: false
                     })
                 }
+                this.draw();
             },
             next() {
                 this.$message({
@@ -121,6 +189,7 @@
         },
         mounted() {
             this.tabSelectList = JSON.parse(this.$route.query.labels);
+            this.ctx = new fabric.Canvas('myCanvas');
             this.initTabData();
         }
     });

src/views/studiesChina/answerStudies.vue

@@ -176,7 +176,7 @@
     }
 
     .item {
-        width: 8.3333%;
+        width: 9%;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -194,7 +194,8 @@
     }
 
     .text-2 {
-        width: 90%;
+        margin-left: 8px;
+        margin-right: 8px;
         height: 80px;
         display: flex;
         align-items: center;

src/views/zhiExercise/index.vue

@@ -8,12 +8,6 @@
         <div class="paragraph"><span>注意事项：</span></div>
         <div class="paragraph">1，本项目平时也可以脱离屏幕，单纯做眼球横向和纵向运动，头不转动，眼球最大范围地快速左右看和上下看即可；</div>
         <div class="paragraph">2，若眼球有伤或正在发炎，请治疗痊愈后才进行本项目训练。训练初期有眼球酸胀感属于正常现象；</div>
-        <!--        <div class="speed">-->
-        <!--            黑球运动速度-->
-        <!--            <div class="item" :class="{active: speed == 1}" @click="changSpeed(1)">慢速</div>-->
-        <!--            <div class="item" :class="{active: speed == 2}" @click="changSpeed(2)">中速</div>-->
-        <!--            <div class="item" :class="{active: speed == 3}" @click="changSpeed(3)">快速</div>-->
-        <!--        </div>-->
         <div class="m-selector">
             黑球运动速度
             <div v-for="(item, index) in caseConfig" :key="index" :index="index" :item="item">

src/views/zhiExercise/zhiDrill.vue

@@ -49,7 +49,7 @@
             start() {
                 this.showBtn = false;
                 this.timer = setInterval(() => { // 小球运动计时器
-                    if (this.count_time > 580) {
+                    if (this.count_time > 0) {
                         this.ballMove();
                         if (this.letter && (this.count_time >= this.lastShowTime - 1)) {
                         } else {
@@ -93,7 +93,7 @@
 
                 if (this.levelConfig.mode == 2) { // 固定字符串模式
                     let charsStr = this.levelConfig.charsStr;
-                    for (let i = 0; i < charsStr.length; i++) {
+                    for (let i = charsStr.length-1; i >= 0; i--) {
                         this.answer.push(charsStr.charAt(i));
                     }
                 }