Commit 68f7a736 authored by chaiyajie's avatar chaiyajie

首次提交

parent a7e92ed4
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col nzOffset='4'><h1 nz-title>课程内容编辑</h1></div>
<div style="position: absolute; left: 200px; top: 100px; width: 300px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div> </div>
<div nz-form>
<div>
<nz-divider nzText="课程标题" nzOrientation="left"></nz-divider>
<div style="position: absolute; left: 1000px; top: 100px; width: 300px;"> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="title_left">标题左半部分</nz-form-label>
<input type="text" nz-input [(ngModel)]="item.text_2" (blur)="save()"> <nz-form-control [nzSpan]="6">
<input nz-input type="text" id="title_left" placeholder="C" [(ngModel)]="item.title_left" (blur)="save()">
<app-upload-image-with-preview </nz-form-control>
[picUrl]="item.pic_url_2" </nz-form-item>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')" <nz-form-item>
></app-upload-image-with-preview> <nz-form-label [nzSpan]="3" nzFor="title_right">标题右半部分</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder <input nz-input type="text" id="title_right" placeholder="Listen write and read" [(ngModel)]="item.title_right" (blur)="save()">
[audioUrl]="item.audio_url_2" </nz-form-control>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_2')" </nz-form-item>
></app-audio-recorder> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="title_color">标题字体颜色</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-select [(ngModel)]="item.title_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()">
<nz-option nzValue="C01" nzLabel="绿色"></nz-option>
<nz-option nzValue="C02" nzLabel="红色"></nz-option>
<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>
<nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="title_font_size">标题字体大小</nz-form-label>
<nz-form-control [nzSpan]="3">
<nz-input-number [(ngModel)]="item.title_font_size" [nzMin]="1" [nzStep]="1" (blur)="saveItem()"></nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="title_audio_url">标题发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
[audioUrl]="item.title_audio_url" id="title_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'title_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div>
<nz-divider nzText="字母(组合)" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="words">字母组合</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="words" [(ngModel)]="item.words" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="words_audio_url">字母组合发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
[audioUrl]="item.words_audio_url" id="words_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'words_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div>
<nz-divider nzText="单词" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="3" nzOffset="3" class="add-btn-box">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="15" nzOffset="3">
<div *ngFor="let it of wordArr; let i = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
<h5 style="width: 100%; line-height: 40px; text-align: center;"> 单词-{{i+1}}</h5>
<div nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.left.word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.left.word_val" (blur)="saveItem()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.left.word_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="it.left.word_audio_url"
[audioUrl]="it.left.word_audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.left,'word_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<!--<nz-form-item>-->
<!--<nz-form-label [nzSpan]="6" nzFor="word_font_size">字体大小</nz-form-label>-->
<!--<nz-form-control [nzSpan]="6">-->
<!--<nz-input-number [(ngModel)]="it.word_font_size" [nzMin]="1" [nzStep]="1" (blur)="saveItem()"></nz-input-number>-->
<!--</nz-form-control>-->
<!--</nz-form-item>-->
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.left.word_audio_url">单词字组(组合)</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addLetterItem(it.left.letters)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<div nz-col [nzSpan]="22" nzOffset="1">
<nz-table #lettersTable [nzData]="it.left.letters" [nzHideOnSinglePage]="true" [nzBordered]="true">
<thead>
<tr>
<th>序号</th>
<th>字母(组合)</th>
<!--<th>发音</th>-->
<th>颜色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of it.left.letters;let j = index">
<td>{{j+1}}</td>
<td><input type="text" nz-input placeholder="请录入字母(组合)" [(ngModel)]="data.letter_val" (blur)="saveItem()"></td>
<!--<td>-->
<!--<app-audio-recorder id="data.letter_audio_url"-->
<!--[audioUrl]="data.letter_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, data, 'letter_audio_url')">-->
<!--</app-audio-recorder>-->
<!--</td>-->
<td>
<nz-select [(ngModel)]="data.letter_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()">
<!--<nz-option nzValue="C01" nzLabel="绿色"></nz-option>-->
<nz-option nzValue="C02" nzLabel="红色"></nz-option>
<!--<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>-->
<nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select>
</td>
<td>
<a (click)="deleteLetterItem(it.left.letters, j)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</div>
</nz-form-item>
</div>
<div nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.right.word_val">单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="请录入单词" [(ngModel)]="it.right.word_val" (blur)="saveItem()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.right.word_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="it.right.word_audio_url"
[audioUrl]="it.right.word_audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.right,'word_audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<!--<nz-form-item>-->
<!--<nz-form-label [nzSpan]="6" nzFor="word_font_size">字体大小</nz-form-label>-->
<!--<nz-form-control [nzSpan]="6">-->
<!--<nz-input-number [(ngModel)]="it.word_font_size" [nzMin]="1" [nzStep]="1" (blur)="saveItem()"></nz-input-number>-->
<!--</nz-form-control>-->
<!--</nz-form-item>-->
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.right.word_audio_url">单词字组(组合)</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addLetterItem(it.right.letters)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<div nz-col [nzSpan]="22" nzOffset="1">
<nz-table #lettersTable [nzData]="it.right.letters" [nzHideOnSinglePage]="true" [nzBordered]="true">
<thead>
<tr>
<th>序号</th>
<th>字母(组合)</th>
<!--<th>发音</th>-->
<th>颜色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of it.right.letters;let j = index">
<td>{{j+1}}</td>
<td><input type="text" nz-input placeholder="请录入字母(组合)" [(ngModel)]="data.letter_val" (blur)="saveItem()"></td>
<!--<td>-->
<!--<app-audio-recorder id="data.letter_audio_url"-->
<!--[audioUrl]="data.letter_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, data, 'letter_audio_url')">-->
<!--</app-audio-recorder>-->
<!--</td>-->
<td>
<nz-select [(ngModel)]="data.letter_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()">
<!--<nz-option nzValue="C01" nzLabel="绿色"></nz-option>-->
<nz-option nzValue="C02" nzLabel="红色"></nz-option>
<!--<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>-->
<nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select>
</td>
<td>
<a (click)="deleteLetterItem(it.right.letters, j)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</div>
</nz-form-item>
</div>
<button style="margin: 10px;" nz-button nzType="danger" (click)="deleteItem(i)">
<span>删除</span>
</button>
</div>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div> </div>
</div> </div>
......
...@@ -6,3 +6,7 @@ ...@@ -6,3 +6,7 @@
height: 100%; height: 100%;
} }
nz-select {
width: 100%;
}
...@@ -10,10 +10,11 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,10 +10,11 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "test_008";
// 储存对象 // 储存对象
item; item;
wordArr = [];
constructor(private appRef: ApplicationRef) { constructor(private appRef: ApplicationRef) {
...@@ -31,6 +32,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,6 +32,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = data; this.item = data;
} }
if ( !this.item.wordArr ) {
this.item.wordArr = [];
}
this.init(); this.init();
this.refresh(); this.refresh();
...@@ -48,7 +53,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -48,7 +53,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if (this.item.wordArr) {
this.wordArr = this.item.wordArr;
} else {
this.wordArr = this.getDefaultWordArr();
this.item.wordArr = this.wordArr;
}
} }
...@@ -91,5 +101,70 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -91,5 +101,70 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
deleteItem(index) {
if (index !== -1) {
this.wordArr.splice(index, 1);
}
// this.update.emit(this.item);
this.save();
}
addItem() {
let item = this.wordItemData();
this.wordArr.push(item);
this.saveItem();
}
addLetterItem(letters){
let letter = this.letterData();
letters.push(letter);
this.save();
}
deleteLetterItem(letters, index){
console.log(letters);
if (index !== -1) {
letters.splice(index, 1);
}
this.save();
}
wordItemData() {
return {
left: {
word_val: '',
word_audio_url: '',
letters: []
},
right: {
word_val: '',
word_audio_url: '',
letters: []
}
};
}
letterData() {
return {
letter_val: '',
letter_color: 'C04'
};
}
saveItem() {
this.save();
}
getDefaultWordArr() {
let arr = [];
return arr;
}
} }
...@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite { ...@@ -864,8 +864,84 @@ export class ShapeRect extends MySprite {
} }
} }
export class ShapeRectNew extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fill = true;
stroke = false;
lineWidth = 1;
setSize(w, h, r) {
this.width = w;
this.height = h;
this.radius = r;
}
setOutLine(color, lineWidth) {
this.stroke = true;
this.strokeColor = color;
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
const radius = this.radius;
ctx.save();
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
// 上边线
ctx.lineTo(width - radius, 0);
// 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线
ctx.lineTo(width, height - radius);
ctx.closePath();
if (this.fill) {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class ShapeCircle extends MySprite { export class ShapeCircle extends MySprite {
fillColor = '#FF0000'; fillColor = '#FF0000';
......
...@@ -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, tweenChange, MySprite, ShapeRect, ShapeRectNew, tweenChange,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources'; import {res, resAudio} from './resources';
...@@ -57,7 +57,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,7 +57,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'test_008';
btnLeft; btnLeft;
...@@ -69,6 +69,103 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -69,6 +69,103 @@ export class PlayComponent implements OnInit, OnDestroy {
curPic; curPic;
//单词画面数组
word_arr_left = [] ;
word_arr = [];
word_bg_x ;
word_height ;
all_words_loaded = false;
wordLoad :{[key:string]:{loaded : boolean;letters:{[key:string]:{loaded:boolean, letter:Label}}}} = {};
setWordLoad(id: string, letterId:string, loaded:boolean, letter: Label):void{
if(!this.wordLoad[id]){
this.wordLoad[id] = {
loaded:false,
letters:{}
}
}
let letters = this.wordLoad[id].letters;
if(!letters[letterId]){
letters[letterId] = {
loaded:loaded,
letter:letter
}
}
//是否存在未加载完成的字母
let flag = false;
for(let tKey in letters){
if(!letters[tKey].loaded){
flag = true;
break;
}
}
if(!flag){
this.wordLoad[id].loaded = true;
}
else{
this.wordLoad[id].loaded = false;
}
}
getWordLoaded(id: string):boolean{
if(!this.wordLoad[id]){
return false;
}
return this.wordLoad[id].loaded;
}
/**
* 检查单词是否加载完成
* @param id 单词id
*/
checkWordLoaded(id: string):void{
if(!this.wordLoad[id]){
return;
}
let letters = this.wordLoad[id].letters;
//是否存在未加载完成的字母
let flag = false;
for(let tKey in letters){
if(!letters[tKey].loaded){
flag = true;
break;
}
}
if(!flag){
this.wordLoad[id].loaded = true;
}
else{
this.wordLoad[id].loaded = false;
}
}
getLetterSpriteFromWordLoaded(id: string){
if(!this.wordLoad[id]){
return;
}
let letters = this.wordLoad[id].letters;
return letters;
}
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -86,7 +183,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -86,7 +183,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();
...@@ -101,6 +198,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -101,6 +198,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// 开始预加载资源 // 开始预加载资源
this.load(); this.load();
// 加载完成播放音乐
this.playAudio("newpage");
}, this.saveKey); }, this.saveKey);
} }
...@@ -453,14 +553,27 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -453,14 +553,27 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加预加载音频 * 添加预加载音频
*/ */
initAudio() { initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.addUrlToAudioObj('newpage', this.rawAudios.get('newpage'));
// 音频资源
this.addUrlToAudioObj(this.data.title_audio_url);
this.addUrlToAudioObj(this.data.words_audio_url);
// 初始化单词音效
for (let i = 0; i < this.data.wordArr.length; ++ i) {
let wordLeft = this.data.wordArr[i].left;
if (wordLeft.word_audio_url && wordLeft.word_audio_url != '') {
this.addUrlToAudioObj(wordLeft.word_audio_url);
}
let wordRight = this.data.wordArr[i].right;
if (wordRight.word_audio_url && wordRight.word_audio_url != '') {
this.addUrlToAudioObj(wordRight.word_audio_url);
}
}
} }
...@@ -480,8 +593,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -480,8 +593,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr = []; this.renderArr = [];
this.word_arr_left = [] ;
this.word_arr = [];
this.word_bg_x = 200 ;
this.word_height = 0 ;
this.all_words_loaded = false;
this.wordLoad = {};
} }
...@@ -527,43 +647,293 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -527,43 +647,293 @@ export class PlayComponent implements OnInit, OnDestroy {
initPic() { initPic() {
const maxW = this.canvasWidth * 0.7; // 初始化单词显示
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;
}
/**
* 初始化单词显示
*/
initWord() {
this.drawWordSprite();
}
/**
* 绘画单词
*/
drawWordSprite() {
const getWordSprite = (index , x , y) => {
// 单词背景
let word_bg = new ShapeRect();
word_bg.fillColor = 'transparent' ;
word_bg.x = 200 + x ;
word_bg.y = y ;
let start = new Label();
start.text = (index+1)+'.';
start.textAlign = 'center';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
start.fontSize = 50;
start.fontName = 'MMTextBookBold';
start.fontColor = 'black';
//设置不显示
start.visible = true;
start.refreshSize();
start.y = start.height / 2 ;
word_bg.addChild(start) ;
//单词
let word_content = this.data.wordArr[index];
let totalWidth = 0;
let height = 0;
let letter_spr_arr = [];
for(let i = 0; i < word_content.left.letters.length; ++ i) {
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; let letter = word_content.left.letters[i];
console.log('letter:',letter) ;
let letter_spr = new Label();
letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'center';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr.fontSize = 50;
letter_spr.fontName = 'MMTextBookBold';
letter_spr.fontColor = this.getColor(letter.letter_color);
//设置不显示
letter_spr.visible = true;
letter_spr.refreshSize();
letter_spr_arr.push(letter_spr);
//设置y坐标
letter_spr.y = letter_spr.height/2;
height = letter_spr.height;
if(index === 0){
this.word_height = height ;
}
totalWidth += letter_spr.width;
if((i + 1) < word_content.left.letters.length){
totalWidth += 0;
}
// 设置单词未加截完
// this.setWordLoad(index, String(i), false, letter_spr);
word_bg.addChild(letter_spr);
}
let temp_startX = 0;
//设置所有字母的x坐标
for(let i = 0; i < letter_spr_arr.length; ++ i) {
let startX = start.width/2;
if(i == 0){
startX = letter_spr_arr[i].width/2 + start.width/2 ;
}
else{
temp_startX += letter_spr_arr[i-1].width + 0;
startX = temp_startX + letter_spr_arr[i].width/2+start.width/2;
}
letter_spr_arr[i].x = startX;
}
word_bg.setSize(totalWidth, height);
// 设置不显示
// word_bg.alpha = 0;
// this.word_height = word_bg.height;
this.word_arr_left.push(word_bg);
this.renderArr.push(word_bg) ;
// console.log('word_arr', this.word_arr) ;
const label1 = new Label(); // 单词背景
label1.text = this.data.text; let word_bg_right = new ShapeRect();
label1.textAlign = 'center'; word_bg_right.fillColor = 'transparent' ;
label1.fontSize = 50; word_bg_right.x = word_bg.x+200;
label1.fontName = 'BRLNSDB'; word_bg_right.y = y ;
label1.fontColor = '#ffffff';
pic1.addChild(label1); //单词
let totalWidth_right = 0;
let height_right = 0;
let letter_spr_arr_right = [];
for(let i = 0; i < word_content.right.letters.length; ++ i) {
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; //字母
let letter = word_content.right.letters[i];
console.log('letter:',letter) ;
let letter_spr = new Label();
letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'center';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr.fontSize = 50;
letter_spr.fontName = 'MMTextBookBold';
letter_spr.fontColor = this.getColor(letter.letter_color);
//设置不显示
letter_spr.visible = true;
letter_spr.refreshSize();
letter_spr_arr_right.push(letter_spr);
//设置y坐标
letter_spr.y = letter_spr.height/2;
height_right = letter_spr.height;
totalWidth_right += letter_spr.width;
if((i + 1) < word_content.right.letters.length){
totalWidth_right += 0;
}
// 设置单词未加截完
this.setWordLoad(index, String(i), false, letter_spr);
word_bg_right.addChild(letter_spr);
}
let temp_startX_right = 0;
//设置所有字母的x坐标
for(let i = 0; i < letter_spr_arr_right.length; ++ i) {
let startX = letter_spr_arr[letter_spr_arr.length - 1].x;
if(i == 0){
startX = letter_spr_arr[i].width/2;
}
else{
temp_startX_right += letter_spr_arr_right[i-1].width + 0;
startX = temp_startX_right + letter_spr_arr_right[i].width/2;
}
letter_spr_arr_right[i].x = startX;
if ( letter_spr_arr_right[i].text === 'a'|| letter_spr_arr_right[i].text === 'e') {
letter_spr_arr_right[i].visible = false ;
let label = new Label();
label.text = '_';
label.textAlign = 'center';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
label.fontSize = 50;
label.fontName = 'MMTextBookBold';
label.fontColor = 'red';
//设置不显示
label.visible = true;
label.refreshSize();
label.x = letter_spr_arr_right[i].x ;
label.y = letter_spr_arr_right[i].height / 2 ;
word_bg_right.addChild(label) ;
}
}
word_bg_right.setSize(totalWidth_right, height_right);
// 设置不显示
// word_bg.alpha = 0;
// this.word_height = word_bg.height;
this.word_arr.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) ;
for (let i = 0; i < wordNum; ++ i) {
if(i <= line-1){
getWordSprite(i , 0 , this.word_height*i*1.3);
} else {
getWordSprite(i , 500 , this.word_height*(i-line)*1.3);
}
}
} }
/**
* 根据颜色id获取对应的颜色
* @param colorId 颜色id
*/
getColor(colorId){
let color = "#000000";
switch(colorId){
case "C01":
color = "#008000";
break;
case "C02":
color = "#FF0000";
break;
case "C03":
color = "#D2691E";
break;
case "C04":
color = "#000000";
break;
}
return color;
}
btnLeftClicked() { btnLeftClicked() {
...@@ -625,6 +995,48 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -625,6 +995,48 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
for(let i = 0; i < this.word_arr_left.length; ++ i){
let word = this.word_arr_left[i];
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);
return ;
}
}
for(let i = 0; i < this.word_arr.length; ++ i){
let word = this.word_arr[i];
console.log('word', word) ;
if (this.checkClickTarget(word)) {
// 获取是否加载完成
let loaded = this.getWordLoaded(String(i));
// 未加载,不触发音效,加载单词
if ( !loaded) {
let letters = this.getLetterSpriteFromWordLoaded(String(i));
for (let key in letters) {
let loaded = letters[key].loaded;
let letter_spr = letters[key].letter;
//加载完成,跳过
if(loaded){
continue;
}
//设置显示
letter_spr.visible = true;
//设置加载完成
letters[key].loaded = true;
this.checkWordLoaded(String(i));
}
return ;
}
console.log('this word: ', this.data.wordArr[i]) ;
this.playAudio(this.data.wordArr[i].right.word_audio_url);
return ;
}
}
if ( this.checkClickTarget(this.btnLeft) ) { if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked(); this.btnLeftClicked();
return; return;
......
...@@ -12,6 +12,7 @@ const res = [ ...@@ -12,6 +12,7 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['newpage', "assets/play/music/newpage.mp3"]
]; ];
......
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