Commit 2637e618 authored by Chen Jiping's avatar Chen Jiping

完成模板

parent 7b9a904b
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
}
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "1f204c63-0345-49a5-a648-061ecc332858"
}
}
\ No newline at end of file
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<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>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<div nz-row>
<div nz-col nzOffset="2" [nzSpan]="16">
<div nz-row>
<div nz-col nzOffset='4' [nzSpan]="12"><h1 nz-title>课程内容编辑</h1></div>
</div>
<div nz-form>
<div id='title-anchor'>
<nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="val1">标题1</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-group nzAddOnBefore="Part">
<input type="text" id="val1" nz-input [(ngModel)]="item.title.val1" (blur)="save()">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="val2">标题2</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="val2" [(ngModel)]="item.title.val2" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="audioUrl">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder
[audioUrl]="item.title.audioUrl" id="audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item.title, 'audioUrl')">
</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-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='word-anchor'>
<nz-divider nzText="单词信息" nzOrientation="left"></nz-divider>
<div *ngFor="let exercises of item.exercisesArr; let i = index">
<nz-card nzType="inner" style="margin-top:16px;" nzTitle="单词 {{i + 1}}">
<div nz-form id="word-anchor-{{i + 1}}">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="world">单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="Please input word" [(ngModel)]="exercises.word" (blur)="save()">
</nz-form-control>
<nz-form-label [nzSpan]="6" nzFor="answerIndex">答案顺序</nz-form-label>
<nz-form-control [nzSpan]="4">
<input type="number" max='4' min="1" nz-input [(ngModel)]="exercises.answerIndex" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="picUrl">图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview
style="width: 100%"
[picUrl]="exercises.picUrl"
(imageUploaded)="onImageUploadSuccess($event, exercises, 'picUrl')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="audioUrl">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="exercises.audioUrl"
[audioUrl]="exercises.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, exercises, 'audioUrl')">
</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">
<input type="text" nz-input [(ngModel)]="exercises.letterCombinations.val" placeholder="Please input letter combinations" (blur)="save()">
</nz-form-control>
<nz-form-label [nzSpan]="6">单词组合发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="exercises.letterCombinations.audioUrl"
[audioUrl]="exercises.letterCombinations.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, exercises.letterCombinations, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">单词拆分</nz-form-label>
<nz-form-control [nzSpan]="12">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addLetter(exercises)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="2" [nzSpan]="16">
<nz-table #lettersTable nzBordered nzTitle="按照单词填空需要进行拆分填写" [nzData]="exercises.letters" [nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>字母组合</th>
<th>是否填空字母</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of lettersTable.data;let j = index">
<td>{{ j+1 }}</td>
<td><input type="text" nz-input placeholder="请录入字母(组合)" [(ngModel)]="data.val" (blur)="save()"></td>
<td>
<nz-radio-group [(ngModel)]="data.isFill" (ngModelChange)="save()">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
</td>
<td>
<a (click)="delLetter(exercises, j)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
</div>
</nz-card>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -10,7 +10,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "YM-22";
// 储存对象
item;
......@@ -51,36 +51,100 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
if(!this.item.title){
this.item.title = {};
}
if(!this.item.exercisesArr){
this.item.exercisesArr = [];
//初始化四道练习题
for(let i = 0; i < 4; ++ i){
let exercises = this.getDefaultExercises();
this.item.exercisesArr.push(exercises);
}
}
console.log('data', this.item);
}
/**
* 获取默认练习题
*/
getDefaultExercises(){
let exercises = {
audioUrl:'',
picUrl:'',
world:'',
answerIndex:null,
letterCombinations:{
val:'',
audioUrl:''
},
letters:[]
};
return exercises;
}
/**
* 获取默认的字母
*/
getDefaultLetter(){
let letter = {
val:'',
isFill:'0'
};
return letter;
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onImageUploadSuccess(e, item, key) {
this.item[key] = e.url;
this.save();
item[key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
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();
}
}
/**
* 储存数据
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
this.changeDetectorRef.detectChanges();
this.refresh();
}
......
import {
Label,
MySprite, ShapeRect
} from './Unit';
export class Exercises {
/**练习题背景 */
bg: ShapeRect = null;
/**单词背景 */
wordBg: MySprite = null;
/**小黄圈内单词组合 */
letterCombinations: MySprite = null;
/**答案顺序标签 */
answerIndexLabel: Label = null;
answerShowed = false;
/**单词图片 */
wordPic : MySprite = null;
/**单词拆分背景 */
wordSplitPic:ShapeRect = null;
/**单词发音 */
wordAudioUrl:'';
/**字母(组合)发音 */
letterAudioUrl:'';
/**单词拆分的字母(组合) */
letterArr = [];
showed = false;
setShow(){
for(let i = 0; i < this.letterArr.length; ++ i){
this.letterArr[i].alpha = 1;
this.letterArr[i].fontColor = '#C8161E';
}
this.showed = true;
}
}
\ No newline at end of file
......@@ -17,3 +17,14 @@
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'FUTURAB';
src: url("../../assets/font/FUTURAB.TTF") ;
}
@font-face
{
font-family: 'MMTextBook-Bold';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
\ No newline at end of file
......@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener
import {
Label,
MySprite, tweenChange,
MySprite, tweenChange,ShapeRect,LineRect
} from './Unit';
import {res, resAudio} from './resources';
......@@ -12,7 +12,9 @@ import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import {
Exercises
} from './Exercises'
@Component({
......@@ -57,17 +59,36 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft;
canvasTop;
saveKey = 'test_0011';
saveKey = 'YM-22';
/**标题背景 */
titleBg;
btnLeft;
btnRight;
pic1;
pic2;
btnPlay;
btnStop;
canTouch = true;
curPic;
/**音频播放状态 */
playStatus = false;
/**当前播放的curAudio */
curAudio;
/**练习题数组 */
exercisesArr = []
/**练习题坐标*/
exercisesPosArr = [];
/**练习题背景宽度 */
exercisesBgWidth;
/**练习题背景高度 */
exercisesBgHeight;
/**当前显示答案 */
nextShowAnser;
@HostListener('window:resize', ['$event'])
onResize(event) {
......@@ -86,7 +107,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();
......@@ -274,6 +295,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const audio = this.audioObj[key];
if (audio) {
this.curAudio = audio;
if (now) {
audio.pause();
audio.currentTime = 0;
......@@ -288,6 +310,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() {
......@@ -353,6 +389,10 @@ export class PlayComponent implements OnInit, OnDestroy {
checkClickTarget(target) {
if(!target){
return;
}
const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) {
......@@ -389,6 +429,10 @@ export class PlayComponent implements OnInit, OnDestroy {
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
if(!key){
return;
}
const audioObj = this.audioObj;
if (url == null) {
......@@ -413,7 +457,10 @@ export class PlayComponent implements OnInit, OnDestroy {
}
addUrlToImages(url) {
this.rawImages.set(url, url);
if(url){
this.rawImages.set(url, url);
}
}
......@@ -432,10 +479,45 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
if(!this.data.title){
this.data.title = {};
}
if(!this.data.exercisesArr){
this.data.exercisesArr = [];
//初始化四道练习题
for(let i = 0; i < 4; ++ i){
let exercises = this.getDefaultExercises();
exercises.answerIndex = i + 1;
exercises.world = 'world'
this.data.exercisesArr.push(exercises);
}
}
}
/**
* 获取默认练习题
*/
getDefaultExercises(){
let exercises = {
audioUrl:'',
picUrl:'',
world:'',
answerIndex:null,
letterCombinations:{
val:'',
audioUrl:''
},
letters:[]
};
return exercises;
}
......@@ -444,8 +526,16 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
//单词图片
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i];
if(exercises.picUrl){
this.addUrlToImages(exercises.picUrl);
}
}
}
......@@ -454,13 +544,25 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
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(this.data.title.audioUrl);
//听力材料
this.addUrlToAudioObj(this.data.listenAudioUrl);
//单词音效
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i];
this.addUrlToAudioObj(exercises.audioUrl);
this.addUrlToAudioObj(exercises.letterCombinations.audioUrl);
}
}
......@@ -481,12 +583,71 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr = [];
this.exercisesPosArr = [];
this.exercisesArr = [];
this.nextShowAnser = 1;
this.canTouch = false;
//计算练习题中习坐标
this.initExercisesPos();
}
/**
* 初始练习题坐标
*/
initExercisesPos(){
let x1 = this.canvasWidth / 3;
let x2 = x1 * 2;
//练习题背景最大宽度
let maxWidth = 492 * this.mapScale;
this.exercisesBgWidth = maxWidth;
let totalWidth = maxWidth * 2 + 45 * this.mapScale;
//练习题背景最大高度
let maxHeight = 258 * this.mapScale;
this.exercisesBgHeight = maxHeight;
let totalHeight = maxHeight * 2 + 45 * this.mapScale;
//离顶部间隔
let marginTop = 85 * this.mapScale;
let startY = (this.canvasHeight - totalHeight - marginTop) / 2 + marginTop / 2;
let startX = (this.canvasWidth - totalWidth) / 2;
let tempStartX = startX;
for(let i = 0; i < 4; ++ i){
let x = startX;
let y = startY;
if((i + 1) % 2 == 1){
startX = startX + 45 * this.mapScale + maxWidth;
}
else if((i + 1) % 2 == 0){
startX = tempStartX;
//到下一行增加高度
startY = startY + maxHeight + 45 * this.mapScale;
}
let pos = {x: x, y:y};
//console.log(pos);
this.exercisesPosArr.push(pos);
}
}
/**
* 初始化试图
*/
......@@ -497,124 +658,338 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initBottomPart();
this.initExercises();
this.canTouch = true;
}
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 btnPlay = new MySprite();
btnPlay.init(this.images.get('play'));
btnPlay.x = this.canvasWidth - 100 * this.mapScale;
btnPlay.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
btnPlay.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.renderArr.push(btnPlay);
this.btnLeft = btnLeft;
this.btnPlay = btnPlay;
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);
const btnStop = new MySprite();
btnStop.init(this.images.get('stop'));
btnStop.x = btnPlay.x;
btnStop.y = btnPlay.y;
btnStop.alpha = 0;
btnStop.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.renderArr.push(btnStop);
this.btnRight = btnRight;
this.btnStop = btnStop;
}
initPic() {
//初始化标题
const titePart1Bg = new MySprite();
titePart1Bg.init(this.images.get('titlePart1Bg'));
titePart1Bg.x = titePart1Bg.width / 2;
titePart1Bg.y = titePart1Bg.height / 2;
//标题1内容
const part1 = new Label();
part1.text = this.data.title.val1;
part1.textAlign = 'middle';
part1.fontSize = 48;
part1.fontName = "BRLNSDB";
part1.fontColor = "#F7CB47";
part1.refreshSize();
part1.x = - part1.getBoundingBox().width / 2;
titePart1Bg.addChild(part1);
//标题2内容
const part2 = new Label();
part2.text = this.data.title.val2;
part2.fontSize = 44;
part2.fontName = "FUTURAB";
part2.fontColor = "#000000";
part2.refreshSize();
part2.x = titePart1Bg.width + 10 * this.mapScale;
part2.y = titePart1Bg.height / 2;
let bgWidth = titePart1Bg.width + part2.getBoundingBox().width + 10 * this.mapScale;
let bgHeight = titePart1Bg.height;
let titleBg = new ShapeRect();
titleBg.setSize(bgWidth, bgHeight);
titleBg.setScaleXY(this.mapScale);
titleBg.x = 60 * this.mapScale;
titleBg.y = 0;
titleBg.alpha = 0;
titleBg.addChild(titePart1Bg);
titleBg.addChild(part2);
this.titleBg = titleBg;
this.renderArr.push(titleBg);
}
const maxW = this.canvasWidth * 0.7;
/**
* 初始化练习题
*/
initExercises(){
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;
for(let i = 0; i < this.data.exercisesArr.length; ++ i){
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
const exercisesObj = new Exercises();
pic1.addChild(label1);
let exercisesBg = new ShapeRect();
exercisesBg.setSize(this.exercisesBgWidth, this.exercisesBgHeight);
exercisesBg.x = this.exercisesPosArr[i].x;
exercisesBg.y = this.exercisesPosArr[i].y;
exercisesBg.alpha = 0;
exercisesObj.bg = exercisesBg;
//单词图片
this.initWordPic(this.data.exercisesArr[i], exercisesObj);
this.renderArr.push(exercisesBg);
this.exercisesArr.push(exercisesObj);
}
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;
initWordPic(exercises, exercisesObj: Exercises) {
this.curPic = pic1;
}
exercisesObj.wordAudioUrl = exercises.audioUrl;
exercisesObj.letterAudioUrl = exercises.letterCombinations.audioUrl;
btnLeftClicked() {
//最短
let sWidth = 120;
this.lastPage();
}
//中等
let mWidth = 230;
btnRightClicked() {
//最长
let lWidth = 340;
this.nextPage();
}
const letterBg = new ShapeRect();
letterBg.alpha = 0;
this.initSplitWord(letterBg, exercises, exercisesObj);
lastPage() {
let wordWidth = letterBg.getBoundingBox().width;
if (this.curPic == this.pic1) {
return;
const wordBg = new MySprite();
if (wordWidth <= 120) {
wordBg.init(this.images.get('wordBgS'));
}
else if (120 < wordWidth && wordWidth < mWidth) {
wordBg.init(this.images.get('wordBgM'));
}
else {
wordBg.init(this.images.get('wordBgL'));
this.canTouch = false;
if (wordWidth > 340) {
letterBg.setScaleXY(340 / letterBg.width);
}
}
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;
});
}
//单词坐标
letterBg.x = (wordBg.width - 106) / 2 - (wordBg.width / 2 - 80) - letterBg.getBoundingBox().width / 2;
letterBg.y = - letterBg.getBoundingBox().height / 2
wordBg.addChild(letterBg);
nextPage() {
exercisesObj.wordSplitPic = letterBg;
if (this.curPic == this.pic2) {
return;
wordBg.setScaleXY(this.mapScale);
wordBg.x = this.exercisesBgWidth / 2;
wordBg.y = this.exercisesBgHeight - wordBg.getBoundingBox().height / 2;
exercisesObj.bg.addChild(wordBg);
exercisesObj.wordBg = wordBg;
//图片
const wordPic = new MySprite();
wordPic.init(this.images.get(exercises.picUrl));
let scaleX = this.exercisesBgWidth / wordPic.width;
let scaleY = (this.exercisesBgHeight - wordBg.getBoundingBox().height) / wordPic.height;
let mapScale = Math.min(scaleX, scaleY);
//如果超过最大,则进行缩小
if (mapScale < 1) {
wordPic.setScaleXY(mapScale);
}
wordPic.x = wordBg.x;
wordPic.y = this.exercisesBgHeight - wordBg.getBoundingBox().height - wordPic.getBoundingBox().height / 2;
exercisesObj.bg.addChild(wordPic);
exercisesObj.wordPic = wordPic;
//如果录入值 ,则初始化单词组合
if (exercises.letterCombinations.val) {
const letterBg = new MySprite();
letterBg.init(this.images.get('letter'));
letterBg.setScaleXY(this.mapScale);
letterBg.x = wordBg.x;
letterBg.y = this.exercisesBgHeight + 10 * this.mapScale;
exercisesObj.bg.addChild(letterBg);
exercisesObj.letterCombinations = letterBg;
const letter = new Label();
letter.text = exercises.letterCombinations.val;
letter.fontSize = 36
letter.fontName = "BRLNSDB";
letter.fontColor = "#AB5A23";
letter.refreshSize();
letter.setMaxSize(letterBg.width);
letter.x = -letter.getBoundingBox().width / 2;
letterBg.addChild(letter);
}
this.canTouch = false;
//答案顺序
const answerIndex = new Label();
answerIndex.text = exercises.answerIndex;
answerIndex.fontSize = 64
answerIndex.fontName = "BRLNSDB";
answerIndex.fontColor = "#000000";
answerIndex.refreshSize();
answerIndex.alpha = 0;
answerIndex.setMaxSize(80 * this.mapScale);
answerIndex.y = - 5 * this.mapScale;
answerIndex.x = - wordBg.getBoundingBox().width / 2 + 13 * this.mapScale + 80 * this.mapScale / 2;
wordBg.addChild(answerIndex);
exercisesObj.answerIndexLabel = answerIndex;
}
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.pic2;
});
/**
* 初始拆分字母
* @param letterBg
* @param exercises
* @param exercisesObj
*/
initSplitWord(letterBg: ShapeRect, exercises, exercisesObj: Exercises) {
let letters = exercises.letters;
let startX = 0;
let defaultWidth = 30 * this.mapScale;
let totalWidth = 0;
let height = 0;
for (let i = 0; i < letters.length; ++i) {
let letter = letters[i];
const l_letter = new Label();
l_letter.text = letter.val;
l_letter.fontSize = 64;
l_letter.fontName = "MMTextBook-Bold";
l_letter.fontColor = "#E2E2E2";
l_letter.refreshSize();
l_letter.x = startX;
l_letter.y = l_letter.getBoundingBox().height / 2 - 5 * this.mapScale;
if (l_letter.getBoundingBox().width > defaultWidth) {
defaultWidth = l_letter.getBoundingBox().width;
}
//如果是填空,则添加下划线
if (letter.isFill == '1') {
//设置不显示
l_letter.alpha = 0;
const underline = new LineRect();
underline.setSize(defaultWidth - 8 * this.mapScale, 0.2);
underline.lineColor = "#000000";
underline.lineWidth = 4;
underline.x = l_letter.x + 4 * this.mapScale;
underline.y = l_letter.y + l_letter.getBoundingBox().height / 2;
letterBg.addChild(underline);
//单词居中
l_letter.x = startX + (defaultWidth - l_letter.getBoundingBox().width) / 2;
startX = startX + defaultWidth;
totalWidth = totalWidth + defaultWidth;
}
else {
startX = startX + l_letter.getBoundingBox().width;
totalWidth += l_letter.getBoundingBox().width;
}
defaultWidth = 38 * this.mapScale;
letterBg.addChild(l_letter);
height = l_letter.getBoundingBox().height;
exercisesObj.letterArr.push(l_letter);
}
letterBg.setSize(totalWidth, height);
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
btnPlayClicked() {
if(this.curAudio){
this.curAudio.pause();
}
this.setListenPlayStatus();
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
btnStopClicked() {
this.setListenPlayStatus();
}
/**
* 设置听力材料播放状态
*/
setListenPlayStatus(){
if(this.playStatus){
this.playStatus = false;
this.pauseAudio(this.data.listenAudioUrl);
this.btnPlay.alpha = 1;
this.btnStop.alpha = 0;
}
else{
this.playAudio(this.data.listenAudioUrl, false, ()=>{
this.playStatus = false;
this.btnPlay.alpha = 1;
this.btnStop.alpha = 0;
});
this.playStatus = true;
this.btnPlay.alpha = 0;
this.btnStop.alpha = 1;
}
}
......@@ -625,26 +1000,99 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
//如果不是播放听力材料,则暂停当前播放音频
if(!this.playStatus){
if(this.curAudio){
this.curAudio.pause();
}
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
if (this.checkClickTarget(this.btnPlay) && !this.playStatus) {
this.btnPlayClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
if (this.checkClickTarget(this.btnStop) && this.playStatus) {
this.btnStopClicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
//点击标题
if (this.checkClickTarget(this.titleBg)) {
if(this.playStatus){
this.setListenPlayStatus();
}
//播放发音
this.playAudio(this.data.title.audioUrl);
return;
}
//循环判断是否被点击
for(let i = 0; i < this.exercisesArr.length; ++ i){
let exercises = this.exercisesArr[i];
console.log('click word');
//点击图片
if(this.checkClickTarget(exercises.wordPic)){
if(this.playStatus){
this.setListenPlayStatus();
}
this.playAudio(exercises.wordAudioUrl);
return;
}
//点击圆圈
if(this.checkClickTarget(exercises.letterCombinations)){
if(this.playStatus){
this.setListenPlayStatus();
}
this.playAudio(exercises.letterAudioUrl);
return;
}
//点击单词
if(this.checkClickTarget(exercises.wordSplitPic)){
//如果未加载,则加载
if(exercises.showed){
if(this.playStatus){
this.setListenPlayStatus();
}
this.playAudio(exercises.wordAudioUrl);
return;
}
else{
exercises.setShow();
return;
}
}
//点击灰色部分,判断是否显示答案
if(this.checkClickTarget(exercises.answerIndexLabel)){
if(exercises.answerIndexLabel.text){
if(this.nextShowAnser == exercises.answerIndexLabel.text){
if(!exercises.answerShowed){
exercises.answerIndexLabel.alpha = 1;
this.nextShowAnser ++;
}
}
}
return;
}
}
}
mapMove(event) {
......
const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
['play', "assets/play/play.png"],
['stop', "assets/play/stop.png"],
['titlePart1Bg', "assets/play/title-part1-bg.png"],
['wordBgL', "assets/play/word_bg_l.png"],
['wordBgM', "assets/play/word_bg_m.png"],
['wordBgS', "assets/play/word_bg_s.png"],
['letter', "assets/play/letter.png"],
['answer', "assets/play/answer.png"],
];
......
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