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