Commit 54c7c94b authored by 邵世尧's avatar 邵世尧

提交

parent 3695f7ce
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "e7311e9d-af0d-4d41-a1ad-7a7b3902a73a"
}
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col nzOffset='4'>
<h1 nz-title>课程内容编辑</h1>
</div>
</div>
<div nz-form>
<nz-divider nzText="课程标题" nzOrientation="left"></nz-divider>
<nz-form-label nzFor="t_val1">标题1</nz-form-label>
<input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="item.title.t_val1" (blur)="save()">
<br><nz-form-label nzFor="t_val2">标题2</nz-form-label>
<input style="width: 80%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="item.title.t_val2" (blur)="save()">
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="item.title.audio_url" [audioUrl]="item.title.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, item.title,'audio_url')">
</app-audio-recorder>
</nz-form-control>
<nz-divider nzText="总音频" nzOrientation="left"></nz-divider>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="item.title.allmusic_audio" [audioUrl]="item.title.allmusic_audio"
(audioUploaded)="onAudioUploadSuccessByItem($event, item.title,'allmusic_audio')">
</app-audio-recorder>
</nz-form-control>
<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>
</div>
<div>
\ No newline at end of file <nz-divider nzText="句子" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="20" nzOffset="2">
<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>
<div nz-form>
<nz-form-item>
<nz-radio-group [(ngModel)]="it.left.num" (ngModelChange)="save()">
<label nz-radio nzValue="Y"></label>
<label nz-radio nzValue="N"></label>
</nz-radio-group>
<div *ngIf="it.num== 'Y'" style="width: 33%">
<nz-form-label nzFor="xuhao">序号</nz-form-label>
<input style="width: 20%; margin-bottom: 0.5vw" type="text" nz-input placeholder="" [(ngModel)]="it.xuhao" (blur)="saveItem()">
</div>
<div *ngIf="it.num== 'N'" style="width: 80%">
<br>
</div>
<nz-form-label [nzSpan]="3" nzFor="it.left.word_val">句子</nz-form-label>
<nz-form-control [nzSpan]="20">
<input type="text" nz-input placeholder="请录入句子" [(ngModel)]="it.left.word_val"
(blur)="saveWordItem(i,'left')">
</nz-form-control>
</nz-form-item>
<div style="width: 100%;">
<app-upload-image-with-preview id="it.left.word_pic_url"
[picUrl]="it.left.word_pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it.left,'word_pic_url')"
></app-upload-image-with-preview>
</div>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="it.audio_url">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="it.audio_url" [audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it,'audio_url')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<div nz-col [nzSpan]="15" nzOffset="2">
<nz-table [nzData]="it.left.letters" [nzHideOnSinglePage]="true" [nzBordered]="true">
<thead>
<tr>
<th>单词</th>
<th>颜色</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of it.left.letters;let j = index">
<td>{{data.letter_val}}</td>
<td>
<nz-select [(ngModel)]="data.letter_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>
</tr>
</tbody>
</nz-table>
</div>
</nz-form-item>
</div>
<button style="margin: 10px;" nz-button nzType="danger" (click)="deleteItem(i)">
<span>删除</span>
</button>
</div>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzSpan]="3" nzOffset="3" class="add-btn-box">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef} from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
...@@ -10,11 +11,13 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,11 +11,13 @@ 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-23";
// 储存对象 // 储存对象
item; item;
wordArr = [];
num
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
} }
...@@ -22,19 +25,39 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -22,19 +25,39 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
this.item.title = {
t_val1:"",
t_val2:"",
audio_url:"",
allmusic_audio:""
};
this.item.wordArr=[];
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
if (data) { if (data) {
console.log('~data:', data);
this.item = data; this.item = data;
} }
if ( !this.item.wordArr ) {
this.item.wordArr = [];
}
console.log('~data:', data);
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
console.log('~data:', data);
}, this.saveKey); }, this.saveKey);
...@@ -51,6 +74,23 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -51,6 +74,23 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
//标题
if(!this.item.title){
this.item.title = {
t_val1:"",
t_val2:"",
audio_url:"",
allmusic_audio:"",
};
}
if (this.item.wordArr) {
this.wordArr = this.item.wordArr;
} else {
this.wordArr = this.getDefaultWordArr();
this.item.wordArr = this.wordArr;
}
} }
...@@ -68,13 +108,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -68,13 +108,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, item, key) {
item[key] = e.url;
this.item[key] = e.url;
this.save(); this.save();
} }
onAudioUploadSuccessByItem(e, item, key) {
item[key] = e.url;
this.save();
}
onImageUploadSuccessByItem(e, item,key) {
item[key] = e.url;
this.save();
}
/** /**
* 储存数据 * 储存数据
...@@ -93,5 +140,93 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +140,93 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
deleteItem(index) {
if (index !== -1) {
this.wordArr.splice(index, 1);
}
// this.update.emit(this.item);
this.save();
}
addItem() {
if(this.wordArr.length<4){
let item = this.wordItemData();
this.wordArr.push(item);
}
this.saveItem();
/*暂时注销
let item = this.wordItemData();
this.wordArr.push(item);
this.saveItem();*/
}
// addLetterItem(letters){
// let letter = this.letterData();
// letters.push(letter);
// this.save();
// }
deleteLetterItem(letters, index){
console.log(letters);
if (index !== -1) {
letters.splice(index, 1);
}
this.save();
}
wordItemData() {
return {
left: {
word_val: '',
letters: [],
word_pic_url:'',
num:'Y',
},
audio_url: '',
};
}
// letterData() {
// return {
// letter_val: '',
// letter_color: 'C04',
// is_: false
// };
// }
saveWordItem(index,type) {
let val = this.wordArr[index][type].word_val.split(" ");
this.wordArr[index][type].letters = [];
for(let i=0;i<val.length;i++){
if(val[i]){
this.wordArr[index][type].letters.push({
letter_val: val[i],
letter_color: 'C04',
letter_font: 'BRLNSDB',
is_: '0'
});
}
}
this.save();
}
saveItem() {
this.save();
}
getDefaultWordArr() {
let arr = [];
return arr;
}
} }
...@@ -16,4 +16,14 @@ ...@@ -16,4 +16,14 @@
font-family: 'BRLNSDB'; font-family: 'BRLNSDB';
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: 'GOTHICB_1';
src: url("../../assets/font/GOTHICB_1.TTF") ;
}
\ 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 {res, resAudio} from './resources';
import {Subject} from 'rxjs';
import {debounceTime, ignoreElements} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { import {
Label, Label,
MySprite, tweenChange, MySprite, tweenChange, MyAnimation, randomSortByArr, ShapeRect, getMinScale, showPopParticle, moveItem, removeItemFromArr, rotateItem, showStar, showItem, alphaItem, endShow, hideItem,
} from './Unit'; } from './Unit';
import {res, resAudio} from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
...@@ -57,7 +61,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,7 +61,7 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'ym-23';
btnLeft; btnLeft;
...@@ -68,6 +72,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -68,6 +72,14 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true; canTouch = true;
curPic; curPic;
startBorder: MySprite;
juziBg: MySprite;
t1Bg: MySprite;
Btn
sBtn
juzi_bg: ShapeRect;
guide_bg: ShapeRect;
guide: MySprite;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -75,6 +87,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -75,6 +87,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
ngOnInit() { ngOnInit() {
this.data = {}; this.data = {};
...@@ -82,29 +95,61 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -82,29 +95,61 @@ export class PlayComponent implements OnInit, OnDestroy {
// 获取数据 // 获取数据
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;
} else {
this.data = {};
} }
// console.log('data:' , data);
// 初始化 各事件监听
this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData();
// 初始化 各事件监听
this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData();
// 初始化 音频资源 // 初始化 音频资源
this.initAudio(); this.initAudio();
// 初始化 图片资源 // 初始化 图片资源
this.initImg(); this.initImg();
console.log('data:' , this.data);
// 开始预加载资源 // 开始预加载资源
this.load(); this.load();
console.log('data:' , this.data);
// 加载完成播放音乐
this.playAudio("newpage");
}, this.saveKey); }, this.saveKey);
} }
ngOnDestroy() { ngOnDestroy() {
window['curCtx'] = null; window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId); window.cancelAnimationFrame(this.animationId);
...@@ -116,6 +161,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -116,6 +161,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 预加载资源 // 预加载资源
this.loadResources().then(() => { this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data); window["air"].hideAirClassLoading(this.saveKey, this.data);
this.init(); this.init();
this.update(); this.update();
}); });
...@@ -126,6 +172,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -126,6 +172,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initCtx(); this.initCtx();
this.initData(); this.initData();
this.initmusic();
this.initView(); this.initView();
} }
...@@ -431,21 +478,116 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -431,21 +478,116 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加默认数据 便于无数据时的展示 * 添加默认数据 便于无数据时的展示
*/ */
initDefaultData() { initDefaultData() {
if(!this.data.title){
this.data.title = this.getDefaultTitle();
}
if(!this.data.words){
this.data.words = "a_e";
}
if (!this.data.wordArr) {
this.data.wordArr = this.defaultWordArr();
}
if (!this.data) {
console.log("默认数据"+this.data);
this.data.title.allmusic_audio='assets/play/music/audio.mp3';
this.data.title.audio_url='assets/play/music/audio.mp3';
this.data.title.t_val1='C';
this.data.title.t_val2='lisiten,make a sentence.Then chant.';
this.data.wordArr[0].left.num="Y";
this.data.wordArr[0].left.word_pic_url="assets/play/bg.png";
this.data.wordArr[0].left.letters[0].letter_val='Sam';
this.data.wordArr[0].left.letters[1].letter_val='has';
this.data.wordArr[0].left.letters[2].letter_val='a';
this.data.wordArr[0].left.letters[3].letter_val='cap';
this.data.wordArr[0].left.letters[3].letter_color='BRLNSDB';
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
} }
} }
defaultWordArr(){
return [
{
left: {
num:"Y",
word_val: 'Sam has a cap',
word_audio_url: '',
letters: [
{letter_val: "Sam",letter_color: 'C04',is_: '0'},
{letter_val: "has",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "cap",letter_color: 'C04',is_: '0'}
]
}
},
{
left: {
num:"N",
word_val: 'He likes jam',
word_audio_url: '',
letters: [
{letter_val: "He",letter_color: 'C04',is_: '0'},
{letter_val: "likes",letter_color: 'C02',is_: '0'},
{letter_val: "jam",letter_color: 'C04',is_: '0'}
]
}
},
{
left: {
num:"Y",
word_val: 'Zap has a map',
word_audio_url: '',
letters: [
{letter_val: "Zap",letter_color: 'C04',is_: '0'},
{letter_val: "has",letter_color: 'C04',is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'},
{letter_val: "map",letter_color: 'C04',is_: '0'}
]
}
}
];
}
getDefaultTitle(){
return {
t_val1:'C',
t_val2:'Listen, make a sentence.Then chant.',
t_font_color:'#f2c558',
t_font:'BRLNSDB',
t_font_size:40
};
}
/** /**
* 添加预加载图片 * 添加预加载图片
*/ */
initImg() { initImg() {
const addPicUrl = (url) => {
if (url) {
this.rawImages.set(url, url);
}
};
for (let i = 0; i < this.data.wordArr.length; i++) {
this.addUrlToImages(this.data.pic_url); addPicUrl( this.data.wordArr[i].left.word_pic_url);
this.addUrlToImages(this.data.pic_url_2);
}
} }
...@@ -455,32 +597,53 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -455,32 +597,53 @@ export class PlayComponent implements OnInit, OnDestroy {
initAudio() { initAudio() {
// 音频资源 // 音频资源
this.addUrlToAudioObj(this.data.audio_url); this.addUrlToAudioObj(this.data.title.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2); this.addUrlToAudioObj(this.data.title.allmusic_audio);
for(let i=0;i<this.data.wordArr.length;i++){
this.addUrlToAudioObj(this.data.wordArr[i].audio_url);
}
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
} }
wordArr
/** /**
* 初始化数据 * 初始化数据
*/ */
initData() { initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
const sx = this.canvasWidth / this.canvasBaseW; const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH; const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy); const s = Math.min(sx, sy);
this.mapScale = s; this.mapScale = s;
// this.mapScale = sx; // this.mapScale = this.canvasWidth / this.canvasBaseW;
// this.mapScale = sy; // this.mapScale = this.canvasHeight / this.canvasBaseH;
this.canTouch = true;
if (!this.data.wordArr) {
this.data.picArr = [];
}
this.wordArr = this.data.wordArr;
this.renderArr = []; this.renderArr = [];
} }
...@@ -492,169 +655,701 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -492,169 +655,701 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initView() { initView() {
this.initBg();
this.initTitle();
this.initjuzi();
this.initPic(); this.initPic();
// this.initmusic();
// if(this.wordArr.length>4){
// this.gun();
// }
this.initBottomPart();
} // this.initPic();
initBottomPart() { // this.initBottomPart();
const btnLeft = new MySprite(); }
btnLeft.init(this.images.get('btn_left')); initmusic(){
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale; for(let i=0;i<this.data.wordArr.length+2;i++){
let musicArr=[];
if(i==0){
musicArr[0]=this.data.title.audio_url;
btnLeft.setScaleXY(this.mapScale); }
else if(i==1){
musicArr[1]=this.data.title.allmusic_audio;
this.renderArr.push(btnLeft); }
else{
musicArr[i]=this.data.wordArr[i-2].audio_url;
this.btnLeft = btnLeft; }
this.musicArr.push(musicArr[i]);
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);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
} }
musicArr = [];
initPic(){
for(let i=0;i<this.data.wordArr.length;i++){
let pic=new MySprite();
pic.init(this.images.get(this.data.wordArr[i].left.word_pic_url));
this.word_bg_groups[i].addChild(pic);
pic.visible=true;
if(pic.width>=pic.height||pic.width>500){
pic.setScaleXY(getMinScale(pic, 100));
}
if(pic.width<pic.height||pic.height>500){
pic.setScaleXY(getMinScale(pic, 120));
}
pic.x=this.juWidth[i]+100;
pic.y=20;
console.log("图片",pic.x);
}
}
getColor(colorId){
let color = "#000000";
switch(colorId){
case "C01":
color = "#008000";
break;
case "C02":
color = "#FF0000";
break;
case "C03":
color = "#D2691E";
break;
case "C04":
color = "#000000";
break;
}
initPic() { return color;
}
getUnitFontWidth(){
let spr = new Label();
spr.text = "w";
spr.textAlign = 'left';
spr.fontSize = 40;
spr.fontName = 'GOTHIC';
spr.refreshSize();
return spr.width;
}
number=0;
makeSentence(index,letters, position='middle') {
//单词
let word_bg = new ShapeRect();
word_bg.fillColor = '#fff' ;
let totalWidth = 0;
let tempWidth = 0;
let rowHeight = 0;
let rows = 1;
let rowGroup = [{
width: 0,
letterLabels: []
}];
let numWidth = 0;
for(let i = 0; i < letters.length; ++ i) {
//字母
let letter = letters[i];
if(i==0){
if(this.data.wordArr[index].left.num=='Y'){
// 加一个序号
let letter_num = new Label();
this.number++;
letter_num.text =this.number +".";
letter_num.textAlign = 'left';
// letter_num.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_num.fontSize = 40;
letter_num.fontName = 'GOTHICB_1';
letter_num.fontColor = this.getColor('#ffffff');
letter_num.refreshSize();
letter_num.x = tempWidth+5;
rowHeight = letter_num.height;
letter_num.y = rows*rowHeight-rowHeight/2;
rowGroup[rows-1].letterLabels.push(letter_num);
word_bg.addChild(letter_num);
}
numWidth = this.getUnitFontWidth()*2;
tempWidth += numWidth+10;
}
// console.log('letter:',letter) ;
let letter_spr = new Label();
letter_spr.ctx.fillStyle = "#000";
letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'left';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr.fontSize = 40;
letter_spr.fontName = 'GOTHICB';
letter_spr.fontColor = this.getColor(letter.letter_color);
letter_spr.refreshSize();
//设置坐标
letter_spr.x = tempWidth+5;
rowHeight = letter_spr.height;
letter_spr.y = rows*rowHeight-rowHeight/2;
tempWidth += letter_spr.width+10;
rowGroup[rows-1].letterLabels.push(letter_spr);
rowGroup[rows-1].width = tempWidth;
/* if(letter.is_=="1"){
//遇到换行
rows++;
if(tempWidth>totalWidth){
totalWidth = tempWidth+10;
}
tempWidth = 0;
rowGroup.push({
width: 0,
letterLabels: []
});
} */
if(i==letters.length-1){
if(tempWidth>totalWidth){
totalWidth = tempWidth;
}
}
word_bg.addChild(letter_spr);
}
//重新调整位置,使文字居中
for(let i=0;i<rowGroup.length;i++){
let group = rowGroup[i];
if(position=='middle'){
if(group.width<totalWidth){
let offset = (totalWidth-group.width)/2;
for(let j=0;j<group.letterLabels.length;j++){
let label = group.letterLabels[j];
label.x+=offset;
}
}
}else if(position=='left'){
let offset = numWidth+5;
if(i>0){
for(let j=0;j<group.letterLabels.length;j++){
let label = group.letterLabels[j];
label.x+=offset;
}
}
}
}
word_bg.setSize(totalWidth, rows*rowHeight);
this.juziWidth=tempWidth;
return word_bg;
}
juziWidth
word_bg_groups=[];
word_show_index;
juWidth=[];
initjuzi(){
this.word_bg_groups = [];
this.word_show_index = 0;
//句子个数
let wordNum = this.data.wordArr.length;
// console.log('line: ', line) ;
for (let i = 0; i < wordNum; i++) {
let letters = this.data.wordArr[i].left.letters;
this.word_bg_groups[i] = this.makeSentence(i, letters);
this.word_bg_groups[i].y =-240+140*i;
this.word_bg_groups[i].x = -540;
if(i<4){
//只显示第一个
this.word_bg_groups[i].visible = true;
}else{
this.word_bg_groups[i].visible =false;
}
this.juWidth[i]=this.juziWidth;
this.juziBg.addChild(this.word_bg_groups[i]);
}
}
title1
title2
initTitle(){
//小标题
console.log("title"+this.data);
this.title1 = new Label();
this.title1.text = this.data.title.t_val1;
this.title1.fontName = 'BRLNSDB';
this.title1.fontColor = '#ffdb84';
this.title1.fontSize = 55;
this.title1.textAlign = 'center';
this.title1.refreshSize();
this.t1Bg.addChild(this.title1);
this.title1.setMaxSize(52);
this.title1.x=-2;
this.title1.y=1;
//大标题
let bgRect = new ShapeRect();
bgRect.setSize(1000, 60);
bgRect.init();
bgRect.fillColor = '#ffdb84';
this.juziBg.addChild(bgRect);
bgRect.x=37;
bgRect.y=-333;
// this.startBorder.addChild(bgRect, -1);
this.title2 = new Label();
this.title2.text = this.data.title.t_val2;
this.title2.fontName = 'FUTURAB';
this.title2.fontColor = '#040404';
this.title2.fontSize = 30;
this.title2.textAlign = 'left';
this.title2.refreshSize();
bgRect.addChild(this.title2);
this.title2.setMaxSize(1000);
this.title2.x = -514;
this.title2.y = 0;
this.bgRect=bgRect;
}
bgRect
tBtn
initBg(){
//背景
this.startBorder = new MySprite();
this.startBorder.init(this.images.get('bg'));
this.startBorder.x = this.canvasWidth / 2 ;
this.startBorder.y = this.canvasHeight / 2 ;
const sx = this.canvasWidth / this.startBorder.width;
const sy = this.canvasHeight / this.startBorder.height;
const s=Math.max(sx,sy);
console.log(s+"s");
this.startBorder.setScaleXY(s);
this.renderArr.push(this.startBorder);
//标题一背景块
this.t1Bg=new MySprite();
this.t1Bg.init(this.images.get('title1'));
this.t1Bg.setScaleXY(this.mapScale/1.6);
//句子背景
this.juziBg=new MySprite();
this.juziBg.init(this.images.get('juzi'));
// this.juziBg.x = this.canvasWidth / 2.8;
// this.juziBg.y = this.canvasHeight / 2 ;
const jx =sx/1.8 ;
const jy = sy/1.8;
const j=Math.min(jx,jy);
console.log(j+"s");
this.juziBg.setScaleXY(j);
this.juziBg.x=-100;
this.juziBg.y=20;
this.startBorder.addChild(this.juziBg);
// this.juziBg.y=-2;
this.juziBg.addChild(this.t1Bg);
this.t1Bg.x=-510;
this.t1Bg.y=-340;
//句子方块
this.juzi_bg = new ShapeRect();
this.juzi_bg.fillColor = '#ffffff' ;
this.juzi_bg.setSize(1060, 570);
this.juzi_bg.x=-550;
this.juzi_bg.y=-289;
this.juziBg.addChild(this.juzi_bg);
//按钮
this.Btn=new MySprite();
this.tBtn=new MySprite();
this.sBtn=new MySprite();
this.tBtn.init(this.images.get('stop'));
this.sBtn.init(this.images.get('start'));
this.Btn.addChild(this.sBtn);
this.Btn.addChild(this.tBtn);
this.juziBg.addChild(this.Btn);
this.sBtn.setScaleXY(this.mapScale);
this.tBtn.setScaleXY(this.mapScale);
this.Btn.x=650;
this.Btn.y=240;
// this.tBtn.x= this.sBtn.x;
// this.tBtn.y=this.sBtn.y;
this.tBtn.alpha=0;
this.bs=1;
if(this.data.wordArr.length>4){
//加滚动条
this.guide_bg = new ShapeRect();
this.guide_bg.fillColor = '#ffffff' ;
this.guide_bg.setSize(30, 470);
this.juziBg.addChild(this.guide_bg);
let guideBg=new MySprite();
guideBg.init(this.images.get('dhBg'));
this.guide=new MySprite();
this.guide.init(this.images.get('dh'));
this.guide_bg.addChild(guideBg);
this.guide_bg.x=550;
this.guide_bg.y=-250;
guideBg.addChild(this.guide);
if(this.data.wordArr.length<6){
guideBg.setScaleXY(this.mapScale/1.3);
this.guide.setScaleXY(this.mapScale/1.3);
const maxW = this.canvasWidth * 0.7; }
if(this.data.wordArr.length>=6){
guideBg.setScaleXY(this.mapScale/1.3);
this.guide.setScaleXY(this.mapScale/4);
const pic1 = new MySprite(); }
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2; guideBg.x=15;
pic1.setScaleXY(maxW / pic1.width); guideBg.y=230;
this.guide.y=-89;
this.guide.x=0;
this.renderArr.push(pic1); }
this.pic1 = pic1; }
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
bs
countc=0;
start=0;
mapDown(event) {
if (!this.canTouch) {
return;
}
if (this.checkClickTarget(this.sBtn) &&this.bs==1) {//播放键
this.sBtn.alpha=0;
this.tBtn.alpha=1;
this.bs=0;
//播放所有音乐
const audio1 = this.audioObj[this.musicArr[0]];
audio1.pause();
audio1.currentTime = 0;
if(this.firstjuzi==1){
console.log("上一次点的"+this.x);
const audio1 = this.audioObj[this.musicArr[this.x]];
audio1.pause();
audio1.currentTime = 0;
}
console.log( "pic-audio"+this.musicArr[1]);
this.playAudio(this.musicArr[1]);
this.start=1;
return;
}
if (this.checkClickTarget(this.bgRect)) {//标题音
if(this.start==1){
//跳转暂停
this.sBtn.alpha=1;
this.tBtn.alpha=0;
this.start=0;
const audio1 = this.audioObj[this.musicArr[1]];
audio1.pause();
audio1.currentTime = 0;
}
if(this.firstjuzi==1){
console.log("上一次点的"+this.x);
const audio1 = this.audioObj[this.musicArr[this.x]];
audio1.pause();
audio1.currentTime = 0;
}
this.playAudio(this.musicArr[0]);
return;
}
const pic2 = new MySprite(); if (this.checkClickTarget(this.tBtn)&&this.bs==0) {//暂停键
pic2.init(this.images.get(this.data.pic_url_2)); this.sBtn.alpha=1;
pic2.x = this.canvasWidth / 2 + this.canvasWidth; this.tBtn.alpha=0;
pic2.y = this.canvasHeight / 2; this.bs=1;
pic2.setScaleXY(maxW / pic2.width); /*
const audio = this.audioObj[this.musicArr[1]];
audio.pause();
audio.currentTime = 0;*/
this.pauseAudio(this.musicArr[1]);
this.renderArr.push(pic2); console.log("结束");
this.pic2 = pic2;
this.curPic = pic1; return;
} }
btnLeftClicked() {
for(let i=0;i<this.data.wordArr.length;i++){//句子音
if ( this.checkClickTarget(this.word_bg_groups[i]) ) {
this.firstjuzi=1;
this.countc++;
if(this.start==1){
//跳转暂停
this.sBtn.alpha=1;
this.tBtn.alpha=0;
this.start=0;
const audio1 = this.audioObj[this.musicArr[1]];
audio1.pause();
audio1.currentTime = 0;
}
console.log("contc"+this.countc);
console.log("第一次");
const audio1 = this.audioObj[this.musicArr[0]];
audio1.pause();
audio1.currentTime = 0;
const audio2 = this.audioObj[this.musicArr[1]];
audio2.pause();
audio2.currentTime = 0;
if(this.countc==1){
}
else{
console.log("this.x"+this.x);
const audio = this.audioObj[this.musicArr[this.x]];
audio.pause();
audio.currentTime = 0;
}
this.playAudio(this.musicArr[i+2]);
this.x=i+2;
console.log("能点击"+this.data.wordArr[i].audio_url);
this.canTouch = true;
return;
}
}
this.lastPage(); /*
} if(this.checkClickTarget(this.juzi_bg)){
//滚动区域
this.shapePosY = event.clientY;
}
*/
btnRightClicked() {
this.nextPage();
} }
//音乐暂停
pauseAudio(key, callback = null){
lastPage() { const audio = this.audioObj[key];
if (audio) {
if (this.curPic == this.pic1) { if (callback) {
return; audio.onended = () => {
callback();
};
}
audio.pause();
} }
}
x
firstjuzi=0;
this.canTouch = false; mapMove(event) {
const moveLen = this.canvasWidth; /* if(this.checkClickTarget(this.juzi_bg)&&this.shapePosY&&this.word_left_scoll.visible){
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1); let y = event.clientY;
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
}
nextPage() { let startY = this.ls_title.y+this.ls_title.height; //文字区域的原始Y值
let bodyBox = this.word_left_shape_body;
let bodyY = bodyBox.y;
let bodyH = bodyBox.height;
//句子可见高度570/整个屏幕高度
let sx = this.bodySeeHeight/this.canvasHeight;
//鼠标点击拖动量
let step = (y-this.shapePosY)*sx;
if(step>0&&bodyY+step>=startY){
//说明到顶了,不能再拉了
this.word_left_shape_body.y = startY;
this.word_left_scoll_y_block.y = 1;
return;
}
//往上滑判断是否到底
if(step<0&&startY-(bodyH-this.bodySeeHeight)>=bodyY){
//说明到底了,不能再拉了
this.word_left_shape_body.y = startY-(bodyH-this.bodySeeHeight);
this.word_left_scoll_y_block.y = this.bodySeeHeight-this.word_left_scoll_y_block.height+1;
return;
}
this.word_left_shape_body.y = bodyY+step;
//控制滑块
let sc = this.bodySeeHeight/bodyH;
let position_y = (startY-this.word_left_shape_body.y)*sc;
if(position_y<1){
position_y = 1;
}else if(position_y>this.bodySeeHeight-this.word_left_scoll_y_block.height){
position_y = this.bodySeeHeight-this.word_left_scoll_y_block.height+1;
}
this.word_left_scoll_y_block.y = position_y;
} */
if (this.curPic == this.pic2) {
return;
}
this.canTouch = false;
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;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
}
mapDown(event) {
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
}
mapMove(event) {
if ( this.checkClickTarget(this.guide_bg) ) {
let y=event.clientY;
let i=9;
if(y<=317&&i<6){
this.guide.y=y-225;
}
if(i>=6&&y<530){
this.guide.y=y-330;
}
for (let i = 0; i < this.data.wordArr.length; i++) {
let x=9;
if(x<6){
this.word_bg_groups[i].y =-250+140*i+(y-25);
}
else{
//-250+140*i-y-1000
this.word_bg_groups[i].y =-250+140*i-y+120;
}
if(this.word_bg_groups[i].y<-300){
this.word_bg_groups[i].visible=false;
}
if(this.word_bg_groups[i].y>=-300&&this.word_bg_groups[i].y<200){
this.word_bg_groups[i].visible=true;
}
if(this.word_bg_groups[i].y>200){
this.word_bg_groups[i].visible=false;
}
}
return;
}
} }
mapUp(event) { mapUp(event) {
}
}
update() { update() {
......
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['bg', "assets/play/bg.png"],
['btn_left', "assets/play/btn_left.png"], ['title1', "assets/play/Rectangle 3.png"],
['btn_right', "assets/play/btn_right.png"], ['juzi', "assets/play/Rectangle 2.png"],
// ['text_bg', "assets/play/text_bg.png"], ['stop', "assets/play/暂停键.png"],
['start', "assets/play/播放按钮.png"],
['dhBg', "assets/play/dhbg.png"],
['dh', "assets/play/dh.png"],
// ['text_bg', "assets/play/text_bg.png"],
]; ];
...@@ -11,7 +19,9 @@ const res = [ ...@@ -11,7 +19,9 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['audio', "assets/play/music/audio.mp3"],
['click', "assets/play/music/click.mp3"],
]; ];
......
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