Skip to content

yangchao / brains-h5

Go to a project
Commit 467a8e07 by yeran
Options

update

1 parent 3898f192
Expand all
Inline Side-by-side
Showing with 98 additions and 33 deletions
package.json
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"fabric": "^4.0.0-beta.7",
"less": "^3.9.0", "less": "^3.9.0",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
......
src/utils/sysTrainData.js
...@@ -3,15 +3,15 @@ let pics = { ...@@ -3,15 +3,15 @@ let pics = {
img: 'http://static.ledouya.com/Fv5aEzosPewxxfn1IUJ22hPO45QP', img: 'http://static.ledouya.com/Fv5aEzosPewxxfn1IUJ22hPO45QP',
dot: [ dot: [
{x: 100, y: 200, label: 1}, {x: 100, y: 200, label: 1},
{x: 110, y: 120, label: 2}, {x: 88, y: 100, label: 2},
{x: 122, y: 64, label: 3}, {x: 500, y: 200, label: 3},
{x: 162, y: 24, label: 4}, {x: 400, y: 369, label: 9},
{x: 230, y: 180, label: 5}, {x: 500, y: 451, label: 10},
{x: 292, y: 104, label: 6}, {x: 292, y: 104, label: 6},
{x: 300, y: 40, label: 7}, {x: 300, y: 40, label: 7},
{x: 180, y: 140, label: 8}, {x: 180, y: 140, label: 8},
{x: 240, y: 60, label: 9}, {x: 375, y: 88, label: 4},
{x: 20, y: 20, label: 10} {x: 375, y: 281, label: 5},
] ]
}, },
B: { B: {
......
src/views/pidRemember/sysTrain.vue
...@@ -7,17 +7,20 @@ ...@@ -7,17 +7,20 @@
{{'('+(tabIndex+1)+')'}}{{ gameState==='not' ? '请记住图中地点桩位置及其顺序' :'请依次点击复位图中的地点桩'}} {{'('+(tabIndex+1)+')'}}{{ gameState==='not' ? '请记住图中地点桩位置及其顺序' :'请依次点击复位图中的地点桩'}}
<div v-if="gameState === 'progress'" @click="next">结束训练</div> <div v-if="gameState === 'progress'" @click="next">结束训练</div>
</div> </div>
<div class="box" @click="handleClick"> <canvas id="myCanvas"></canvas>
<div class="dot-area" v-if="gameState === 'not'">
<div class="dot" <!-- <div style="margin-top: 50px" class="box" @click="handleClick">-->
v-for="(item,index) in dotData.dot" <!-- <div class="dot-area" v-if="gameState === 'not'">-->
:key="index" <!-- <div class="dot"-->
:style="{left:(item.x-15)+'px',top:(item.y-15)+'px'}" <!-- v-for="(item,index) in dotData.dot"-->
>{{item.label}} <!-- :key="index"-->
</div> <!-- :style="{left:(item.x-15)+'px',top:(item.y-15)+'px'}"-->
</div> <!-- >{{item.label}}-->
<img class="img" :src="dotData.img"/> <!-- </div>-->
</div> <!-- </div>-->
<!-- <img class="img" :src="dotData.img"/>-->
<!-- </div>-->
<!-- <viewer :images="[dotData.img]">--> <!-- <viewer :images="[dotData.img]">-->
<!-- <img :src="dotData.img">--> <!-- <img :src="dotData.img">-->
<!-- </viewer>--> <!-- </viewer>-->
...@@ -34,8 +37,8 @@ ...@@ -34,8 +37,8 @@
<script> <script>
import BaseCasePage from "../../framework/core/baseCasePage"; import BaseCasePage from "../../framework/core/baseCasePage";
import {pics} from '../../utils/sysTrainData'; import {pics} from '../../utils/sysTrainData';
import {fabric} from 'fabric'
export default new BaseCasePage({ export default new BaseCasePage({
name: "index", name: "index",
...@@ -44,22 +47,85 @@ ...@@ -44,22 +47,85 @@
tabSelectList: [], tabSelectList: [],
tabIndex: 0, tabIndex: 0,
dotData: {}, dotData: {},
offset_num: 10,//偏移值10个像素 offset_num: 12,//偏移值10个像素
tabList: [], tabList: [],
rightIndex: -1, rightIndex: -1,
gameState: "not" gameState: "not",
ctx: null
}; };
}, },
methods: { 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.gameState === "not") return;
if (this.rightIndex >= this.dotData.dot.length - 1) { if (this.rightIndex >= this.dotData.dot.length - 1) {
this.next(); this.next();
return; return;
} }
let top = e.offsetY;
let left = e.offsetX;
let rightPoint = this.dotData.dot[this.rightIndex + 1]; let rightPoint = this.dotData.dot[this.rightIndex + 1];
console.log('rightPoint', rightPoint.x, rightPoint.y); console.log('rightPoint', rightPoint.x, rightPoint.y);
console.log('point', left, top); console.log('point', left, top);
...@@ -76,6 +142,7 @@ ...@@ -76,6 +142,7 @@
start() { start() {
this.fillList = []; this.fillList = [];
this.updateGameState("progress"); this.updateGameState("progress");
this.draw(false);
}, },
initTabData() { initTabData() {
this.rightIndex = -1; this.rightIndex = -1;
...@@ -88,6 +155,7 @@ ...@@ -88,6 +155,7 @@
hit: false hit: false
}) })
} }
this.draw();
}, },
next() { next() {
this.$message({ this.$message({
...@@ -121,6 +189,7 @@ ...@@ -121,6 +189,7 @@
}, },
mounted() { mounted() {
this.tabSelectList = JSON.parse(this.$route.query.labels); this.tabSelectList = JSON.parse(this.$route.query.labels);
this.ctx = new fabric.Canvas('myCanvas');
this.initTabData(); this.initTabData();
} }
}); });
......
src/views/studiesChina/answerStudies.vue
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
} }
.item { .item {
width: 8.3333%; width: 9%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -194,7 +194,8 @@ ...@@ -194,7 +194,8 @@
} }
.text-2 { .text-2 {
width: 90%; margin-left: 8px;
margin-right: 8px;
height: 80px; height: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
......
src/views/zhiExercise/index.vue
...@@ -8,12 +8,6 @@ ...@@ -8,12 +8,6 @@
<div class="paragraph"><span>注意事项：</span></div> <div class="paragraph"><span>注意事项：</span></div>
<div class="paragraph">1，本项目平时也可以脱离屏幕，单纯做眼球横向和纵向运动，头不转动，眼球最大范围地快速左右看和上下看即可；</div> <div class="paragraph">1，本项目平时也可以脱离屏幕，单纯做眼球横向和纵向运动，头不转动，眼球最大范围地快速左右看和上下看即可；</div>
<div class="paragraph">2，若眼球有伤或正在发炎，请治疗痊愈后才进行本项目训练。训练初期有眼球酸胀感属于正常现象；</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 class="m-selector">
黑球运动速度 黑球运动速度
<div v-for="(item, index) in caseConfig" :key="index" :index="index" :item="item"> <div v-for="(item, index) in caseConfig" :key="index" :index="index" :item="item">
......
src/views/zhiExercise/zhiDrill.vue
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
start() { start() {
this.showBtn = false; this.showBtn = false;
this.timer = setInterval(() => { // 小球运动计时器 this.timer = setInterval(() => { // 小球运动计时器
if (this.count_time > 580) { if (this.count_time > 0) {
this.ballMove(); this.ballMove();
if (this.letter && (this.count_time >= this.lastShowTime - 1)) { if (this.letter && (this.count_time >= this.lastShowTime - 1)) {
} else { } else {
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
if (this.levelConfig.mode == 2) { // 固定字符串模式 if (this.levelConfig.mode == 2) { // 固定字符串模式
let charsStr = this.levelConfig.charsStr; 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)); this.answer.push(charsStr.charAt(i));
} }
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!