Commit 855bcb2d authored by 范雪寒's avatar 范雪寒

fix: 4个图片选项时错位问题

parent fb9eb3a6
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import {
getAngleByPos,
......@@ -17,15 +17,15 @@ import {
ColorSpr,
removeItemFromArr, ShapeRect, alphaItem, circleMove, ShapeCircle, Wheel, delayCall, RichText, getMinScale
} from './Unit';
import {res, resAudio} from './resources';
import { res, resAudio } from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import * as _ from 'lodash';
import TWEEN from '@tweenjs/tween.js';
import {del} from 'selenium-webdriver/http';
import {text} from "@angular/core/src/render3";
import { del } from 'selenium-webdriver/http';
import { text } from "@angular/core/src/render3";
@Component({
......@@ -210,7 +210,7 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnInit() {
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
......@@ -219,7 +219,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {};
}
console.log('data:' , data);
console.log('data:', data);
if (!this.data.contentObj) {
this.data.contentObj = {};
}
......@@ -252,7 +252,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (!picArr || picArr.length == 0) {
const picArr = [];
for (let i = 0; i < 4; i ++) {
for (let i = 0; i < 4; i++) {
const data = {
answerId: "1",
......@@ -269,18 +269,18 @@ export class PlayComponent implements OnInit, OnDestroy {
if (i % 2 == 0) {
data.answerType = 'A';
answerArr.push(
{id: "A", text: "This is option A."},
{id: "B", text: "This is option B."},
{id: "C", text: "This is option C."},
{id: "D", text: "This is option D."},
{ id: "A", text: "This is option A." },
{ id: "B", text: "This is option B." },
{ id: "C", text: "This is option C." },
{ id: "D", text: "This is option D." },
);
} else {
data.answerType = 'B';
answerArr.push(
{id: "A", pic_url: "assets/play/ball_1.png"},
{id: "B", pic_url: "assets/play/ball_2.png"},
{id: "C", pic_url: "assets/play/ball_3.png"},
{id: "D", pic_url: "assets/play/ball_4.png"}
{ id: "A", pic_url: "assets/play/ball_1.png" },
{ id: "B", pic_url: "assets/play/ball_2.png" },
{ id: "C", pic_url: "assets/play/ball_3.png" },
{ id: "D", pic_url: "assets/play/ball_4.png" }
);
}
data['answerArr'] = answerArr;
......@@ -488,8 +488,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const addPicUrl = (url) => {
if (url) {
this.rawImages.set(url, url);
}
this.rawImages.set(url, url);
}
};
......@@ -497,8 +497,8 @@ export class PlayComponent implements OnInit, OnDestroy {
if (arr) {
for (let i = 0; i < arr.length; i++) {
addPicUrl( arr[i].pic_url);
addPicUrl( arr[i].question_pic_url);
addPicUrl(arr[i].pic_url);
addPicUrl(arr[i].question_pic_url);
const answerArr = arr[i].answerArr;
for (let j = 0; j < answerArr.length; j++) {
......@@ -530,11 +530,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.init();
this.update();
}
addServerListener() {
const c = (<any> window).courseware;
const c = (<any>window).courseware;
if (!c || !c.onEvent) {
return;
}
......@@ -876,7 +876,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.answerTitleArr = [];
const picBgW = 236;
const disW = (w - picBgW * 4) / 3;
for (let i = 0; i < 4; i ++) {
for (let i = 0; i < 4; i++) {
const key = 'pic_bg_' + keyArr[i];
const picBg = new MySprite(this.ctx);
picBg.init(this.images.get(key));
......@@ -1018,8 +1018,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const saveRect = data.rect;
const item = new ShapeRect(this.ctx);
item.setSize(saveRect.width, saveRect.height);
item.x = saveRect.x ;
item.y = saveRect.y ;
item.x = saveRect.x;
item.y = saveRect.y;
item['data'] = data;
this.renderArr.push(item);
......@@ -1084,7 +1084,7 @@ export class PlayComponent implements OnInit, OnDestroy {
card.data = curData;
this.picIndex ++;
this.picIndex++;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
}
......@@ -1253,7 +1253,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.ballArr = [];
let ballId = 1;
const ballLen = len * 1.1;
const addAngle = Math.round(360 / 16 * 100) / 100;
const addAngle = Math.round(360 / 16 * 100) / 100;
let ballGroupObj = {};
for (let i = 0; i < 16; i++) {
......@@ -1264,8 +1264,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const key = 'ball_' + ballId;
const ball = new MySprite(this.ctx);
ball.init(this.images.get(key));
ball.x = wheel.x ; // - 2;
ball.y = wheel.y ; // - 5;
ball.x = wheel.x; // - 2;
ball.y = wheel.y; // - 5;
ball.x += pos.x;
ball.y += pos.y;
this.renderArr.push(ball);
......@@ -1282,7 +1282,7 @@ export class PlayComponent implements OnInit, OnDestroy {
ballGroupObj[key].arr.push(light);
ballId ++;
ballId++;
if (ballId > 4) {
ballId = 1;
}
......@@ -1338,7 +1338,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.arm2.page2.visible = false;
this.picIndex ++ ;
this.picIndex++;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
......@@ -1864,7 +1864,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const petal = new MySprite(this.ctx);
const id = Math.ceil( Math.random() * 3 );
const id = Math.ceil(Math.random() * 3);
petal.init(this.images.get('petal_' + id));
const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
......@@ -2039,14 +2039,14 @@ export class PlayComponent implements OnInit, OnDestroy {
const rateArea = 0.9;
const num = this.picArr.length;
const id = this.getNextItemIndex();
const angle = 360 / num ; // this.picArr.length;
const angle = 360 / num; // this.picArr.length;
const targetAngle = 360 * 4 + id * angle - 90 - (angle * (1 - rateArea) / 2 + angle * rateArea * Math.random());
console.log('id: ', id);
this.picIndex = id;
this.lightDelayTime = 0;
rotateItem(this.wheel, 360 * 11, 2.2 , () => {
rotateItem(this.wheel, 360 * 11, 2.2, () => {
this.wheel.rotation = this.wheel.rotation % 360;
rotateItem(this.wheel, targetAngle, 1.6, () => {
......@@ -2055,7 +2055,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.showAllLight();
this.playAudio('tip');
moveItem(this.arrow, this.arrow.x, this.arrow.y - 20 * this.mapScale, 0.5, ( ) => {
moveItem(this.arrow, this.arrow.x, this.arrow.y - 20 * this.mapScale, 0.5, () => {
setTimeout(() => {
this.showQuestionWindow();
......@@ -2067,7 +2067,7 @@ export class PlayComponent implements OnInit, OnDestroy {
});
moveItem(this.arrow, this.arrow.x, this.arrow.baseY, 0.3, ( ) => {
moveItem(this.arrow, this.arrow.x, this.arrow.baseY, 0.3, () => {
}, TWEEN.Easing.Cubic.Out);
......@@ -2201,9 +2201,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const offX = -this.questionBg.width / 2 + 75
const picBgW = 236;
const disW = (w - picBgW * maxAnswerLength) / 3;
picBg.x = offX + picBg.width / 2 + i * (picBgW + disW);
picBg.x = ((i + 1) / (maxAnswerLength + 1) - 1 / 2) * (this.questionBg.width);
if (maxAnswerLength == 4) {
picBg.x = offX + picBg.width / 2 + i * (picBgW + disW);
} else {
picBg.x = ((i + 1) / (maxAnswerLength + 1) - 1 / 2) * (this.questionBg.width);
}
const picUrl = answerArr[i].pic_url;
if (picUrl) {
......@@ -2283,9 +2286,9 @@ export class PlayComponent implements OnInit, OnDestroy {
const tx = offX - (arm1.width) * arm1.scaleX + this.pageOffX * arm1.scaleX;
moveItem(this.arm1, tx, arm1.y, 0.8, () => {
this.canTouch = true;
this.clickLeft();
} );
this.canTouch = true;
this.clickLeft();
});
}
moveArm2() {
......@@ -2298,9 +2301,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = false;
moveItem(arm2, this.canvasWidth - tx, arm2.y, 0.8, () => {
this.canTouch = true;
this.clickRight();
} );
this.canTouch = true;
this.clickRight();
});
}
......@@ -2324,7 +2327,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const down = () => {
const targetY = this.stick.y + this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => {
tweenChange(this.ball, { y: targetY }, 0.8, () => {
up();
}, TWEEN.Easing.Quadratic.In, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
......@@ -2338,7 +2341,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const up = () => {
const targetY = this.stick.y - this.stick.height;
tweenChange(this.ball, {y: targetY}, 0.8, () => {
tweenChange(this.ball, { y: targetY }, 0.8, () => {
this.canTouch = true;
}, TWEEN.Easing.Quadratic.Out, () => {
this.stick.scaleY = (this.stick.y - this.ball.y) / this.stick.height;
......@@ -2377,7 +2380,7 @@ export class PlayComponent implements OnInit, OnDestroy {
showItem(curPic);
hideItem(this.mask);
this.picIndex ++;
this.picIndex++;
if (this.picIndex >= this.picArr.length) {
this.picIndex = 0;
}
......@@ -2475,19 +2478,19 @@ export class PlayComponent implements OnInit, OnDestroy {
this.canTouch = false;
const data = {y: this.arm1.y};
const tween = tweenChange(data, {y: this.arm1.y + this.canvasHeight}, 1,
const data = { y: this.arm1.y };
const tween = tweenChange(data, { y: this.arm1.y + this.canvasHeight }, 1,
() => {
this.canTouch = true;
this.resetArm();
},
this.canTouch = true;
this.resetArm();
},
TWEEN.Easing.Quadratic.In,
(item, progress) => {
this.arm1.y = item.y;
this.arm2.y = item.y;
this.arm1.y = item.y;
this.arm2.y = item.y;
});
});
}
......@@ -2548,82 +2551,82 @@ export class PlayComponent implements OnInit, OnDestroy {
if (this.IsPC()) {
if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => {
this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event);
this.mapDown(event);
});
setMxMyByMouse(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('mousemove', (event) => {
this.canvas.nativeElement.addEventListener('mousemove', (event) => {
setMxMyByMouse(event);
this.mapMove(event);
});
setMxMyByMouse(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('mouseup', (event) => {
this.canvas.nativeElement.addEventListener('mouseup', (event) => {
setMxMyByMouse(event);
this.mapUp(event);
});
setMxMyByMouse(event);
this.mapUp(event);
});
const setMxMyByMouse = (event) => {
const setMxMyByMouse = (event) => {
this.mx = event.offsetX;
this.my = event.offsetY;
};
this.mx = event.offsetX;
this.my = event.offsetY;
};
} else {
} else {
this.canvas.nativeElement.addEventListener('touchstart', (event) => {
this.canvas.nativeElement.addEventListener('touchstart', (event) => {
setMxMyByTouch(event);
this.mapDown(event);
});
setMxMyByTouch(event);
this.mapDown(event);
});
this.canvas.nativeElement.addEventListener('touchmove', (event) => {
setMxMyByTouch(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('touchmove', (event) => {
setMxMyByTouch(event);
this.mapMove(event);
});
this.canvas.nativeElement.addEventListener('touchend', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
this.canvas.nativeElement.addEventListener('touchend', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
this.canvas.nativeElement.addEventListener('touchcancel', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
this.canvas.nativeElement.addEventListener('touchcancel', (event) => {
setMxMyByTouch(event);
this.mapUp(event);
});
const setMxMyByTouch = (event) => {
const setMxMyByTouch = (event) => {
// console.log('in setMxMyByTouch', event);
if (event.touches.length <= 0) {
return;
}
// console.log('in setMxMyByTouch', event);
if (event.touches.length <= 0) {
return;
}
if (this.canvasLeft == null) {
setParentOffset();
}
if (this.canvasLeft == null) {
setParentOffset();
}
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
const setParentOffset = () => {
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
};
}
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
};
}
......@@ -2771,7 +2774,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
return { x, y };
}
......@@ -2779,7 +2782,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const _x = ex - sx;
const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
return len;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment