Commit d3ba6a76 authored by Chen Jiping's avatar Chen Jiping

改造完成

parent 8a51c964
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
"cli": {
"analytics": "68306aac-25e4-415d-920b-a8cb1805d1f2"
}
} }
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col nzOffset='4'>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <h1 nz-title>课程练习内容编辑</h1>
</div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> </div>
<div nz-row>
<app-upload-image-with-preview <div nz-col [nzSpan]="15" nzOffset="3">
[picUrl]="item.pic_url" <div nz-form>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" <div id='title-anchor'>
></app-upload-image-with-preview> <nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="part1">标题1</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-group nzAddOnBefore="Part">
<input type="text" id="part1" nz-input [(ngModel)]="item.title.part1" (blur)="save()">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="part2">标题2</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="part2" [(ngModel)]="item.title.part2" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder <app-audio-recorder
[audioUrl]="item.audio_url" [audioUrl]="item.title.audio_url" id="audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" (audioUploaded)="onAudioUploadSuccess($event, item.title, 'audio_url')">
></app-audio-recorder> </app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone> </nz-form-control>
<app-upload-video></app-upload-video> </nz-form-item>
<app-lesson-title-config></app-lesson-title-config> </div>
<div id='listen-anchor'>
<nz-divider nzText="听力材料" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3">
<app-audio-recorder id="item.listenAudioUrl"
[audioUrl]="item.listenAudioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item, 'listenAudioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div id='listen-anchor'>
<nz-divider nzText="练习题皮肤" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3">练习题皮肤</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-radio-group [(ngModel)]="item.skin" (ngModelChange)="save()">
<label nz-radio nzValue="A">皮肤A</label>
<label nz-radio nzValue="B">皮肤B</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3">
<div *ngIf="item.skin == 'A'">
<img src="assets/play/skin_a.jpg" style="width: auto;height: 200px;">
</div>
<div *ngIf="item.skin == 'B'">
<img src="assets/play/skin_b.jpg" style="width: auto;height: 200px;">
</div>
</nz-form-control>
</nz-form-item>
</div>
<div id='listen-anchor'>
<nz-divider nzText="背景图片" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.lt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lt_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.mt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'mt_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >右上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.rt_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'rt_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.lm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lm_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="2" >右中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.lm_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lm_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.lb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'lb_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.mb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'mb_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.rb_pic_url"
(imageUploaded)="onImageUploadSuccess($event, item, 'rb_pic_url')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
<div>
<div *ngFor="let data of item.exercisesArr;let j = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
<nz-divider nzText="内容-{{j+1}}" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.pic_url">图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="data.pic_url"
(imageUploaded)="onImageUploadSuccess($event, data, 'pic_url')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.pic_url">音频</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="{{j}}.audio_url" [audioUrl]="data.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">句子拆分</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addLetter(data)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">句子预览</nz-form-label>
<nz-form-control [nzSpan]="18">
<span nz-text>
<div *ngIf="item.skin == 'A'">
<label *ngFor="let letter of data.letters;let j = index" [ngStyle]="{'color':letter.isColor=='1'?'#c8161d':'#000000','font-size':'40px'}">{{letter.val}}</label>
</div>
<div *ngIf="item.skin == 'B'">
<label *ngFor="let letter of data.letters;let j = index" [ngStyle]="{'color':letter.isColor=='1'?'#c8161d':'#717071','font-size':'40px'}">{{letter.val}}</label>
</div>
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="2" [nzSpan]="16">
<nz-table #lettersTable nzBordered nzTitle="按照单词着色需要进行拆分填写,单词与单词之间添加空格" [nzData]="data.letters" [nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>字母(单词)组合</th>
<th>是否着色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of lettersTable.data;let j = index">
<td>{{ j+1 }}</td>
<td><input type="text" nz-input placeholder="请录入字母(单词)" [(ngModel)]="row.val" (blur)="save()"></td>
<td>
<nz-radio-group [(ngModel)]="row.isColor" (ngModelChange)="save()">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
</td>
<td>
<a (click)="delLetter(data, j)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -10,11 +10,10 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,11 +10,10 @@ 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 = "YM-42";
// 储存对象 // 储存对象
item; item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
} }
...@@ -24,6 +23,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,6 +23,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
this.item.title = this.getDefaultTile();
this.item.exercisesArr = [];
console.log('item:', this.item);
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
...@@ -31,6 +36,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,6 +36,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = data; this.item = data;
} }
console.log('item:', this.item);
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
...@@ -47,10 +53,29 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -47,10 +53,29 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
} }
init() {
if(!this.item.title){
this.item.title = this.getDefaultTile();
}
//设置默认皮肤
if(!this.item.skin){
this.item.skin = "A";
}
if(!this.item.exercisesArr || this.item.exercisesArr.length == 0){
init() { this.item.exercisesArr = [];
for(let i = 0; i < 6; ++ i){
let exercises = this.getDefaultExercisesItem();
this.item.exercisesArr.push(exercises);
}
}
} }
...@@ -58,9 +83,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,9 +83,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -68,9 +93,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -68,9 +93,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -81,6 +106,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -81,6 +106,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
*/ */
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any> window).courseware.setData(this.item, null, this.saveKey);
this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
} }
...@@ -93,5 +119,58 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +119,58 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
/**
* 获取缺省的练习题内容
*/
getDefaultExercisesItem(){
const exercises = {
text:'',
pic_url:'',
audio_url:'',
letters:[]
};
return exercises;
}
getDefaultTile(){
const title = {
part1:'',
part2:'',
audio_url:''
};
return title;
}
/**
* 获取默认的字母
*/
getDefaultLetter(){
let letter = {
val:'',
isColor:'0'
};
return letter;
}
addLetter(exercises) {
let letter = this.getDefaultLetter();
exercises.letters = [...exercises.letters, letter];
this.save();
}
delLetter(exercises, index) {
if (index !== -1) {
exercises.letters.splice(index, 1);
exercises.letters = [...exercises.letters];
this.save();
}
}
} }
/**
*
* @param audio 音频
* @param now true-重新开始播放,flase-继续播放
* @param callback
*/
export function playAudio(audio, now = false, callback = null) {
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
/**
* 暂停播放音频
* @param audio 音频
* @param reset 暂停是否重置:true-是,false-否
* @param callback
*/
export function pauseAudio(audio, reset = false, callback = null) {
if (audio) {
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
\ No newline at end of file
import {
Label,
MySprite, ShapeRectNew,
ShapeCircle,
tweenChange,
ShapeRect
} from './Unit';
import {
playAudio,
pauseAudio
} from './AudioUtil';
export class Exercises {
audio;
images;
exercisesData;
bg;
textLabelArr = [];
bigCard;
cardBg;
contentBg1;
closePic;
overturnPic;
contentBg2;
canClick = true;
canClickCard = false;
showed = false;
curCard;
showBg;
scaleX = 1;
scaleY = 1;
skin;
constructor(exercisesData, images) {
this.exercisesData = exercisesData;
this.images = images;
}
init(skin, scaleX = 1, scaleY = 1) {
this.scaleX = scaleX;
this.scaleY = scaleY;
this.skin = skin;
let type = '1';
if (this.exercisesData.index % 2 == 0) {
type = '2';
}
let outLineColor = "#aacce9";
if (skin == 'A') {
this.initA(scaleX, scaleY, type);
outLineColor = "#fbd8c1";
}
else {
this.initB(scaleX, scaleY, type);
}
let width = 1101 * scaleX;
let height = 479 * scaleY;
const cardBg = new MySprite();
cardBg.init(this.images.get('box'));
cardBg.scaleX = scaleX;
cardBg.scaleY = scaleY;
cardBg.alpha = 0;
this.cardBg = cardBg;
const bigCard = new ShapeRectNew();
bigCard.setOutLine(outLineColor, 20 * scaleY);
bigCard.setSize(width, height, 25 * scaleY);
bigCard.x = -width / 2;
bigCard.y = -height / 2;
this.bigCard = bigCard;
cardBg.addChild(bigCard);
this.initBigCard1(bigCard, skin);
this.initBigCard2(bigCard, skin);
//默认显示内容1
this.showBg = this.contentBg1;
this.closePic = this.getColsePic(bigCard);
this.overturnPic = this.getOverturnPic(bigCard);
cardBg.setScaleXY(0);
}
/**
* 设置最大的宽度,并返回新的最大宽度
* @param textLabelArr
* @param w
*/
private setMaxScale(textLabelArr, w){
let scale = 1;
let width = 0;
for(let i = 0; i < textLabelArr.length; ++i){
var textLabel = textLabelArr[i];
width += textLabel.getBoundingBox().width;
scale = textLabel.scaleX;
}
if(width >= w){
scale *= w / width;
}
else{
return width;
}
width = 0;
//设置scale,并重新计算宽度
for(let i = 0; i < textLabelArr.length; ++i){
var textLabel = textLabelArr[i];
textLabel.setScaleXY(scale);
textLabel.refreshSize();
width += textLabel.getBoundingBox().width;
}
return width;
}
/**
* 设置x坐标
* @param textLabelArr
* @param totalWidth
* @param skin
*/
private resetX(textLabelArr, totalWidth, skin){
var startX = 0;
if(skin == 'B'){
startX = (this.bg.width - totalWidth) / 2;
}
else{
startX = this.scaleX * 100;
}
for (let i = 0; i < textLabelArr.length; ++i) {
var textLabel = textLabelArr[i];
textLabel.x = startX;
startX += textLabel.getBoundingBox().width;
}
}
private addText(bg: ShapeRectNew, skin) {
let totalWidth = 0;
for (let i = 0; i < this.exercisesData.letters.length; ++i) {
var letter = this.exercisesData.letters[i];
//内容
const text = new Label();
text.text = letter.val;
text.fontName = "GOTHIC";
let fontColor = "";
let fontSize = 48;
if (skin == 'B') {
if (letter.isColor === '0') {
fontColor = "#717071";
}
else {
fontColor = "#cc2a2e";
}
}
else {
fontSize = 56;
if (letter.isColor === '0') {
fontColor = "#000000";
}
else {
fontColor = "#cc2a2e";
}
}
text.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height / 2;
this.textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
bg.addChild(text);
}
//计算最大的scale
totalWidth = this.setMaxScale(this.textLabelArr, bg.width - 96 * this.scaleX);
this.resetX(this.textLabelArr, totalWidth, this.skin);
}
private initB(scaleX = 1, scaleY = 1, type) {
const getColor = (type) => {
if (type == '1') {
return { outLine: '#53748f', index: '#f5af80' };
}
else {
return { outLine: '#aacce9', index: '#f5af80' };
}
};
let color = getColor(type);
let width = 560 * scaleX;
let height = 96 * scaleY;
const bg = new ShapeRectNew();
bg.setOutLine(color.outLine, 8 * scaleY);
bg.setSize(width, height, 48 * scaleY);
this.bg = bg;
const indexBg = new ShapeCircle();
indexBg.setRadius(30 * scaleX);
indexBg.fillColor = color.index;
indexBg.x = width / 2;
indexBg.y = -(indexBg.height / 2 - 10 * scaleY);
bg.addChild(indexBg);
//顺序
const index = new Label();
index.text = this.exercisesData.index;
index.textAlign = 'middle';
index.fontSize = 48;
index.fontName = "BRLNSDB";
index.fontColor = "#FFFFFF";
index.setMaxSize(indexBg.width);
index.x = - index.width / 2;
indexBg.addChild(index);
//内容
this.addText(bg, this.skin);
}
private initA(scaleX = 1, scaleY = 1, type) {
const getColor = (type) => {
if (type == '1') {
return { fillColor: '#E5E3E4', index: '#fbd8c1' };
}
else {
return { fillColor: '#E5E3E4', index: '#fbd8c1' };
}
};
let color = getColor(type);
let width = 550 * scaleX;
let height = 80 * scaleY;
const bg = new ShapeRectNew();
bg.fillColor = color.fillColor;
bg.setSize(width, height, 40 * scaleY);
this.bg = bg;
const indexBg = new ShapeCircle();
indexBg.setRadius(44 * scaleX);
indexBg.fillColor = color.index;
indexBg.x = 44 * scaleX;
indexBg.y = height / 2;
bg.addChild(indexBg);
//顺序
const index = new Label();
index.text = this.exercisesData.index;
index.textAlign = 'middle';
index.fontSize = 64;
index.fontName = "TCB";
index.fontColor = '#ec6101';
index.setMaxSize(45 * scaleX);
index.x = - index.width / 2;
indexBg.addChild(index);
//内容
this.addText(bg, this.skin);
}
private getContentBg(parent) {
let width = parent.width - 40 * parent.scaleX;
let height = parent.height - 40 * parent.scaleY;
const constantBg = new ShapeRect();
constantBg.setSize(width, height);
constantBg.fillColor = '#FFFFFF';
constantBg.alpha = 1;
constantBg.visible = false;
constantBg.x = 20 * parent.scaleX;
constantBg.y = 20 * parent.scaleY;
parent.addChild(constantBg);
return constantBg;
}
private initBigCard1(parent, skin) {
const addText = (bg: ShapeRect, skin, fontSize) => {
let totalWidth = 0;
let textLabelArr = [];
for (let i = 0; i < this.exercisesData.letters.length; ++i) {
let letter = this.exercisesData.letters[i];
//内容
const text = new Label();
text.text = letter.val;
text.fontName = "GOTHICB";
let fontColor = "";
if (skin == 'B') {
if (letter.isColor === '0') {
fontColor = "#717071";
}
else {
fontColor = "#cc2a2e";
}
}
else {
if (letter.isColor === '0') {
fontColor = "#000000";
}
else {
fontColor = "#cc2a2e";
}
}
text.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height / 2;
textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
}
totalWidth = this.setMaxScale(textLabelArr, 960 * this.scaleX);
var startX = (bg.width - totalWidth) / 2;
for (let i = 0; i < textLabelArr.length; ++i) {
var textLabel = textLabelArr[i];
textLabel.x = startX;
startX += textLabel.getBoundingBox().width;
bg.addChild(textLabel);
}
}
const contentBg = this.getContentBg(parent);
contentBg.childDepandAlpha = true;
contentBg.visible = true;
this.contentBg1 = contentBg;
//内容
addText(contentBg, skin, 96)
}
private initBigCard2(parent, skin) {
const addText = (bg: ShapeRect, skin, fontSize) => {
let totalWidth = 0;
var textLabelArr = [];
var sHeight = 0;
let height = 0;
for (let i = 0; i < this.exercisesData.letters.length; ++i) {
var letter = this.exercisesData.letters[i];
//内容
const text = new Label();
text.text = letter.val;
text.fontName = "GOTHICB";
let fontColor = "";
if (skin == 'B') {
if (letter.isColor === '0') {
fontColor = "#717071";
}
else {
fontColor = "#cc2a2e";
}
}
else {
if (letter.isColor === '0') {
fontColor = "#000000";
}
else {
fontColor = "#cc2a2e";
}
}
text.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height - text.getBoundingBox().height / 2 - 40 * this.scaleY;
textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
sHeight = text.getBoundingBox().height;
height = text.height;
}
totalWidth = this.setMaxScale(textLabelArr, (960 - 90) * this.scaleX);
var startX = (bg.width - totalWidth) / 2;
for (let i = 0; i < textLabelArr.length; ++i) {
var textLabel = textLabelArr[i];
textLabel.x = startX;
startX += textLabel.getBoundingBox().width;
bg.addChild(textLabel);
}
return { height: height, sHeight: sHeight };
}
const contentBg = this.getContentBg(parent);
contentBg.childDepandAlpha = true;
this.contentBg2 = contentBg;
let width = contentBg.width;
let height = contentBg.height;
//内容
let textHeight = addText(contentBg, skin, 72);
//图片最大高度和宽度
let maxWidth = width - 40 * this.scaleY;
let maxHeight = height - 80 * this.scaleX - textHeight.height;
const contentPic = new MySprite();
contentPic.init(this.images.get(this.exercisesData.pic_url));
let scale = Math.min(maxHeight / contentPic.height, maxWidth / contentPic.width);
//如果小于1,则缩放图片
if (scale < 1) {
contentPic.setScaleXY(scale);
}
contentPic.x = width / 2;
contentPic.y = height - textHeight.sHeight - 17 * this.scaleY - contentPic.getBoundingBox().height / 2 - 22 * this.scaleY;
contentBg.addChild(contentPic);
}
private getColsePic(parent) {
const closePic = new MySprite();
closePic.init(this.images.get('close'));
closePic.scaleX = parent.scaleX;
closePic.scaleY = parent.scaleY;
closePic.x = parent.width;
closePic.y = 0;
parent.addChild(closePic);
return closePic;
}
private getOverturnPic(parent) {
const overturnPic = new MySprite();
overturnPic.init(this.images.get('overturn'));
overturnPic.scaleX = parent.scaleX;
overturnPic.scaleY = parent.scaleY;
overturnPic.x = parent.width - 10 * parent.scaleX - overturnPic.getBoundingBox().width / 2;
overturnPic.y = parent.height - 10 * parent.scaleY - overturnPic.getBoundingBox().height / 2;
parent.addChild(overturnPic);
return overturnPic;
}
/**
* 显示大卡片
*/
showBigCard(toX: number, toY: number, callback = null) {
if (this.showed) {
return;
}
this.cardBg.x = this.bg.x;
this.cardBg.y = this.bg.y;
tweenChange(this.cardBg, { scaleX: 1, scaleY: 1, x: toX, y: toY }, 0.5, () => {
this.canClickCard = true;
this.showed = true;
if (callback) {
callback();
}
});
}
overturn(scaleX: number, callback = null) {
if (!this.canClick) {
return;
}
if (!this.canClickCard) {
return;
}
let w = scaleX;
this.canClickCard = false;
let tScaleX = this.closePic.scaleX;
let tScaleY = this.closePic.scaleY;
tweenChange(this.closePic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.1, () => {
tweenChange(this.closePic, { scaleX: 0, scaleY: 0 }, 0.4, () => {
});
});
tweenChange(this.overturnPic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.1, () => {
tweenChange(this.overturnPic, { scaleX: 0, scaleY: 0 }, 0.4, () => {
});
});
tweenChange(this.showBg, { alpha: 0 }, 0.5, () => {
tweenChange(this.cardBg, { scaleX: 0 }, 0.3, () => {
this.contentBg2.visible = !this.contentBg2.visible;
this.contentBg2.visible ? this.showBg = this.contentBg2 : this.showBg = this.contentBg1;
this.showBg.alpha = 0;
tweenChange(this.cardBg, { scaleX: w }, 0.3, () => {
tweenChange(this.showBg, { alpha: 1 }, 0.5, () => {
});
tweenChange(this.closePic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.4, () => {
tweenChange(this.closePic, { scaleX: tScaleX, scaleY: tScaleY }, 0.1, () => {
});
});
tweenChange(this.overturnPic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.4, () => {
tweenChange(this.overturnPic, { scaleX: tScaleX, scaleY: tScaleY }, 0.1, () => {
this.canClickCard = true;
callback && callback();
});
});
});
});
});
}
close(callback = null) {
this.canClickCard = false;
this.showed = false;
this.pasueAudio();
let toX = this.bg.x;
let toY = this.bg.y;
tweenChange(this.cardBg, { scaleX: 0, scaleY: 0, x: toX, y: toY }, 0.5, () => {
if (this.contentBg2.visible) {
this.contentBg1.visible = true;
this.contentBg2.visible = false;
}
this.contentBg1.alpha = 1;
callback && callback();
});
}
resetText(scale, skin = 'A') {
var totalWidth = 0
for (let i = 0; i < this.textLabelArr.length; ++i) {
var textLabel = this.textLabelArr[i];
textLabel.setScaleXY(scale);
textLabel.refreshSize();
totalWidth += textLabel.getBoundingBox().width;
}
this.resetX(this.textLabelArr, totalWidth, skin);
}
playAudio(callback = null) {
playAudio(this.audio, true, callback);
return this.audio;
}
pasueAudio(callback = null) {
pauseAudio(this.audio, true, callback)
}
}
/**
* 获取缺省的练习题内容
*/
export function getDefaultExercisesItem() {
let exercises = {
text: "This is apple",
pic_url: "",
audio_url: "",
index: 0
}
return exercises;
}
\ No newline at end of file
import {
Label,
MySprite, ShapeRectNew,
ShapeCircle,
tweenChange,
ShapeRect
} from './Unit';
import {
playAudio,
pauseAudio
} from './AudioUtil';
export class Listening {
audio;
images;
bg;
btnPlay;
btnStop;
playing = false;
constructor(audio, images) {
this.audio = audio;
this.images = images;
}
init(scaleX = 1, scaleY = 1) {
const bg = new ShapeRect();
const btnPlay = new MySprite();
btnPlay.init(this.images.get('play'));
btnPlay.scaleX = scaleX;
btnPlay.scaleY = scaleY;
btnPlay.x = btnPlay.getBoundingBox().width / 2
btnPlay.y = btnPlay.getBoundingBox().height / 2
this.btnPlay = btnPlay;
bg.addChild(btnPlay);
const btnStop = new MySprite();
btnStop.init(this.images.get('stop'));
btnStop.x = btnPlay.x;
btnStop.y = btnPlay.y;
btnStop.alpha = 0;
btnStop.scaleX = scaleX;
btnStop.scaleY = scaleY;
this.btnStop = btnStop;
bg.addChild(btnStop);
bg.setSize(btnPlay.getBoundingBox().width, btnPlay.getBoundingBox().height);
bg.alpha = 0;
this.bg = bg;
}
play(callback = null){
console.log('playing:', this.playing);
if(!this.playing){
this.playAudio(callback);
return this.audio;
}
else{
this.pauseAudio(callback);
}
return null;
}
playAudio(callback = null){
this.btnPlay.alpha = 0;
this.btnStop.alpha = 1;
playAudio(this.audio, false, callback);
this.playing = true;
return this.audio;
}
pauseAudio(callback){
this.btnPlay.alpha = 1;
this.btnStop.alpha = 0;
this.playing = false;
pauseAudio(this.audio, false, callback)
}
}
\ No newline at end of file
import {
Label,
MySprite, ShapeRect,
} from './Unit';
import {
playAudio,
pauseAudio
} from './AudioUtil';
export class Title {
titleBg: ShapeRect;
audio;
images;
titleData;
constructor(titleData, images) {
this.titleData = titleData;
this.images = images;
}
init(mapScaleX = 1, mapScaleY = 1) {
//初始化标题1背景
const titePart1Bg = new MySprite();
titePart1Bg.init(this.images.get('titlePart1Bg'));
titePart1Bg.scaleX = mapScaleX;
titePart1Bg.scaleY = mapScaleY;
titePart1Bg.x = titePart1Bg.getBoundingBox().width / 2;
//标题1内容
const part1 = new Label();
part1.text = this.titleData.part1;
part1.textAlign = 'left';
part1.fontSize = 48;
part1.fontName = "BRLNSDB";
part1.fontColor = "#000000";
part1.refreshSize();
part1.x = titePart1Bg.getBoundingBox().width / 2 - part1.getBoundingBox().width - 13 * mapScaleX;
titePart1Bg.addChild(part1);
//标题2内容
const part2 = new Label();
part2.text = this.titleData.part2;
part2.fontSize = 36;
part2.fontName = "FuturaStd";
part2.fontColor = "#000000";
part2.refreshSize();
part2.x = titePart1Bg.getBoundingBox().width + 11 * mapScaleX;
part2.y = 10 * mapScaleY + part2.getBoundingBox().height / 2;
let height = Math.max(titePart1Bg.getBoundingBox().height, part2.getBoundingBox().height);
let width = titePart1Bg.getBoundingBox().width + part2.getBoundingBox().width + 11 * mapScaleX;
let titleBg = new ShapeRect();
titleBg.setSize(width, height);
titleBg.alpha = 0;
titePart1Bg.y = height / 2;
titleBg.addChild(titePart1Bg);
part2.y = height / 2;
titleBg.addChild(part2);
this.titleBg = titleBg;
}
getTitleBg(){
return this.titleBg;
}
setAudio(audio){
this.audio = audio;
}
playAudio(callback = null){
playAudio(this.audio, true, callback);
return this.audio;
}
pasueAudio(callback){
pauseAudio(this.audio, true, callback)
}
}
export function getDefaultTile() {
let title = {
part1: 'A',
part2: 'Read and point',
audio_url: ''
};
return title;
}
\ No newline at end of file
...@@ -1169,6 +1169,48 @@ export class MyAnimation extends MySprite { ...@@ -1169,6 +1169,48 @@ export class MyAnimation extends MySprite {
} }
export class Line extends MySprite{
lineColor = '#ffffff';
lineWidth = 10;
_sX = 0;
_sY = 0;
_tX = 0;
_tY = 0;
setLine(sX, sY, tX, tY){
this._sX = sX;
this._sY = sY;
this._tX = tX;
this._tY = tY;
}
drawLine() {
this.ctx.beginPath();
this.ctx.moveTo(this._sX, this._sY);
this.ctx.lineTo(this._tX, this._tY);
this.ctx.lineWidth = this.lineWidth;
this.ctx.strokeStyle = this.lineColor;
this.ctx.stroke();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
......
...@@ -17,3 +17,38 @@ ...@@ -17,3 +17,38 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'FUTURAB';
src: url("../../assets/font/FUTURAB.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'TCB';
src: url("../../assets/font/TCB.TTF") ;
}
@font-face
{
font-family: 'FUTURA';
src: url("../../assets/font/Futura.ttc") ;
}
@font-face
{
font-family: 'FuturaStd';
src: url("../../assets/font/FuturaStd-Medium.otf") ;
}
\ No newline at end of file
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import { import {
Label, Label,
MySprite, tweenChange, MySprite, tweenChange,
Line,
ShapeRectNew
} 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 TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import { Title, getDefaultTile } from './Title';
import { getDefaultExercisesItem, Exercises } from './Exercises';
import { Listening } from './Listening';
import { NzTreeHigherOrderServiceToken } from 'ng-zorro-antd';
@Component({ @Component({
...@@ -22,8 +28,8 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -22,8 +28,8 @@ import TWEEN from '@tweenjs/tween.js';
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', { static: true }) wrap: ElementRef;
// 数据 // 数据
data; data;
...@@ -40,6 +46,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -40,6 +46,7 @@ export class PlayComponent implements OnInit, OnDestroy {
my; // 点击y坐标 my; // 点击y坐标
// 资源 // 资源
rawImages = new Map(res); rawImages = new Map(res);
rawAudios = new Map(resAudio); rawAudios = new Map(resAudio);
...@@ -51,23 +58,34 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -51,23 +58,34 @@ export class PlayComponent implements OnInit, OnDestroy {
audioObj = {}; audioObj = {};
//A皮肤显示框
skinRenderArr = [];
renderArr; renderArr;
bigCardRenderArr;
mapScale = 1; mapScale = 1;
mapScaleX = 1;
mapScaleY = 1;
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'YM-42';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic; /**标题*/
title;
listening;
exercisesArr;
curAudio;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -80,13 +98,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -80,13 +98,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {}; this.data = {};
// 获取数据 // 获取数据
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') {
this.data = data; this.data = data;
} }
// console.log('data:' , data); console.log('data:', data);
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -288,6 +306,20 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -288,6 +306,20 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
pauseAudio(key, callback = null) {
const audio = this.audioObj[key];
if (audio) {
if (callback) {
audio.onended = () => {
callback();
};
}
audio.pause();
}
}
loadResources() { loadResources() {
...@@ -395,6 +427,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -395,6 +427,10 @@ export class PlayComponent implements OnInit, OnDestroy {
url = key; url = key;
} }
if (!key) {
return;
}
this.rawAudios.set(key, url); this.rawAudios.set(key, url);
const audio = new Audio(); const audio = new Audio();
...@@ -432,9 +468,28 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -432,9 +468,28 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) { if (!this.data.exercisesArr) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg'; this.data.exercisesArr = [];
for (let i = 0; i < 6; ++i) {
let exercises = getDefaultExercisesItem();
exercises.index = i + i;
this.data.exercisesArr.push(exercises);
}
}
if (!this.data.title) {
this.data.title = getDefaultTile();
}
//设置默认皮肤
if (!this.data.skin) {
this.data.skin = 'A';
} }
} }
...@@ -443,10 +498,48 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -443,10 +498,48 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加预加载图片 * 添加预加载图片
*/ */
initImg() { initImg() {
//练习题图片
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
this.addUrlToImages(this.data.pic_url); let exercises = this.data.exercisesArr[i];
this.addUrlToImages(this.data.pic_url_2);
if (exercises.pic_url) {
this.addUrlToImages(exercises.pic_url);
}
}
if (this.data.lt_pic_url) {
this.addUrlToImages(this.data.lt_pic_url);
}
if (this.data.lm_pic_url) {
this.addUrlToImages(this.data.lm_pic_url);
}
if (this.data.lb_pic_url) {
this.addUrlToImages(this.data.lb_pic_url);
}
if (this.data.mt_pic_url) {
this.addUrlToImages(this.data.mt_pic_url);
}
if (this.data.mb_pic_url) {
this.addUrlToImages(this.data.mb_pic_url);
}
if (this.data.rt_pic_url) {
this.addUrlToImages(this.data.rt_pic_url);
}
if (this.data.rm_pic_url) {
this.addUrlToImages(this.data.rm_pic_url);
}
if (this.data.rb_pic_url) {
this.addUrlToImages(this.data.rb_pic_url);
}
} }
/** /**
...@@ -454,12 +547,34 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -454,12 +547,34 @@ 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('waves', this.rawAudios.get('waves'));
this.addUrlToAudioObj('back', this.rawAudios.get('back'));
//标题发音
if (this.data.title.audio_url) {
this.addUrlToAudioObj('titleAudio', this.data.title.audio_url);
}
//听力材料
if (this.data.listenAudioUrl) {
this.addUrlToAudioObj('listenAudio', this.data.listenAudioUrl);
}
//练习题音效
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i];
if (exercises.audio_url) {
this.addUrlToAudioObj('exercises_' + i, exercises.audio_url);
}
}
} }
...@@ -475,14 +590,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -475,14 +590,17 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
// this.mapScale = sx; this.mapScaleX = sx;
// this.mapScale = sy; this.mapScaleY = sy;
this.renderArr = []; this.renderArr = [];
this.bigCardRenderArr = [];
this.exercisesArr = [];
this.skinRenderArr = [];
} }
...@@ -492,159 +610,300 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -492,159 +610,300 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initView() { initView() {
this.initBg();
this.initPic(); this.initTitle();
this.initBottomPart(); this.initBottomPart();
this.initExercises();
}
initBg() {
const getPic = (key, anchorX: number = 0.5, anchorY: number = 0.5) => {
const pic = new MySprite();
pic.init(this.images.get(key), anchorX, anchorY);
pic.setScaleXY(this.mapScale);
this.skinRenderArr.push(pic);
return pic;
}
//左上
if (this.data.lt_pic_url) {
const pic = getPic(this.data.lt_pic_url, 0, 0);
pic.x = 0;
pic.y = 0;
}
//左中
if (this.data.lm_pic_url) {
const pic = getPic(this.data.lm_pic_url, 0);
pic.x = 0;
pic.y = (this.canvasHeight - pic.getBoundingBox().height) / 2;
}
//左下
if (this.data.lb_pic_url) {
const pic = getPic(this.data.lb_pic_url, 0, 1);
pic.x = 0;
pic.y = this.canvasHeight;
}
//中上
if (this.data.mt_pic_url) {
const pic = getPic(this.data.lm_pic_url, 0.5, 0);
pic.x = this.canvasWidth / 2;
pic.y = 0;
}
//中下
if (this.data.mb_pic_url) {
const pic = getPic(this.data.mb_pic_url, 0.5, 1);
pic.x = this.canvasWidth / 2;
pic.y = this.canvasHeight;
}
//右上
if (this.data.rt_pic_url) {
const pic = getPic(this.data.rt_pic_url, 1, 0);
pic.x = this.canvasWidth;
pic.y = 0;
}
//右中
if (this.data.rm_pic_url) {
const pic = getPic(this.data.rm_pic_url, 1, 0.5);
pic.x = this.canvasWidth;
pic.y = this.canvasHeight / 2;
}
//右下
if (this.data.rb_pic_url) {
const pic = getPic(this.data.rb_pic_url, 1, 1);
pic.x = this.canvasWidth;
pic.y = this.canvasHeight;
}
} }
initBottomPart() { initBottomPart() {
const btnLeft = new MySprite(); const listening = new Listening(this.audioObj['listenAudio'], this.images);
btnLeft.init(this.images.get('btn_left')); listening.init(this.mapScale, this.mapScale);
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale; listening.bg.x = this.canvasWidth - listening.bg.width - 10 * this.mapScale;
listening.bg.y = this.canvasHeight - listening.bg.height - 8 * this.mapScale;
this.listening = listening;
btnLeft.setScaleXY(this.mapScale); this.renderArr.push(listening.bg);
}
this.renderArr.push(btnLeft); initTitle() {
const title = new Title(this.data.title, this.images);
this.btnLeft = btnLeft; title.init(this.mapScale, this.mapScale);
title.audio = this.audioObj['titleAudio'];
this.title = title;
title.titleBg.y = 0;
title.titleBg.x = 0;
this.renderArr.push(title.titleBg);
}
const btnRight = new MySprite(); initExercises() {
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); let startX = 81 * this.mapScaleX;
this.btnRight = btnRight; let startY = 157 * this.mapScaleY;
let tempStartY = startY;
let midLen = this.data.exercisesArr.length / 2;
//如果是A皮肤,则增加长的背景信息
if (this.data.skin === 'A') {
let starty = startY;
for (let i = 0; i < 3; ++i) {
const lBg = new ShapeRectNew();
lBg.fillColor = "#E5E3E4";
lBg.x = startX;
lBg.y = starty;
lBg.setSize(1100 * this.mapScale, 80 * this.mapScale, 40 * this.mapScale);
this.skinRenderArr.push(lBg);
starty = starty + 80 * this.mapScale + 78 * this.mapScaleY;
}
} }
initPic() { for (let i = 0; i < this.data.exercisesArr.length; ++i) {
const maxW = this.canvasWidth * 0.7; let index = i + 1;
const pic1 = new MySprite(); let exercisesData = this.data.exercisesArr[i];
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); exercisesData.index = index;
this.pic1 = pic1;
const label1 = new Label(); let exercises = new Exercises(exercisesData, this.images);
label1.text = this.data.text; exercises.audio = this.audioObj['exercises_' + i];
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1); exercises.init(this.data.skin, this.mapScaleX, this.mapScaleY);
this.exercisesArr.push(exercises);
exercises.bg.x = startX;
exercises.bg.y = startY;
if (index % 3 == 0) {
const pic2 = new MySprite(); if (this.data.skin === 'A') {
pic2.init(this.images.get(this.data.pic_url_2)); startX = startX + exercises.bg.width;
pic2.x = this.canvasWidth / 2 + this.canvasWidth; }
pic2.y = this.canvasHeight / 2; else {
pic2.setScaleXY(maxW / pic2.width); startX = startX + 25 * this.mapScaleX + exercises.bg.width;
}
this.renderArr.push(pic2); //到下一行增加高度
this.pic2 = pic2; startY = tempStartY
}
else {
if (this.data.skin === 'A') {
startY = startY + exercises.bg.height + 78 * this.mapScaleY;
}
else {
startY = startY + exercises.bg.height + 65 * this.mapScaleY;
}
this.curPic = pic1;
} }
btnLeftClicked() {
this.lastPage(); this.renderArr.push(exercises.bg);
this.bigCardRenderArr.push(exercises.cardBg);
} }
btnRightClicked() { let minScale = 1;
//获取最小字体
for (let i = 0; i < this.exercisesArr.length; ++i) {
let textLabelArr = this.exercisesArr[i].textLabelArr;
for (let j = 0; j < textLabelArr.length; ++j) {
let textLabel = textLabelArr[j];
this.nextPage(); if (minScale > textLabel.scaleX) {
minScale = textLabel.scaleX;
}
} }
lastPage() {
if (this.curPic == this.pic1) {
return;
} }
this.canTouch = false; for (let i = 0; i < this.exercisesArr.length; ++i) {
this.exercisesArr[i].resetText(minScale, this.data.skin);
}
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
} }
nextPage() { mapDown(event) {
if (this.curPic == this.pic2) { if (!this.canTouch) {
return; return;
} }
this.canTouch = false; if (this.curAudio) {
if (this.curAudio != this.listening.audio) {
this.curAudio.pause();
}
}
if (this.checkClickTarget(this.listening.bg)) {
const moveLen = this.canvasWidth; this.curAudio = this.listening.play();
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => { return;
this.canTouch = true;
this.curPic = this.pic2;
});
} }
pic1Clicked() { if (this.curAudio) {
this.playAudio(this.data.audio_url); if (this.curAudio == this.listening.audio) {
this.listening.pauseAudio();
}
else {
this.curAudio.pause();
} }
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
} }
if (this.checkClickTarget(this.title.titleBg)) {
this.curAudio = this.title.playAudio();
return;
}
for (let i = 0; i < this.exercisesArr.length; ++i) {
let exer = this.exercisesArr[i];
if (!exer.canClick) {
continue;
}
mapDown(event) { if (this.checkClickTarget(exer.bg)) {
if (!this.canTouch) { if (!exer.showed) {
return; this.playAudio('waves', true);
exer.showBigCard(this.canvasWidth / 2, this.canvasHeight / 2, () => {
//将其它词组设置为不可点击
for (let j = 0; j < this.exercisesArr.length; ++j) {
if (i != j) {
//暂停其它音频播放
this.exercisesArr[j].pasueAudio();
this.exercisesArr[j].canClick = false;
} }
}
});
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return; return;
} }
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
} }
if ( this.checkClickTarget(this.pic1) ) { if (exer.canClickCard) {
this.pic1Clicked();
if (this.checkClickTarget(exer.overturnPic)) {
this.playAudio('turn', true);
exer.overturn(1);
return; return;
} }
if ( this.checkClickTarget(this.pic2) ) { if (this.checkClickTarget(exer.closePic)) {
this.pic2Clicked();
this.playAudio('turn', true);
exer.close(() => {
//将词组设置为可点击
for (let j = 0; j < this.exercisesArr.length; ++j) {
this.exercisesArr[j].canClick = true;
}
});
return; return;
} }
if (this.checkClickTarget(exer.bigCard)) {
this.curAudio = exer.playAudio();
}
}
}
} }
mapMove(event) { mapMove(event) {
...@@ -667,13 +926,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -667,13 +926,11 @@ export class PlayComponent implements OnInit, OnDestroy {
TWEEN.update(); TWEEN.update();
// ---------------------------------------------------------- // ----------------------------------------------------------
this.updateArr(this.skinRenderArr);
this.updateArr(this.renderArr); this.updateArr(this.renderArr);
this.updateArr(this.bigCardRenderArr);
} }
} }
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['play', "assets/play/play.png"],
['btn_left', "assets/play/btn_left.png"], ['stop', "assets/play/stop.png"],
['btn_right', "assets/play/btn_right.png"], ['titlePart1Bg', "assets/play/title-part1-bg.png"],
// ['text_bg', "assets/play/text_bg.png"], ['close', "assets/play/close.png"],
['overturn', "assets/play/overturn.png"],
['box', "assets/play/box.png"],
]; ];
...@@ -12,7 +13,9 @@ const res = [ ...@@ -12,7 +13,9 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['back', "assets/play/music/back.mp3"],
['waves', "assets/play/music/waves.mp3"],
['turn', "assets/play/music/turn.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
This source diff could not be displayed because it is too large. You can view the blob instead.
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