Commit ffcc9f93 authored by chaiyajie's avatar chaiyajie

完成

parent 68f7a736
......@@ -82,7 +82,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
onAudioUploadSuccessByItem(e, item, key) {
console.log(item);
item[key] = e.url;
this.save();
}
/**
* 储存数据
......
......@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import {
Label,
MySprite, ShapeRect, ShapeRectNew, tweenChange,
MySprite, ShapeCircle, ShapeRect, ShapeRectNew, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
......@@ -59,7 +59,7 @@ export class PlayComponent implements OnInit, OnDestroy {
saveKey = 'test_008';
pause;
btnLeft;
btnRight;
pic1;
......@@ -79,6 +79,11 @@ export class PlayComponent implements OnInit, OnDestroy {
all_words_loaded = false;
curAudio ;
play = false;
words_bg ;
title_bg ;
wordLoad :{[key:string]:{loaded : boolean;letters:{[key:string]:{loaded:boolean, letter:Label}}}} = {};
setWordLoad(id: string, letterId:string, loaded:boolean, letter: Label):void{
......@@ -183,7 +188,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') {
this.data = data;
}
console.log('data:' , data);
// console.log('data:' , data);
// 初始化 各事件监听
this.initListener();
......@@ -384,7 +389,12 @@ export class PlayComponent implements OnInit, OnDestroy {
callback();
};
}
if(this.curAudio) {
this.curAudio.pause() ;
}
audio.play();
this.play = true ;
this.curAudio = audio ;
}
}
......@@ -603,6 +613,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.wordLoad = {};
this.play = false ;
}
......@@ -621,28 +633,28 @@ export class PlayComponent implements OnInit, OnDestroy {
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
const pause = new MySprite();
pause.init(this.images.get('pause'));
pause.x = this.canvasWidth - 50 * this.mapScale;
pause.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
pause.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.renderArr.push(pause);
this.btnLeft = btnLeft;
this.pause = pause;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
// const btnRight = new MySprite();
// btnRight.init(this.images.get('btn_right'));
// btnRight.x = this.canvasWidth - 50 * this.mapScale;
// btnRight.y = this.canvasHeight - 100 * this.mapScale;
// btnRight.setScaleXY(this.mapScale);
//
// this.renderArr.push(btnRight);
//
// this.btnRight = btnRight;
}
initPic() {
......@@ -650,47 +662,84 @@ export class PlayComponent implements OnInit, OnDestroy {
// 初始化单词显示
this.initWord();
// const title_bg = new ShapeRectNew();
// title_bg.y = 0;
// title_bg.setSize(200,200,20) ;
// title_bg.setOutLine('#000000',2) ;
// this.renderArr.push(title_bg);
// const maxW = this.canvasWidth * 0.7;
//
// const pic1 = new MySprite();
// pic1.init(this.images.get(this.data.pic_url));
// pic1.x = this.canvasWidth / 2;
// pic1.y = this.canvasHeight / 2;
// pic1.setScaleXY(maxW / pic1.width);
//
// this.renderArr.push(pic1);
// this.pic1 = pic1;
//
//
// const label1 = new Label();
// label1.text = this.data.text;
// label1.textAlign = 'center';
// label1.fontSize = 50;
// label1.fontName = 'BRLNSDB';
// label1.fontColor = '#ffffff';
//
// pic1.addChild(label1);
// console.log('pic1:',pic1) ;
//
//
//
//
// const pic2 = new MySprite();
// pic2.init(this.images.get(this.data.pic_url_2));
// pic2.x = this.canvasWidth / 2 + this.canvasWidth;
// pic2.y = this.canvasHeight / 2;
// pic2.setScaleXY(maxW / pic2.width);
//
// this.renderArr.push(pic2);
// this.pic2 = pic2;
//
// this.curPic = pic1;
const body_bg = new ShapeRectNew();
let wordNum = this.data.wordArr.length;
let line = wordNum % 2 == 0 ? wordNum / 2 :Math.ceil(wordNum / 2) ;
// console.log('line: ', line) ;
let beginX = 0 ;
let beginY = 0;
let endX = 0 ;
let endY = 0 ;
for (let i = 0; i < wordNum; ++ i) {
if ( i == 0) {
beginX = this.word_arr_left[i].x;
beginY = this.word_arr_left[i].y;
} else if( i == line - 1){
endY = this.word_arr[i].y + this.word_arr[i].height;
} else if( i == line){
endX = this.word_arr[i].x + this.word_arr[i].width ;
}
body_bg.addChild(this.word_arr_left[i]) ;
body_bg.addChild(this.word_arr[i]) ;
}
body_bg.setSize(1200,600,60) ;
body_bg.x = (this.canvasWidth - body_bg.width) / 2 ;
body_bg.y = (this.canvasHeight - body_bg.height) /2 ;
body_bg.setOutLine('yellow',2) ;
this.renderArr.push(body_bg);
const words_bg = new ShapeCircle();
words_bg.setRadius(50);
words_bg.fillColor = '#975833' ;
words_bg.x = this.canvasWidth / 2 ;
words_bg.y = (this.canvasHeight - body_bg.height) /2 ;
const words_content = new Label();
words_content.text = this.data.words.trim().split('').join('_');
words_content.textAlign = 'center';
words_content.fontSize = 50;
words_content.fontName = 'GOTHICB';
words_content.fontColor = 'yellow';
words_content.refreshSize();
words_bg.addChild(words_content) ;
this.words_bg = words_bg ;
this.renderArr.push(this.words_bg);
const title_bg = new ShapeRect();
title_bg.fillColor = 'transparent' ;
const title_left_bg = new ShapeRect();
title_left_bg.fillColor = 'yellow' ;
const title_left = new Label();
title_left.text = this.data.title_left;
title_left.textAlign = 'center';
title_left.fontSize = this.data.title_font_size ? this.data.title_font_size : 50;
title_left.fontName = 'GOTHICB';
title_left.fontColor = this.getColor(this.data.title_color) ? this.getColor(this.data.title_color) : 'black';
title_left.refreshSize();
title_left.x = title_left.width / 2 ;
title_left.y = title_left.height / 2 ;
title_left_bg.setSize(title_left.width , title_left.height) ;
title_left_bg.addChild(title_left) ;
title_bg.addChild(title_left_bg) ;
const title_right_bg = new ShapeRect();
title_right_bg.fillColor = 'transparent' ;
title_right_bg.x = title_left_bg.x+title_left_bg.width ;
const title_right = new Label();
title_right.text = this.data.title_right;
title_right.textAlign = 'center';
title_right.fontSize = this.data.title_font_size ? this.data.title_font_size : 50;
title_right.fontName = 'GOTHICB';
title_right.fontColor = this.getColor(this.data.title_color) ? this.getColor(this.data.title_color) : 'black';
title_right.refreshSize();
title_right.x = title_right.width / 2 ;
title_right.y = title_right.height / 2 ;
title_right_bg.setSize(title_right.width , title_right.height) ;
title_right_bg.addChild(title_right) ;
title_bg.setSize(title_left_bg.width + title_right_bg.width , title_right_bg.height) ;
title_bg.addChild(title_right_bg) ;
this.title_bg = title_bg ;
this.renderArr.push(title_bg) ;
}
/**
......@@ -710,11 +759,11 @@ export class PlayComponent implements OnInit, OnDestroy {
// 单词背景
let word_bg = new ShapeRect();
word_bg.fillColor = 'transparent' ;
word_bg.x = 200 + x ;
word_bg.y = y ;
word_bg.x = x + 200 ;
word_bg.y = y + 200;
let start = new Label();
start.text = (index+1)+'.';
start.text = (index+1)+'. ';
start.textAlign = 'center';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
start.fontSize = 50;
......@@ -741,7 +790,7 @@ export class PlayComponent implements OnInit, OnDestroy {
//字母
let letter = word_content.left.letters[i];
console.log('letter:',letter) ;
// console.log('letter:',letter) ;
let letter_spr = new Label();
letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'center';
......@@ -798,14 +847,14 @@ export class PlayComponent implements OnInit, OnDestroy {
// word_bg.alpha = 0;
// this.word_height = word_bg.height;
this.word_arr_left.push(word_bg);
this.renderArr.push(word_bg) ;
// this.renderArr.push(word_bg) ;
// console.log('word_arr', this.word_arr) ;
// 单词背景
let word_bg_right = new ShapeRect();
word_bg_right.fillColor = 'transparent' ;
word_bg_right.x = word_bg.x+200;
word_bg_right.y = y ;
word_bg_right.y = y + 200;
//单词
......@@ -821,7 +870,7 @@ export class PlayComponent implements OnInit, OnDestroy {
//字母
let letter = word_content.right.letters[i];
console.log('letter:',letter) ;
// console.log('letter:',letter) ;
let letter_spr = new Label();
letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'center';
......@@ -868,7 +917,7 @@ export class PlayComponent implements OnInit, OnDestroy {
letter_spr_arr_right[i].x = startX;
if ( letter_spr_arr_right[i].text === 'a'|| letter_spr_arr_right[i].text === 'e') {
if ( letter_spr_arr_right[i].text === this.data.words.trim().split('')[0] || letter_spr_arr_right[i].text === this.data.words.trim().split('')[1]) {
letter_spr_arr_right[i].visible = false ;
let label = new Label();
label.text = '_';
......@@ -892,13 +941,13 @@ export class PlayComponent implements OnInit, OnDestroy {
// word_bg.alpha = 0;
// this.word_height = word_bg.height;
this.word_arr.push(word_bg_right);
this.renderArr.push(word_bg_right) ;
// this.renderArr.push(word_bg_right) ;
};
//单词个数
let wordNum = this.data.wordArr.length;
let line = wordNum % 2 == 0 ? wordNum / 2 :Math.ceil(wordNum / 2) ;
console.log('line: ', line) ;
// console.log('line: ', line) ;
for (let i = 0; i < wordNum; ++ i) {
if(i <= line-1){
getWordSprite(i , 0 , this.word_height*i*1.3);
......@@ -935,9 +984,16 @@ export class PlayComponent implements OnInit, OnDestroy {
return color;
}
btnLeftClicked() {
this.lastPage();
pauseClicked() {
if(this.curAudio){
if(this.play){
this.curAudio.pause() ;
this.play = false ;
}else {
this.curAudio.play() ;
this.play = true ;
}
}
}
btnRightClicked() {
......@@ -995,9 +1051,21 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
if (this.checkClickTarget(this.title_bg)) {
// console.log('click the words :' , this.data.words_audio_url) ;
this.playAudio(this.data.title_audio_url) ;
return ;
}
if (this.checkClickTarget(this.words_bg)) {
// console.log('click the words :' , this.data.words_audio_url) ;
this.playAudio(this.data.words_audio_url) ;
return ;
}
for(let i = 0; i < this.word_arr_left.length; ++ i){
let word = this.word_arr_left[i];
console.log('word', word) ;
// console.log('word', word) ;
if (this.checkClickTarget(word)) {
console.log('this word left: ', this.data.wordArr[i]) ;
this.playAudio(this.data.wordArr[i].left.word_audio_url);
......@@ -1008,7 +1076,7 @@ export class PlayComponent implements OnInit, OnDestroy {
for(let i = 0; i < this.word_arr.length; ++ i){
let word = this.word_arr[i];
console.log('word', word) ;
// console.log('word', word) ;
if (this.checkClickTarget(word)) {
// 获取是否加载完成
let loaded = this.getWordLoaded(String(i));
......@@ -1037,8 +1105,8 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
if ( this.checkClickTarget(this.pause) ) {
this.pauseClicked();
return;
}
......
......@@ -3,6 +3,7 @@ const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
['pause', "assets/play/pause.png"]
// ['text_bg', "assets/play/text_bg.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