Commit b09336cf authored by Chen Jiping's avatar Chen Jiping

feat:完成模板开发

parent b5dadd1e
......@@ -4,6 +4,8 @@ export class ExercisesBean{
answerIndex;
indexAudioUrl;
answer : AnswerBean;
}
......
......@@ -11,9 +11,9 @@ export class Exercises {
bg: ShapeRect;
answer1: ShapeRect;
answer: ShapeRect;
answer2: ShapeRect;
answerLabel: Label2;
scaleX = 1;
......@@ -21,7 +21,9 @@ export class Exercises {
answered: Boolean = false;
rightPic: MySprite;
indexLabel : Label;
indexLabelBg : ShapeRect;
init(images, indexBgColor, data, scaleX = 1, scaleY = 1) {
......@@ -35,6 +37,8 @@ export class Exercises {
this.indexBgColor = indexBgColor;
this.index = this.data.answerIndex;
this.initBg();
this.initIndex();
......@@ -45,7 +49,7 @@ export class Exercises {
initBg() {
let height = 48 * this.scaleY;
let width = 580 * this.scaleX;
let width = 284 * this.scaleX;
const bg = new ShapeRect();
bg.setSize(width, height);
......@@ -53,14 +57,15 @@ export class Exercises {
this.bg = bg;
}
initIndex(){
let indexBg = new ShapeCircle();
indexBg.setRadius(23 * this.scaleX);
initIndex() {
let indexBg = new ShapeRect();
indexBg.setSize(43 * this.scaleX, 46 * this.scaleY);
indexBg.fillColor = this.indexBgColor;
indexBg.x = indexBg.width / 2;
indexBg.y = this.bg.height / 2;
indexBg.x = 0;
indexBg.y = (this.bg.height - indexBg.height) / 2;
indexBg.alpha = 0.7;
this.bg.addChild(indexBg);
this.indexLabelBg = indexBg;
let index = new Label();
index.text = this.index + "";
......@@ -70,46 +75,30 @@ export class Exercises {
index.fontColor = "#ffffff";
index.setScaleXY(this.scaleX);
index.refreshSize();
index.x = 0;
index.y = 0;
index.x = indexBg.width / 2;
index.y = indexBg.height / 2;
indexBg.addChild(index);
index.alpha = 0;
this.indexLabel = index;
}
initAnswer(){
let startX = 46 * this.scaleX + 7 * this.scaleX;
initAnswer() {
let answer1 = this.getAnswerView(this.data.answer1);
answer1.x = startX;
this.answer1 = answer1;
let startX = 43 * this.scaleX + 8 * this.scaleX;
let answer2 = this.getAnswerView(this.data.answer2);
answer2.x = startX + 253 * this.scaleX;
this.answer2 = answer2;
const rightPic = new MySprite();
rightPic.init(this.images.get('circle'));
rightPic.setScaleXY(this.scaleX);
rightPic.alpha = 0;
rightPic.y = this.bg.height / 2;
this.rightPic = rightPic;
if(this.data.answerIndex == '1'){
rightPic.x = answer1.x + answer1.width / 2;
}
else if(this.data.answerIndex == '2'){
rightPic.x = answer2.x + answer2.width / 2;
}
let answer = this.getAnswerView(this.data.answer);
answer.x = startX;
this.answer = answer;
this.bg.addChild(rightPic);
this.bg.addChild(answer);
}
getAnswerView(answerData){
getAnswerView(answerData) {
const getLabelText = (letter) => {
const text = new LabelText();
text.val = letter.val;
if (letter.isFill == '1') {
text.fontColor = "#c8161d";
text.fontColor = "#c5c5c5";
}
else {
text.fontColor = "#000000";
......@@ -138,6 +127,7 @@ export class Exercises {
answer.fontName = "MMB";
answer.setScaleXY(this.scaleX);
answer.refreshSize();
this.answerLabel = answer;
const answerBg = new ShapeRect();
answerBg.alpha = 0;
......@@ -156,11 +146,20 @@ export class Exercises {
checkAnswer(answerIndex) {
if(this.data.answerIndex == answerIndex){
this.rightPic.alpha = 1;
if (this.data.answerIndex == answerIndex) {
this.indexLabel.alpha = 1
this.answered = true;
let textArr = this.answerLabel.textArr;
for (let i = 0; i < textArr.length; ++i) {
if (textArr[i].fontColor == "#c5c5c5") {
textArr[i].fontColor = "#c8161d";
}
}
return true;
}
......
......@@ -52,6 +52,7 @@ export class Letter{
letter.fontName = "BRLNSDB";
letter.fontColor = "#ffffff";
letter.setScaleXY(this.scaleX);
letter.setMaxSize(80 * this.scaleX);
letter.refreshSize();
letter.x = 0;
letter.y = 0;
......
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import {
Label,
MySprite, ShapeRectNew, tweenChange,
} 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 TWEEN from '@tweenjs/tween.js';
import { Title } from './Title';
......@@ -16,6 +16,7 @@ import { getDefaultTile } from '../bean/TitleBean';
import { Listening } from './Listening';
import { Letter } from './Letter';
import { Exercises } from './Exercises.spreat';
import { AnswerBean, getDefaultExercises } from '../bean/Exercises';
......@@ -27,8 +28,8 @@ import { Exercises } from './Exercises.spreat';
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', { static: true }) wrap: ElementRef;
// 数据
data;
......@@ -70,14 +71,16 @@ export class PlayComponent implements OnInit, OnDestroy {
/**标题*/
title: Title;
listening : Listening;
listening: Listening;
curAudio;
letterArr : Array<Letter>;
letterArr: Array<Letter>;
exercisesArr: Array<Exercises> = [];
curIndex = 0;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.winResizeEventStream.next();
......@@ -89,7 +92,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
......@@ -458,17 +461,48 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.title = getDefaultTile();
}
if(!this.data.backgroudColor){
if (!this.data.backgroudColor) {
this.data.backgroudColor = "#B5C75F";
}
if(!this.data.letterArr){
if (!this.data.letterArr) {
this.data.letterArr = [];
}
if(!this.data.exercisesArr){
this.data.exercisesArr = [];
if (!this.data.zoneArr) {
this.data.zoneArr = [];
}
for (let i = this.data.zoneArr.length; i < 3; ++i) {
let zone = {
exercisesArr: []
};
this.data.zoneArr.push(zone);
}
for (let i = 0; i < this.data.zoneArr.length; ++i) {
let zone = this.data.zoneArr[i];
if (!zone) {
zone = {
exercisesArr: []
};
this.data.zoneArr[i] = zone;
}
for (let j = 0; j < zone.exercisesArr.length; ++j) {
if (!zone.exercisesArr[j]) {
zone.exercisesArr[j] = getDefaultExercises();
}
if (!zone.exercisesArr[j].answer) {
zone.exercisesArr[j].answer = new AnswerBean();
}
}
}
}
......@@ -505,28 +539,34 @@ export class PlayComponent implements OnInit, OnDestroy {
this.addUrlToAudioObj('listenAudio', this.data.audioUrl);
}
for(let i = 0; i < this.data.letterArr.length; ++ i){
for (let i = 0; i < this.data.letterArr.length; ++i) {
let letter = this.data.letterArr[i];
if(letter.audioUrl){
if (letter.audioUrl) {
this.addUrlToAudioObj(letter.audioUrl);
}
}
for (let i = 0; i < this.data.zoneArr.length; ++i) {
let zone = this.data.zoneArr[i];
//练习题音效
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
for (let i = 0; i < zone.exercisesArr.length; ++i) {
let exercises = zone.exercisesArr[i];
let exercises = this.data.exercisesArr[i];
if (exercises.answer && exercises.answer.audioUrl) {
this.addUrlToAudioObj('exercises_' + i, exercises.answer.audioUrl);
}
if (exercises.answer1 && exercises.answer1.audioUrl) {
this.addUrlToAudioObj('exercises_' + i, exercises.answer1.audioUrl);
if(exercises.indexAudioUrl){
this.addUrlToAudioObj('exercises_index_' + i, exercises.indexAudioUrl);
}
if (exercises.answer2 && exercises.answer2.audioUrl) {
this.addUrlToAudioObj('exercises_2_' + i, exercises.answer2.audioUrl);
}
}
}
......@@ -553,6 +593,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.letterArr = [];
this.exercisesArr = [];
this.curIndex = 0;
}
......@@ -599,7 +641,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initLetter(){
initLetter() {
let letterArr = this.data.letterArr;
......@@ -611,7 +653,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let y = this.canvasHeight / 2 - 218 * this.mapScale;
for(let i = 0; i < letterArr.length; ++ i){
for (let i = 0; i < letterArr.length; ++i) {
let letter = new Letter();
letter.init(this.images, letterArr[i], this.data.backgroudColor, this.mapScale, this.mapScale);
......@@ -623,59 +665,75 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initExercises(){
initExercises() {
let w = 344 * this.mapScale;
let h = 344 * this.mapScale;
let r = 20 * this.mapScale;
let y = this.canvasHeight / 2 - 119 * this.mapScale;
let w = 1200 * this.mapScale;
let dW = 50;
let h = 364 * this.mapScale;
let startX = (this.canvasWidth - (w * 3 + dW * (3 - 1))) / 2;
let r = 69 * this.mapScale;
const getView = (item, x = 0, y = 0) => {
let exercises = new Exercises();
exercises.init(this.images, this.data.backgroudColor, item, this.mapScale, this.mapScale);
exercises.bg.x = x;
exercises.bg.y = y;
return exercises;
}
for (let i = 0; i < this.data.zoneArr.length; ++i) {
const bg = new ShapeRectNew();
bg.setSize(w, h, r);
bg.fillColor = this.data.backgroudColor;
bg.x = (this.canvasWidth - w) / 2;
bg.y = this.canvasHeight / 2 - 119 * this.mapScale;
bg.x = startX;
bg.y = y;
bg.alpha = 0.1;
startX += w + dW;
this.renderArr.push(bg);
var dW = 582 * this.mapScale;
let exercisesArr = this.data.zoneArr[i].exercisesArr;
var dH = 105 * this.mapScale;
if(!exercisesArr || exercisesArr.length == 0){
continue;
}
let rows = Math.ceil(this.data.exercisesArr.length / 2);
let x = 29 * this.mapScale;
let cols = 2;
let disH = 57 * this.mapScale;
let startX = (this.canvasWidth - (cols - 1) * dW) / 2;;
let startY = (h - exercisesArr.length * 48 * this.mapScale - (exercisesArr.length - 1) * disH) / 2;
let startY = bg.y + 51 * this.mapScale;
let tempY = startY;
for (let j = 0; j < exercisesArr.length; ++j) {
for(let i = 0; i < this.data.exercisesArr.length; ++i){
let item = this.data.exercisesArr[i];
console.log(i);
let exercises = new Exercises();
exercises.index = i + 1;
exercises.init(this.images, this.data.backgroudColor, item, this.mapScale, this.mapScale);
this.renderArr.push(exercises.bg);
this.exercisesArr.push(exercises);
exercises.bg.x = startX - exercises.bg.width / 2;
exercises.bg.y = startY;
let exercises = getView(exercisesArr[j], x, startY);
//换行
if ((i + 1) % rows != 0) {
bg.addChild(exercises.bg);
startY += dH;
}
else {
startX += dW;
startY = tempY;
this.exercisesArr.push(exercises);
startY += exercises.bg.height + disH;
}
}
}
......@@ -715,10 +773,10 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
for(let i = 0; i < this.letterArr.length; ++ i){
for (let i = 0; i < this.letterArr.length; ++i) {
let letter = this.letterArr[i];
if(this.checkClickTarget(letter.bg)){
if (this.checkClickTarget(letter.bg)) {
this.curAudio = this.playAudio(letter.data.audioUrl, true);
break;
}
......@@ -731,20 +789,11 @@ export class PlayComponent implements OnInit, OnDestroy {
let exercises = this.exercisesArr[i];
if (this.checkClickTarget(exercises.answer1)) {
clicked = true;
this.clickExercises(exercises, i, '1');
break;
}
if (this.checkClickTarget(exercises.answer2)) {
if (this.checkClickTarget(exercises.answer) || this.checkClickTarget(exercises.indexLabelBg)) {
clicked = true;
this.clickExercises(exercises, i, '2');
this.clickExercises(exercises, i);
break;
}
......@@ -782,18 +831,10 @@ export class PlayComponent implements OnInit, OnDestroy {
}
clickExercises(exercises: Exercises, index: number, answerIndex: String) {
clickExercises(exercises: Exercises, index: number) {
const play = () => {
let key;
if (answerIndex == '1') {
key = 'exercises_' + index;
}
else if (answerIndex == '2') {
key = 'exercises_2_' + index;
}
let key = 'exercises_' + index;
const audio = this.audioObj[key];
......@@ -807,11 +848,20 @@ export class PlayComponent implements OnInit, OnDestroy {
}
else {
if (exercises.checkAnswer(answerIndex)) {
if (exercises.checkAnswer(this.curIndex + 1)) {
this.playAudio('right', true, () => {
play();
let key = 'exercises_index_' + index;
const audio = this.audioObj[key];
this.curAudio = audio;
this.playAudio(key, true);
});
this.curIndex += 1;
}
else {
play();
......
......@@ -2,7 +2,6 @@ const res = [
['play', "assets/play/play.png"],
['stop', "assets/play/stop.png"],
['circle', "assets/play/circle.png"],
];
......
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