Commit 4a57f417 authored by Chen Jiping's avatar Chen Jiping

修复bug

parent e7037bdb
......@@ -43,17 +43,6 @@
<input type="text" nz-input placeholder="字母(组合)" [(ngModel)]="it.title_val" (blur)="saveItem()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.title_color">颜色</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-select [(ngModel)]="it.title_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()">
<nz-option nzValue="C01" nzLabel="绿色"></nz-option>
<nz-option nzValue="C02" nzLabel="红色"></nz-option>
<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>
<nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.title_audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
......@@ -83,7 +72,7 @@
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="12" nzOffset="3">
<nz-form-control [nzSpan]="15" nzOffset="3">
<div *ngFor="let it of wordArr; let i = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
<h5 style="width: 100%; line-height: 40px; text-align: center;"> 单词-{{i+1}}</h5>
......@@ -103,6 +92,12 @@
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="word_font_size">字体大小</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="it.word_font_size" [nzMin]="1" [nzStep]="1" (blur)="saveItem()"></nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="it.word_audio_url">单词字组(组合)</nz-form-label>
<nz-form-control [nzSpan]="6">
......@@ -120,6 +115,7 @@
<th>序号</th>
<th>字母(组合)</th>
<th>发音</th>
<th>颜色</th>
<th>操作</th>
</tr>
</thead>
......@@ -133,6 +129,14 @@
(audioUploaded)="onAudioUploadSuccessByItem($event, data, 'letter_audio_url')">
</app-audio-recorder>
</td>
<td>
<nz-select [(ngModel)]="data.letter_color" nzAllowClear nzPlaceHolder="Please select the color" (ngModelChange)="saveItem()">
<nz-option nzValue="C01" nzLabel="绿色"></nz-option>
<nz-option nzValue="C02" nzLabel="红色"></nz-option>
<nz-option nzValue="C03" nzLabel="巧克力色"></nz-option>
<nz-option nzValue="C04" nzLabel="黑色"></nz-option>
</nz-select>
</td>
<td>
<a (click)="deleteLetterItem(it.letters, j)">delete</a>
</td>
......
......@@ -149,6 +149,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return {
word_val: "",
word_audio_url: "",
word_font_size:110,
letters:[]
};
}
......@@ -156,7 +157,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
letterData(){
return {
letter_val:"",
letter_audio_url:""
letter_audio_url:"",
letter_color:"C04"
};
}
......@@ -186,8 +188,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
titleItem(){
return {
title_val:"",
title_audio_url:"",
title_color:"C04"
title_audio_url:""
}
}
......
......@@ -864,6 +864,84 @@ export class ShapeRect extends MySprite {
}
}
export class ShapeRectNew extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fill = true;
stroke = false;
lineWidth = 1;
setSize(w, h, r) {
this.width = w;
this.height = h;
this.radius = r;
}
setOutLine(color, lineWidth) {
this.stroke = true;
this.strokeColor = color;
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
const radius = this.radius;
ctx.save();
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
// 上边线
ctx.lineTo(width - radius, 0);
// 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
// 右边线
ctx.lineTo(width, height - radius);
ctx.closePath();
if (this.fill) {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class ShapeCircle extends MySprite {
......
......@@ -4,7 +4,8 @@ import {
Label,
MySprite,
tweenChange,
ShapeRect
ShapeRect,
ShapeRectNew
} from './Unit';
import {res, resAudio} from './resources';
......@@ -93,7 +94,9 @@ export class PlayComponent implements OnInit, OnDestroy {
interval_width = 200;
//间隔高度
interval_height = 150;
interval_height = 250;
all_words_loaded = false;
wordLoad :{[key:string]:{loaded : boolean;letters:{[key:string]:{loaded:boolean, letter:Label}}}} = {};
......@@ -131,7 +134,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.wordLoad[id].loaded = false;
}
console.log('wordLoad', this.wordLoad);
}
getWordLoaded(id: string):boolean{
......@@ -199,7 +202,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') {
this.data = data;
}
console.log('data:' , data);
// 初始化 各事件监听
this.initListener();
......@@ -383,7 +386,7 @@ export class PlayComponent implements OnInit, OnDestroy {
playAudio(key, now = false, callback = null) {
console.log('audio key', key);
const audio = this.audioObj[key];
if (audio) {
if (now) {
......@@ -459,6 +462,7 @@ export class PlayComponent implements OnInit, OnDestroy {
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
......@@ -469,8 +473,8 @@ export class PlayComponent implements OnInit, OnDestroy {
checkClickTarget(target) {
const rect = target.getBoundingBox();
console.log('rect', rect);
if (this.checkPointInRect(this.mx, this.my, rect)) {console.log('check', true);
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
}
return false;
......@@ -491,7 +495,7 @@ export class PlayComponent implements OnInit, OnDestroy {
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
console.log('add audio', key);
if(!key){
return;
}
......@@ -550,7 +554,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.titleArr = this.getDefaultTitleArr() ;
}
console.log('data', this.data);
}
getDefaultWordArr() {
......@@ -629,8 +633,25 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr = [];
this.title_arr = [];
this.word_arr = [];
//单词高度
this.word_height = 0;
//最大宽度
this.max_word_width = 100;
//间隔宽度
this.interval_width = 200;
//间隔高度
this.interval_height = 250;
this.all_words_loaded = false;
this.wordLoad = {};
}
......@@ -659,14 +680,14 @@ export class PlayComponent implements OnInit, OnDestroy {
const lesson_bg = new MySprite();
lesson_bg.init(this.images.get('lesson_bg'));
lesson_bg.x = lesson_bg.width/2 + 60;
lesson_bg.y = pic1.height/2;
lesson_bg.x = lesson_bg.width/2 + 70;
lesson_bg.y = 11 + lesson_bg.height/2;
this.renderArr.push(lesson_bg);
this.lesson_bg = lesson_bg;
//课程信息
const lesson = new Label();
lesson.text = this.data.lesson_val;
lesson.text = "Lesson " + this.data.lesson_val;
lesson.textAlign = 'center';
lesson.fontSize = 40;
lesson.fontName = 'BRLNSDB';
......@@ -677,11 +698,9 @@ export class PlayComponent implements OnInit, OnDestroy {
lesson_bg.addChild(lesson);
const title_bg = new MySprite();
title_bg.init(this.images.get('title_bg'));
title_bg.x = this.canvasWidth / 2;
title_bg.y = title_bg.height/2;
title_bg.setScaleXY(this.mapScale);
const title_bg = new ShapeRectNew();
title_bg.y = -24;
title_bg.fillColor = "#975833";
this.title_bg = title_bg;
this.renderArr.push(title_bg);
......@@ -694,8 +713,19 @@ export class PlayComponent implements OnInit, OnDestroy {
//初始化小手图片
const mousemove = new MySprite();
mousemove.init(this.images.get('mousemove'));
mousemove.x = mousemove.width/2;
//单词存在,默认第一个单词位置
if(this.word_arr[0]){
mousemove.x = this.word_arr[0].x + this.word_arr[0].width/2;
mousemove.y = this.word_arr[0].y + mousemove.height + this.word_arr[0].height/2;
}
else{
mousemove.x = mousemove.width;
mousemove.y = this.canvasHeight - mousemove.height;
}
this.mousemove_cur = mousemove;
......@@ -739,16 +769,14 @@ export class PlayComponent implements OnInit, OnDestroy {
//字母
let letter = word_content.letters[i];
let colorId = this.getColorId(letter.letter_val);
let letter_spr = new Label();
letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'center';
letter_spr.fontSize = 60;
letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr.fontName = 'MMTextBookBold';
letter_spr.fontColor = this.getColor(colorId);
letter_spr.fontColor = this.getColor(letter.letter_color);
//设置不显示
letter_spr.alpha=0;
letter_spr.visible = false;
letter_spr.refreshSize();
letter_spr_arr.push(letter_spr);
......@@ -855,7 +883,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let totalHeight = rows * this.word_height + (rows - 1) * this.interval_height;
//起始Y坐标
let startY = (this.canvasHeight - this.top_bg.height - totalHeight) / 2;
let startY = (this.canvasHeight - this.top_bg.height - totalHeight) / 2 + this.top_bg.height;
//单词最大宽度
let word_max_width = 0;
......@@ -918,8 +946,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
console.log('row_max_width', row_max_width);
//起始X坐标
let startX = (this.canvasWidth - row_max_width)/2;
......@@ -961,31 +987,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
/**
* 根据字母(组合)获取对应的颜色id
* @param letter 字母(组合)
*/
getColorId(letter){
//默认黑色
let colorId = "C04";
for(let i = 0; i < this.data.titleArr.length; ++ i){
let title = this.data.titleArr[i];
if(title && title.title_val.toLowerCase() == letter.toLowerCase()){
if(title.title_color && title.title_color != ""){
colorId = title.title_color;
}
break;
}
}
return colorId;
}
/**
* 根据颜色id获取对应的颜色
* @param colorId 颜色id
......@@ -1032,7 +1033,7 @@ export class PlayComponent implements OnInit, OnDestroy {
totalWidth += titleSp.width;
if(i < this.data.titleArr.length - 1){
totalWidth += 15;
totalWidth += 20;
}
}
}
......@@ -1043,17 +1044,23 @@ export class PlayComponent implements OnInit, OnDestroy {
title_bg_width = totalWidth + 100;
this.title_bg.scaleX=title_bg_width/this.title_bg.width;
//this.title_bg.scaleX=title_bg_width/this.title_bg.width;
}
this.title_bg.setSize(title_bg_width, 110, 24);
this.title_bg.x = (this.canvasWidth - title_bg_width)/ 2;
//重新设置字母(组合)的坐标
let titleStartX = (title_bg_width - totalWidth)/2 - title_bg_width/2;
let titleStartX = (title_bg_width - totalWidth)/2;
for(let i = 0; i < this.title_arr.length; ++ i){
let title = this.title_arr[i];
title.y = this.title_bg.height /2 + 12
title.x = titleStartX + title.width/2;
//父类拉伸后,子类不拉伸
......@@ -1062,7 +1069,7 @@ export class PlayComponent implements OnInit, OnDestroy {
titleStartX += title.width;
if(i < this.title_arr.length - 1){
titleStartX += 15;
titleStartX += 20;
}
this.title_bg.addChild(title);
......@@ -1075,8 +1082,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const title = new Label();
title.text = titleItem.title_val;
title.textAlign = 'center';
title.fontSize = 50;
title.fontName = 'BRLNSDB';
title.fontSize = 64;
title.fontName = 'GOTHICB';
title.fontColor = '#ffffff';
title.refreshSize();
......@@ -1098,6 +1105,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.mousedown_cur.visible = true;
if (this.checkClickTarget(this.lesson_bg)) {
this.mousedown_cur.x = this.mx + 18;
this.mousedown_cur.y = this.my + 18;
this.playAudio(this.data.lesson_audio_url);
return;
}
......@@ -1107,18 +1116,27 @@ export class PlayComponent implements OnInit, OnDestroy {
let title = this.title_arr[i];
if (this.checkClickTarget(title)) {
this.mousedown_cur.x = this.mx + 18;
this.mousedown_cur.y = this.my + 18;
this.playAudio(this.data.titleArr[i].title_audio_url);
return;
}
}
for(let i = 0; i < this.word_arr.length; ++ i){
//全部单词加载完成
let t_all_words_loaded = true;
for(let i = 0; i < this.word_arr.length; ++ i){
console.log('wordLoad', this.wordLoad);
//获取是否加载完成
let loaded = this.getWordLoaded(String(i));
console.log('word loaded', loaded);
//未加载,不触发音效,加载单词
if(!loaded){
this.mousedown_cur.x = this.word_arr[i].x + this.word_arr[i].width/2;
this.mousedown_cur.y = this.word_arr[i].y + this.mousedown_cur.height + this.word_arr[i].height/2;
let letters = this.getLetterSpriteFromWordLoaded(String(i));
for(let key in letters){
......@@ -1129,26 +1147,26 @@ export class PlayComponent implements OnInit, OnDestroy {
let letter_audio_url = this.data.wordArr[i].letters[key].letter_audio_url;
console.log('letter load', loaded);
//加载完成,跳过
if(loaded){
//检查是否点了该字母
if (this.checkClickTarget(letter_spr)) {
this.playAudio(letter_audio_url);
return;
}
continue;
}
//设置显示
letter_spr.visible = true;
//设置显示
letter_spr.alpha = 1;
//设置加载完成
letters[key].loaded = true;
//播放音效
this.playAudio(letter_audio_url);
......@@ -1156,33 +1174,49 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
break;
}
//如果未到最后一个单词,则鼠标下移到下一个单词位置
if(i != this.word_arr.length - 1 && !this.all_words_loaded){
this.mousemove_cur.x = this.word_arr[i + 1].x + this.word_arr[i + 1].width/2;
this.mousemove_cur.y = this.word_arr[i + 1].y + this.mousemove_cur.height + this.word_arr[i + 1].height/2;
}
//如果单词有一个未加载完成,则标识全部单词未加载完成
if(!this.wordLoad[i].loaded){
t_all_words_loaded = false;
}
}
//判断是否全部加载完成
if(t_all_words_loaded){
this.all_words_loaded = true;
}
for(let i = 0; i < this.word_arr.length; ++ i){
let word = this.word_arr[i];
if (this.checkClickTarget(word)) {
this.mousedown_cur.x = word.x + word.width/2;
this.mousedown_cur.y = word.y + this.mousedown_cur.height + word.height/2;
this.playAudio(this.data.wordArr[i].word_audio_url);
return;
}
}
}
mapMove(event) {
if(this.mousemove_cur){
this.mousemove_cur.x = this.mx + this.mousemove_cur.width/2 - 17;
this.mousemove_cur.y = this.my + this.mousemove_cur.height/2 - 17;
}
}
mapUp(event) {
this.mousemove_cur.x = this.mousedown_cur.x;
this.mousemove_cur.y = this.mousedown_cur.y;
this.mousemove_cur.visible = true;
this.mousedown_cur.visible = false;
......
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