Commit 8297e29c authored by Chen Jiping's avatar Chen Jiping

完善

parent 99f34e16
...@@ -58,10 +58,10 @@ ...@@ -58,10 +58,10 @@
<nz-form-item> <nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3"> <nz-form-control [nzSpan]="6" nzOffset="3">
<div *ngIf="item.skin == 'A'"> <div *ngIf="item.skin == 'A'">
<img src="assets/play/skin_1.jpg" style="width: auto;height: 200px;"> <img src="assets/play/skin_2.jpg" style="width: auto;height: 200px;">
</div> </div>
<div *ngIf="item.skin == 'B'"> <div *ngIf="item.skin == 'B'">
<img src="assets/play/skin_2.jpg" style="width: auto;height: 200px;"> <img src="assets/play/skin_1.jpg" style="width: auto;height: 200px;">
</div> </div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
...@@ -93,6 +93,14 @@ ...@@ -93,6 +93,14 @@
(blur)="save()"> (blur)="save()">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.audio_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-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.text">序号</nz-form-label> <nz-form-label [nzSpan]="6" nzFor="{{j}}.text">序号</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
...@@ -101,10 +109,10 @@ ...@@ -101,10 +109,10 @@
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.pic_url">音频</nz-form-label> <nz-form-label [nzSpan]="6" nzFor="{{j}}.index_audio_url">序号音频</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<app-audio-recorder id="{{j}}.audio_url" [audioUrl]="data.audio_url" <app-audio-recorder id="{{j}}.index_audio_url" [audioUrl]="data.index_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audio_url')"> (audioUploaded)="onAudioUploadSuccess($event, data, 'index_audio_url')">
</app-audio-recorder> </app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
......
...@@ -115,7 +115,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -115,7 +115,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
const exercises = { const exercises = {
text:'', text:'',
index:'', index:'',
audio_url:'' audio_url:'',
index_audio_url:''
}; };
return exercises; return exercises;
......
...@@ -20,6 +20,8 @@ export class Exercises { ...@@ -20,6 +20,8 @@ export class Exercises {
audio; audio;
indexAudio;
images; images;
exercisesData; exercisesData;
...@@ -37,6 +39,8 @@ export class Exercises { ...@@ -37,6 +39,8 @@ export class Exercises {
index; index;
indexShowed = false;
scaleX = 1; scaleX = 1;
scaleY = 1; scaleY = 1;
...@@ -58,7 +62,6 @@ export class Exercises { ...@@ -58,7 +62,6 @@ export class Exercises {
initBg2(width, height){ initBg2(width, height){
console.log(width, height);
//最底部背景 //最底部背景
const bg2 = new ShapeRect(); const bg2 = new ShapeRect();
bg2.alpha = 0; bg2.alpha = 0;
...@@ -85,6 +88,7 @@ export class Exercises { ...@@ -85,6 +88,7 @@ export class Exercises {
if(curIndex == this.index){ if(curIndex == this.index){
this.indexLabel.alpha = 1; this.indexLabel.alpha = 1;
this.indexShowed = true;
return true; return true;
} }
else{ else{
...@@ -93,10 +97,17 @@ export class Exercises { ...@@ -93,10 +97,17 @@ export class Exercises {
} }
playAudio(callback = null){ playAudio(type, callback = null){
if(type == 'T'){
playAudio(this.audio); playAudio(this.audio);
return this.audio; return this.audio;
} }
else if(type == 'I'){
playAudio(this.indexAudio);
return this.indexAudio;
}
}
getHeight(){ getHeight(){
return this.bg.getBoundingBox().height; return this.bg.getBoundingBox().height;
......
...@@ -48,7 +48,7 @@ export class Skin { ...@@ -48,7 +48,7 @@ export class Skin {
this.contentBgWidth = 348 * this.scaleX; this.contentBgWidth = 348 * this.scaleX;
} }
else{ else {
this.intervalHeight = 110 * this.scaleY; this.intervalHeight = 110 * this.scaleY;
this.intervalWidth = 63 * this.scaleX; this.intervalWidth = 63 * this.scaleX;
...@@ -59,7 +59,7 @@ export class Skin { ...@@ -59,7 +59,7 @@ export class Skin {
initBg(renderArr, canvasWidth: number, canvasHeight: number) { initBg(renderArr, canvasWidth: number, canvasHeight: number) {
if (this.skinType == 'B') { if (this.skinType == 'A') {
const bg = new MySprite(); const bg = new MySprite();
bg.init(this.images.get('skin_2_bg')); bg.init(this.images.get('skin_2_bg'));
let bgScale = Math.max(canvasWidth / bg.width, canvasHeight / bg.height); let bgScale = Math.max(canvasWidth / bg.width, canvasHeight / bg.height);
...@@ -85,16 +85,17 @@ export class Skin { ...@@ -85,16 +85,17 @@ export class Skin {
initExercises(exercises: Exercises, i) { initExercises(exercises: Exercises, i) {
if (this.skinType == 'B') { if (this.skinType == 'A') {
this.setExercisesSkinB(exercises); this.setExercisesSkinA(exercises);
} }
else { else {
this.setExercisesSkinA(exercises, i); this.setExercisesSkinB(exercises, i);
} }
} }
private setExercisesSkinA(exercises: Exercises, i) { private setExercisesSkinB(exercises: Exercises, i) {
const getColor = (i) => { const getColor = (i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
return { bgColor: "#E5E4E3" }; return { bgColor: "#E5E4E3" };
...@@ -118,9 +119,9 @@ export class Skin { ...@@ -118,9 +119,9 @@ export class Skin {
textLabel.fontSize = 48; textLabel.fontSize = 48;
textLabel.fontName = "FUTURABM"; textLabel.fontName = "FUTURABM";
textLabel.fontColor = "#626262"; textLabel.fontColor = "#626262";
textLabel.setMaxSize(bg.width); textLabel.setMaxSize(bg.width - 20 * this.scaleY);
textLabel.refreshSize(); textLabel.refreshSize();
textLabel.x = (bg.width - textLabel.width) / 2; textLabel.x = (bg.width - textLabel.getBoundingBox().width) / 2;
textLabel.y = bg.height / 2; textLabel.y = bg.height / 2;
bg.addChild(textLabel); bg.addChild(textLabel);
...@@ -148,8 +149,8 @@ export class Skin { ...@@ -148,8 +149,8 @@ export class Skin {
indexBg.addChild(indexLabel); indexBg.addChild(indexLabel);
} }
private setExercisesSkinB(exercises: Exercises) { private setExercisesSkinA(exercises: Exercises) {
console.log(this.scaleX, this.scaleY);
const textLabel = new Label(); const textLabel = new Label();
exercises.textLabel = textLabel; exercises.textLabel = textLabel;
textLabel.text = exercises.exercisesData.text; textLabel.text = exercises.exercisesData.text;
...@@ -160,9 +161,6 @@ export class Skin { ...@@ -160,9 +161,6 @@ export class Skin {
textLabel.refreshSize(); textLabel.refreshSize();
const indexLabel = new Label(); const indexLabel = new Label();
exercises.indexLabel = indexLabel; exercises.indexLabel = indexLabel;
indexLabel.text = exercises.exercisesData.index; indexLabel.text = exercises.exercisesData.index;
...@@ -171,6 +169,7 @@ export class Skin { ...@@ -171,6 +169,7 @@ export class Skin {
indexLabel.fontName = "BRLNSDB"; indexLabel.fontName = "BRLNSDB";
indexLabel.fontColor = "#316900"; indexLabel.fontColor = "#316900";
indexLabel.alpha = 0; indexLabel.alpha = 0;
indexLabel.setMaxSize(40 * this.scaleX);
indexLabel.refreshSize(); indexLabel.refreshSize();
const indexBg = new ShapeRect(); const indexBg = new ShapeRect();
...@@ -179,48 +178,51 @@ export class Skin { ...@@ -179,48 +178,51 @@ export class Skin {
indexBg.childDepandVisible = false; indexBg.childDepandVisible = false;
indexBg.addChild(indexLabel); indexBg.addChild(indexLabel);
exercises.indexBg = indexBg; exercises.indexBg = indexBg;
indexLabel.x = (indexBg.width - indexLabel.getBoundingBox().width )/ 2; indexLabel.x = (indexBg.width - indexLabel.getBoundingBox().width) / 2;
indexLabel.y = indexBg.height / 2 indexLabel.y = indexBg.height / 2
//树桩 //树桩
const stump = new MySprite(); const stump = new MySprite();
exercises.bg = stump;
//默认大树桩 //默认大树桩
let imageKey = "stump_b"; let imageKey = "stump_b";
let textMargin = { marginTop: 37 * this.scaleY, marginLeft: 70 * this.scaleX, maxWidth: 219 * this.scaleX }; let textMargin = { marginTop: 29 * this.scaleY, marginLeft: 70 * this.scaleX, maxWidth: 219 * this.scaleX };
let indexMargin = { marginTop: 92 * this.scaleY, marginLeft: 164 * this.scaleX };
let indexMargin = { marginTop: 93 * this.scaleY, marginLeft: 164 * this.scaleX }; let textLabelWidth = textLabel.width;
if (textLabel.width < 110 * this.scaleX) { if (textLabelWidth < 110) {
//取小树桩 //取小树桩
imageKey = "stump_s" imageKey = "stump_s"
indexMargin.marginLeft = 109 * this.scaleX; indexMargin.marginLeft = 107 * this.scaleX;
indexMargin.marginTop = 91 * this.scaleY; indexMargin.marginTop = 92 * this.scaleY;
textMargin.marginLeft = 71 * this.scaleX; textMargin.marginLeft = 71 * this.scaleX;
textMargin.marginTop = 31 * this.scaleY; textMargin.marginTop = 31 * this.scaleY;
textMargin.maxWidth = 110 * this.scaleX; textMargin.maxWidth = 110 * this.scaleX;
} }
else if (textLabel.width <= 153 * this.scaleX) { else if (textLabelWidth <= 153) {
//取中等树桩 //取中等树桩
imageKey = "stump_m" imageKey = "stump_m"
indexMargin.marginLeft = 151 * this.scaleX; indexMargin.marginLeft = 149 * this.scaleX;
indexMargin.marginTop = 90 * this.scaleY; indexMargin.marginTop = 92 * this.scaleY;
textMargin.marginLeft = 89 * this.scaleX; textMargin.marginLeft = 89 * this.scaleX;
textMargin.marginTop = 28 * this.scaleY; textMargin.marginTop = 28 * this.scaleY;
textMargin.maxWidth = 153 * this.scaleX; textMargin.maxWidth = 153 * this.scaleX;
} }
else {
//设置最大宽度 //设置最大宽度
textLabel.setMaxSize(219 * this.scaleX); textLabel.setMaxSize(textMargin.maxWidth - 5 * this.scaleX);
} textLabel.refreshSize();
stump.init(this.images.get(imageKey)); stump.init(this.images.get(imageKey));
stump.scaleX = this.scaleX; stump.scaleX = this.scaleX;
...@@ -228,28 +230,38 @@ export class Skin { ...@@ -228,28 +230,38 @@ export class Skin {
let width = stump.getBoundingBox().width; let width = stump.getBoundingBox().width;
let height = stump.getBoundingBox().height let height = stump.getBoundingBox().height;
const bg = new ShapeRect();
bg.setSize(width, height);
bg.alpha = 0;
exercises.bg = bg;
stump.x = bg.width / 2;
stump.y = bg.height / 2;
bg.addChild(stump);
textLabel.x = -width / 2 + textMargin.marginLeft + (textMargin.maxWidth - textLabel.getBoundingBox().width) / 2; let textWidth = textLabel.getBoundingBox().width;
textLabel.y = -height / 2 + textMargin.marginTop + textLabel.getBoundingBox().height / 2;
stump.addChild(textLabel);
indexBg.x = -width / 2 + indexMargin.marginLeft; textLabel.x = textMargin.marginLeft + (textMargin.maxWidth - textWidth) / 2;
indexBg.y = -height / 2 + indexMargin.marginTop; textLabel.y = textMargin.marginTop + textLabel.height * this.scaleY / 2;
stump.addChild(indexBg); bg.addChild(textLabel);
indexBg.x = indexMargin.marginLeft;
indexBg.y = indexMargin.marginTop;
bg.addChild(indexBg);
} }
getIntervalHeight(){ getIntervalHeight() {
return this.intervalHeight; return this.intervalHeight;
} }
getIntervalWidth(){ getIntervalWidth() {
return this.intervalWidth; return this.intervalWidth;
} }
getContentBgWidth(){ getContentBgWidth() {
return this.contentBgWidth; return this.contentBgWidth;
} }
} }
\ No newline at end of file
...@@ -488,6 +488,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -488,6 +488,8 @@ export class PlayComponent implements OnInit, OnDestroy {
let exercises = this.data.exercisesArr[i]; let exercises = this.data.exercisesArr[i];
this.addUrlToAudioObj('exercises_' + i, exercises.audio_url); this.addUrlToAudioObj('exercises_' + i, exercises.audio_url);
this.addUrlToAudioObj('exercises_index_' + i, exercises.index_audio_url);
} }
} }
...@@ -577,7 +579,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -577,7 +579,8 @@ export class PlayComponent implements OnInit, OnDestroy {
let exercises = this.data.exercisesArr[i]; let exercises = this.data.exercisesArr[i];
let exercisesObj = new Exercises(exercises, this.images); let exercisesObj = new Exercises(exercises, this.images);
exercises.audio = this.audioObj['exercises_' + i]; exercisesObj.audio = this.audioObj['exercises_' + i];
exercisesObj.indexAudio = this.audioObj['exercises_index_' + i];
exercisesObj.scaleX = this.mapScale; exercisesObj.scaleX = this.mapScale;
exercisesObj.scaleY = this.mapScale; exercisesObj.scaleY = this.mapScale;
exercisesObj.init(this.skin, i); exercisesObj.init(this.skin, i);
...@@ -592,7 +595,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -592,7 +595,6 @@ export class PlayComponent implements OnInit, OnDestroy {
//背景固定宽度 //背景固定宽度
let bgWidth = this.skin.getContentBgWidth(); let bgWidth = this.skin.getContentBgWidth();
console.log(intervalHeight, intervalWidth, bgWidth);
//显示行 //显示行
let row = 0; let row = 0;
...@@ -750,21 +752,31 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -750,21 +752,31 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
for(let i = 0; i < this.exercisesArr.length; ++ i){ for (let i = 0; i < this.exercisesArr.length; ++i) {
let exercisesObj = this.exercisesArr[i]; let exercisesObj = this.exercisesArr[i];
if(this.checkClickTarget(exercisesObj.indexBg)){ if (this.checkClickTarget(exercisesObj.indexBg)) {
let flag = exercisesObj.checkRight(this.curAnswerIndex); let flag = exercisesObj.checkRight(this.curAnswerIndex);
if(flag){ if (flag) {
this.playAudio('right', true); this.playAudio('right', true, () => {
this.curAudio = exercisesObj.playAudio('I');
});
this.curAnswerIndex += 1; this.curAnswerIndex += 1;
return;
} }
else {
if (exercisesObj.indexShowed) {
this.curAudio = exercisesObj.playAudio('I');
}
}
return;
} }
if(this.checkClickTarget(exercisesObj.textLabel)){ if (this.checkClickTarget(exercisesObj.bg)) {
this.curAudio = exercisesObj.playAudio(); this.curAudio = exercisesObj.playAudio('T');
return; return;
} }
} }
......
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