Commit ffcc9f93 authored by chaiyajie's avatar chaiyajie

完成

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