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

完善

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