Commit af450371 authored by limingzhe's avatar limingzhe

style: 格式化

parent c4f68981
...@@ -6,19 +6,25 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -6,19 +6,25 @@ import TWEEN from '@tweenjs/tween.js';
import { import {
Label, Label,
MySprite, tweenChange, MyAnimation, randomSortByArr, ShapeRect, getMinScale, showPopParticle, moveItem, removeItemFromArr, rotateItem, showStar, showItem, alphaItem, endShow, hideItem, MySprite,
tweenChange,
MyAnimation,
randomSortByArr,
ShapeRect,
getMinScale,
showPopParticle,
moveItem,
removeItemFromArr,
rotateItem,
showStar,
showItem,
alphaItem,
endShow,
hideItem,
} from './Unit'; } from './Unit';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
...@@ -26,8 +32,8 @@ import { ...@@ -26,8 +32,8 @@ import {
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef; @ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef; @ViewChild('wrap', {static: true}) wrap: ElementRef;
// 数据 // 数据
data; data;
...@@ -80,67 +86,67 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -80,67 +86,67 @@ export class PlayComponent implements OnInit, OnDestroy {
juzi_bg: ShapeRect; juzi_bg: ShapeRect;
guide_bg: ShapeRect; guide_bg: ShapeRect;
guide: MySprite; guide: MySprite;
wordArr
musicArr = [];
number = 0;
juziWidth
word_bg_groups = [];
word_show_index;
juWidth = [];
title1
title2
bgRect
tBtn
bs
countc = 0;
start = 0;
x
firstjuzi = 0;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
ngOnInit() { ngOnInit() {
this.data = {}; this.data = {};
// 获取数据 // 获取数据
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 { } else {
this.data = {}; this.data = {};
} }
// 初始化 各事件监听
this.initListener();
// 初始化 各事件监听
this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示 // 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData(); this.initDefaultData();
// 初始化 音频资源 // 初始化 音频资源
this.initAudio(); this.initAudio();
// 初始化 图片资源 // 初始化 图片资源
this.initImg(); this.initImg();
console.log('data:' , this.data); console.log('data:', this.data);
// 开始预加载资源 // 开始预加载资源
this.load(); this.load();
console.log('data:' , this.data); console.log('data:', this.data);
// 加载完成播放音乐 // 加载完成播放音乐
this.playAudio("newpage"); this.playAudio("newpage");
...@@ -149,25 +155,25 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -149,25 +155,25 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
ngOnDestroy() { ngOnDestroy() {
window['curCtx'] = null; window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId); window.cancelAnimationFrame(this.animationId);
} }
// ======================================================编写区域==========================================================================
load() { load() {
// 预加载资源 // 预加载资源
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();
}); });
} }
init() { init() {
this.initCtx(); this.initCtx();
...@@ -190,11 +196,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -190,11 +196,6 @@ export class PlayComponent implements OnInit, OnDestroy {
window['curCtx'] = this.ctx; window['curCtx'] = this.ctx;
} }
updateItem(item) { updateItem(item) {
if (item) { if (item) {
item.update(); item.update();
...@@ -210,12 +211,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -210,12 +211,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
initListener() { initListener() {
this.winResizeEventStream this.winResizeEventStream
...@@ -316,7 +311,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -316,7 +311,6 @@ export class PlayComponent implements OnInit, OnDestroy {
addTouchListener(); addTouchListener();
} }
playAudio(key, now = false, callback = null) { playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key]; const audio = this.audioObj[key];
...@@ -335,8 +329,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -335,8 +329,6 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
loadResources() { loadResources() {
const pr = []; const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片 this.rawImages.forEach((value, key) => {// 预加载图片
...@@ -387,17 +379,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -387,17 +379,12 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
} }
renderAfterResize() { renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init(); this.init();
} }
checkClickTarget(target) { checkClickTarget(target) {
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
...@@ -430,10 +417,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -430,10 +417,6 @@ export class PlayComponent implements OnInit, OnDestroy {
return false; return false;
} }
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) { addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj; const audioObj = this.audioObj;
...@@ -463,130 +446,110 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -463,130 +446,110 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url); this.rawImages.set(url, url);
} }
// ======================================================编写区域==========================================================================
/** /**
* 添加默认数据 便于无数据时的展示 * 添加默认数据 便于无数据时的展示
*/ */
initDefaultData() { initDefaultData() {
if(!this.data.title){
this.data.title = this.getDefaultTitle(); if (!this.data.title) {
} this.data.title = this.getDefaultTitle();
}
if(!this.data.words){
this.data.words = "a_e"; if (!this.data.words) {
} this.data.words = "a_e";
if (!this.data.wordArr) { }
this.data.wordArr = this.defaultWordArr(); if (!this.data.wordArr) {
} this.data.wordArr = this.defaultWordArr();
}
if (!this.data) { if (!this.data) {
console.log("默认数据"+this.data); console.log("默认数据" + this.data);
this.data.title.allmusic_audio='assets/play/music/audio.mp3'; this.data.title.allmusic_audio = 'assets/play/music/audio.mp3';
this.data.title.audio_url='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_val1 = 'C';
this.data.title.t_val2='lisiten,make a sentence.Then chant.'; this.data.title.t_val2 = 'lisiten,make a sentence.Then chant.';
this.data.wordArr[0].left.num="Y"; this.data.wordArr[0].left.num = "Y";
this.data.wordArr[0].left.word_pic_url="assets/play/bg.png"; 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[0].letter_val = 'Sam';
this.data.wordArr[0].left.letters[1].letter_val='has'; 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[2].letter_val = 'a';
this.data.wordArr[0].left.letters[3].letter_val='cap'; this.data.wordArr[0].left.letters[3].letter_val = 'cap';
this.data.wordArr[0].left.letters[3].letter_color='BRLNSDB'; this.data.wordArr[0].left.letters[3].letter_color = 'BRLNSDB';
} }
} }
defaultWordArr(){ defaultWordArr() {
return [ return [
{ {
left: { left: {
num:"Y", num: "Y",
word_val: 'Sam has a cap', word_val: 'Sam has a cap',
word_audio_url: '', word_audio_url: '',
letters: [ letters: [
{letter_val: "Sam",letter_color: 'C04',is_: '0'}, {letter_val: "Sam", letter_color: 'C04', is_: '0'},
{letter_val: "has",letter_color: 'C04',is_: '0'}, {letter_val: "has", letter_color: 'C04', is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'}, {letter_val: "a", letter_color: 'C02', is_: '0'},
{letter_val: "cap",letter_color: 'C04',is_: '0'} {letter_val: "cap", letter_color: 'C04', is_: '0'}
] ]
} }
}, },
{ {
left: { left: {
num:"N", num: "N",
word_val: 'He likes jam', word_val: 'He likes jam',
word_audio_url: '', word_audio_url: '',
letters: [ letters: [
{letter_val: "He",letter_color: 'C04',is_: '0'}, {letter_val: "He", letter_color: 'C04', is_: '0'},
{letter_val: "likes",letter_color: 'C02',is_: '0'}, {letter_val: "likes", letter_color: 'C02', is_: '0'},
{letter_val: "jam",letter_color: 'C04',is_: '0'} {letter_val: "jam", letter_color: 'C04', is_: '0'}
] ]
} }
}, },
{ {
left: { left: {
num:"Y", num: "Y",
word_val: 'Zap has a map', word_val: 'Zap has a map',
word_audio_url: '', word_audio_url: '',
letters: [ letters: [
{letter_val: "Zap",letter_color: 'C04',is_: '0'}, {letter_val: "Zap", letter_color: 'C04', is_: '0'},
{letter_val: "has",letter_color: 'C04',is_: '0'}, {letter_val: "has", letter_color: 'C04', is_: '0'},
{letter_val: "a",letter_color: 'C02',is_: '0'}, {letter_val: "a", letter_color: 'C02', is_: '0'},
{letter_val: "map",letter_color: 'C04',is_: '0'} {letter_val: "map", letter_color: 'C04', is_: '0'}
] ]
} }
} }
]; ];
} }
getDefaultTitle(){ getDefaultTitle() {
return { return {
t_val1:'C', t_val1: 'C',
t_val2:'Listen, make a sentence.Then chant.', t_val2: 'Listen, make a sentence.Then chant.',
t_font_color:'#f2c558', t_font_color: '#f2c558',
t_font:'BRLNSDB', t_font: 'BRLNSDB',
t_font_size:40 t_font_size: 40
}; };
} }
/** /**
* 添加预加载图片 * 添加预加载图片
*/ */
initImg() { initImg() {
const addPicUrl = (url) => { const addPicUrl = (url) => {
if (url) { if (url) {
this.rawImages.set(url, url); this.rawImages.set(url, url);
} }
}; };
for (let i = 0; i < this.data.wordArr.length; i++) { for (let i = 0; i < this.data.wordArr.length; i++) {
addPicUrl( this.data.wordArr[i].left.word_pic_url); addPicUrl(this.data.wordArr[i].left.word_pic_url);
} }
} }
...@@ -599,18 +562,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -599,18 +562,16 @@ export class PlayComponent implements OnInit, OnDestroy {
// 音频资源 // 音频资源
this.addUrlToAudioObj(this.data.title.audio_url); this.addUrlToAudioObj(this.data.title.audio_url);
this.addUrlToAudioObj(this.data.title.allmusic_audio); this.addUrlToAudioObj(this.data.title.allmusic_audio);
for(let i=0;i<this.data.wordArr.length;i++){ for (let i = 0; i < this.data.wordArr.length; i++) {
this.addUrlToAudioObj(this.data.wordArr[i].audio_url); 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
/** /**
* 初始化数据 * 初始化数据
*/ */
...@@ -630,9 +591,8 @@ wordArr ...@@ -630,9 +591,8 @@ wordArr
// this.mapScale = this.canvasWidth / this.canvasBaseW; // this.mapScale = this.canvasWidth / this.canvasBaseW;
// this.mapScale = this.canvasHeight / this.canvasBaseH; // this.mapScale = this.canvasHeight / this.canvasBaseH;
this.canTouch = true; this.canTouch = true;
...@@ -642,14 +602,9 @@ wordArr ...@@ -642,14 +602,9 @@ wordArr
this.wordArr = this.data.wordArr; this.wordArr = this.data.wordArr;
this.renderArr = []; this.renderArr = [];
} }
/** /**
* 初始化试图 * 初始化试图
*/ */
...@@ -659,72 +614,68 @@ wordArr ...@@ -659,72 +614,68 @@ wordArr
this.initTitle(); this.initTitle();
this.initjuzi(); this.initjuzi();
this.initPic(); this.initPic();
// this.initmusic(); // this.initmusic();
// if(this.wordArr.length>4){ // if(this.wordArr.length>4){
// this.gun(); // this.gun();
// } // }
// this.initPic(); // this.initPic();
// this.initBottomPart(); // this.initBottomPart();
} }
initmusic(){
for(let i=0;i<this.data.wordArr.length+2;i++){
let musicArr=[];
if(i==0){
musicArr[0]=this.data.title.audio_url;
} initmusic() {
else if(i==1){
musicArr[1]=this.data.title.allmusic_audio; for (let i = 0; i < this.data.wordArr.length + 2; i++) {
let musicArr = [];
if (i == 0) {
musicArr[0] = this.data.title.audio_url;
}
else{ } else if (i == 1) {
musicArr[i]=this.data.wordArr[i-2].audio_url; musicArr[1] = this.data.title.allmusic_audio;
} else {
musicArr[i] = this.data.wordArr[i - 2].audio_url;
} }
this.musicArr.push(musicArr[i]);
this.musicArr.push(musicArr[i]);
} }
} }
musicArr = []; initPic() {
initPic(){ for (let i = 0; i < this.data.wordArr.length; i++) {
for(let i=0;i<this.data.wordArr.length;i++){ let pic = new MySprite();
let pic=new MySprite();
pic.init(this.images.get(this.data.wordArr[i].left.word_pic_url)); pic.init(this.images.get(this.data.wordArr[i].left.word_pic_url));
this.word_bg_groups[i].addChild(pic); this.word_bg_groups[i].addChild(pic);
pic.visible=true; pic.visible = true;
if(pic.width>=pic.height||pic.width>500){ if (pic.width >= pic.height || pic.width > 500) {
pic.setScaleXY(getMinScale(pic, 100)); pic.setScaleXY(getMinScale(pic, 100));
} }
if(pic.width<pic.height||pic.height>500){ if (pic.width < pic.height || pic.height > 500) {
pic.setScaleXY(getMinScale(pic, 120)); pic.setScaleXY(getMinScale(pic, 120));
} }
pic.x=this.juWidth[i]+100; pic.x = this.juWidth[i] + 100;
pic.y=20; pic.y = 20;
console.log("图片",pic.x); console.log("图片", pic.x);
} }
} }
getColor(colorId){
getColor(colorId) {
let color = "#000000"; let color = "#000000";
switch(colorId){ switch (colorId) {
case "C01": case "C01":
color = "#008000"; color = "#008000";
break; break;
...@@ -741,166 +692,162 @@ wordArr ...@@ -741,166 +692,162 @@ wordArr
return color; return color;
} }
getUnitFontWidth(){
let spr = new Label(); getUnitFontWidth() {
spr.text = "w"; let spr = new Label();
spr.textAlign = 'left'; spr.text = "w";
spr.fontSize = 40; spr.textAlign = 'left';
spr.fontName = 'GOTHIC'; spr.fontSize = 40;
spr.refreshSize(); spr.fontName = 'GOTHIC';
spr.refreshSize();
return spr.width; return spr.width;
} }
number=0;
makeSentence(index,letters, position='middle') { makeSentence(index, letters, position = 'middle') {
//单词 //单词
let word_bg = new ShapeRect(); let word_bg = new ShapeRect();
word_bg.fillColor = '#fff' ; word_bg.fillColor = '#fff';
let totalWidth = 0; let totalWidth = 0;
let tempWidth = 0; let tempWidth = 0;
let rowHeight = 0; let rowHeight = 0;
let rows = 1; let rows = 1;
let rowGroup = [{ let rowGroup = [{
width: 0, width: 0,
letterLabels: [] letterLabels: []
}]; }];
let numWidth = 0; let numWidth = 0;
for(let i = 0; i < letters.length; ++ i) { for (let i = 0; i < letters.length; ++i) {
//字母 //字母
let letter = letters[i]; let letter = letters[i];
if(i==0){ if (i == 0) {
if(this.data.wordArr[index].left.num=='Y'){ if (this.data.wordArr[index].left.num == 'Y') {
// 加一个序号 // 加一个序号
let letter_num = new Label(); let letter_num = new Label();
this.number++; this.number++;
letter_num.text =this.number +"."; letter_num.text = this.number + ".";
letter_num.textAlign = 'left'; letter_num.textAlign = 'left';
// letter_num.fontSize = word_content.word_font_size ? word_content.word_font_size : 110; // letter_num.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_num.fontSize = 40; letter_num.fontSize = 40;
letter_num.fontName = 'GOTHICB_1'; letter_num.fontName = 'GOTHICB_1';
letter_num.fontColor = this.getColor('#ffffff'); letter_num.fontColor = this.getColor('#ffffff');
letter_num.refreshSize(); letter_num.refreshSize();
letter_num.x = tempWidth+5; letter_num.x = tempWidth + 5;
rowHeight = letter_num.height; rowHeight = letter_num.height;
letter_num.y = rows*rowHeight-rowHeight/2; letter_num.y = rows * rowHeight - rowHeight / 2;
rowGroup[rows-1].letterLabels.push(letter_num); rowGroup[rows - 1].letterLabels.push(letter_num);
word_bg.addChild(letter_num); word_bg.addChild(letter_num);
} }
numWidth = this.getUnitFontWidth()*2; numWidth = this.getUnitFontWidth() * 2;
tempWidth += numWidth+10; tempWidth += numWidth + 10;
} }
// console.log('letter:',letter) ; // console.log('letter:',letter) ;
let letter_spr = new Label(); let letter_spr = new Label();
letter_spr.ctx.fillStyle = "#000"; letter_spr.ctx.fillStyle = "#000";
letter_spr.text = letter.letter_val; letter_spr.text = letter.letter_val;
letter_spr.textAlign = 'left'; letter_spr.textAlign = 'left';
// letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110; // letter_spr.fontSize = word_content.word_font_size ? word_content.word_font_size : 110;
letter_spr.fontSize = 40; letter_spr.fontSize = 40;
letter_spr.fontName = 'GOTHICB'; letter_spr.fontName = 'GOTHICB';
letter_spr.fontColor = this.getColor(letter.letter_color); letter_spr.fontColor = this.getColor(letter.letter_color);
letter_spr.refreshSize(); letter_spr.refreshSize();
//设置坐标 //设置坐标
letter_spr.x = tempWidth+5; letter_spr.x = tempWidth + 5;
rowHeight = letter_spr.height; rowHeight = letter_spr.height;
letter_spr.y = rows*rowHeight-rowHeight/2; letter_spr.y = rows * rowHeight - rowHeight / 2;
tempWidth += letter_spr.width+10; tempWidth += letter_spr.width + 10;
rowGroup[rows-1].letterLabels.push(letter_spr); rowGroup[rows - 1].letterLabels.push(letter_spr);
rowGroup[rows-1].width = tempWidth; rowGroup[rows - 1].width = tempWidth;
/* if(letter.is_=="1"){ /* if(letter.is_=="1"){
//遇到换行 //遇到换行
rows++; rows++;
if(tempWidth>totalWidth){ if(tempWidth>totalWidth){
totalWidth = tempWidth+10; totalWidth = tempWidth+10;
} }
tempWidth = 0; tempWidth = 0;
rowGroup.push({ rowGroup.push({
width: 0, width: 0,
letterLabels: [] letterLabels: []
}); });
} */ } */
if (i == letters.length - 1) {
if(i==letters.length-1){ if (tempWidth > totalWidth) {
if(tempWidth>totalWidth){
totalWidth = tempWidth; totalWidth = tempWidth;
} }
} }
word_bg.addChild(letter_spr); word_bg.addChild(letter_spr);
} }
//重新调整位置,使文字居中 //重新调整位置,使文字居中
for(let i=0;i<rowGroup.length;i++){ for (let i = 0; i < rowGroup.length; i++) {
let group = rowGroup[i]; let group = rowGroup[i];
if(position=='middle'){ if (position == 'middle') {
if(group.width<totalWidth){ if (group.width < totalWidth) {
let offset = (totalWidth-group.width)/2; let offset = (totalWidth - group.width) / 2;
for(let j=0;j<group.letterLabels.length;j++){ for (let j = 0; j < group.letterLabels.length; j++) {
let label = group.letterLabels[j]; let label = group.letterLabels[j];
label.x+=offset; label.x += offset;
} }
} }
}else if(position=='left'){ } else if (position == 'left') {
let offset = numWidth+5; let offset = numWidth + 5;
if(i>0){ if (i > 0) {
for(let j=0;j<group.letterLabels.length;j++){ for (let j = 0; j < group.letterLabels.length; j++) {
let label = group.letterLabels[j]; let label = group.letterLabels[j];
label.x+=offset; label.x += offset;
} }
} }
} }
} }
word_bg.setSize(totalWidth, rows*rowHeight); word_bg.setSize(totalWidth, rows * rowHeight);
this.juziWidth=tempWidth; this.juziWidth = tempWidth;
return word_bg; return word_bg;
} }
juziWidth
word_bg_groups=[]; initjuzi() {
word_show_index;
juWidth=[];
initjuzi(){
this.word_bg_groups = []; this.word_bg_groups = [];
this.word_show_index = 0; this.word_show_index = 0;
//句子个数 //句子个数
let wordNum = this.data.wordArr.length; let wordNum = this.data.wordArr.length;
// console.log('line: ', line) ; // console.log('line: ', line) ;
for (let i = 0; i < wordNum; i++) { for (let i = 0; i < wordNum; i++) {
let letters = this.data.wordArr[i].left.letters; let letters = this.data.wordArr[i].left.letters;
this.word_bg_groups[i] = this.makeSentence(i, letters); this.word_bg_groups[i] = this.makeSentence(i, letters);
this.word_bg_groups[i].y =-240+140*i; this.word_bg_groups[i].y = -240 + 140 * i;
this.word_bg_groups[i].x = -540; this.word_bg_groups[i].x = -540;
if(i<4){ if (i < 4) {
//只显示第一个 //只显示第一个
this.word_bg_groups[i].visible = true; this.word_bg_groups[i].visible = true;
}else{ } else {
this.word_bg_groups[i].visible =false; this.word_bg_groups[i].visible = false;
} }
this.juWidth[i]=this.juziWidth; this.juWidth[i] = this.juziWidth;
this.juziBg.addChild(this.word_bg_groups[i]); this.juziBg.addChild(this.word_bg_groups[i]);
} }
} }
title1
title2 initTitle() {
initTitle(){
//小标题 //小标题
console.log("title"+this.data); console.log("title" + this.data);
this.title1 = new Label(); this.title1 = new Label();
this.title1.text = this.data.title.t_val1; this.title1.text = this.data.title.t_val1;
this.title1.fontName = 'BRLNSDB'; this.title1.fontName = 'BRLNSDB';
this.title1.fontColor = '#ffdb84'; this.title1.fontColor = '#ffdb84';
...@@ -909,19 +856,19 @@ wordArr ...@@ -909,19 +856,19 @@ wordArr
this.title1.refreshSize(); this.title1.refreshSize();
this.t1Bg.addChild(this.title1); this.t1Bg.addChild(this.title1);
this.title1.setMaxSize(52); this.title1.setMaxSize(52);
this.title1.x=-2; this.title1.x = -2;
this.title1.y=1; this.title1.y = 1;
//大标题 //大标题
let bgRect = new ShapeRect(); let bgRect = new ShapeRect();
bgRect.setSize(1000, 60); bgRect.setSize(1000, 60);
bgRect.init(); bgRect.init();
bgRect.fillColor = '#ffdb84'; bgRect.fillColor = '#ffdb84';
this.juziBg.addChild(bgRect); this.juziBg.addChild(bgRect);
bgRect.x=37; bgRect.x = 37;
bgRect.y=-333; bgRect.y = -333;
// this.startBorder.addChild(bgRect, -1); // this.startBorder.addChild(bgRect, -1);
this.title2 = new Label(); this.title2 = new Label();
this.title2.text = this.data.title.t_val2; this.title2.text = this.data.title.t_val2;
this.title2.fontName = 'FUTURAB'; this.title2.fontName = 'FUTURAB';
this.title2.fontColor = '#040404'; this.title2.fontColor = '#040404';
...@@ -933,204 +880,189 @@ wordArr ...@@ -933,204 +880,189 @@ wordArr
this.title2.x = -514; this.title2.x = -514;
this.title2.y = 0; this.title2.y = 0;
this.bgRect=bgRect; this.bgRect = bgRect;
} }
bgRect
tBtn initBg() {
initBg(){
//背景 //背景
this.startBorder = new MySprite(); this.startBorder = new MySprite();
this.startBorder.init(this.images.get('bg')); this.startBorder.init(this.images.get('bg'));
this.startBorder.x = this.canvasWidth / 2 ; this.startBorder.x = this.canvasWidth / 2;
this.startBorder.y = this.canvasHeight / 2 ; this.startBorder.y = this.canvasHeight / 2;
const sx = this.canvasWidth / this.startBorder.width; const sx = this.canvasWidth / this.startBorder.width;
const sy = this.canvasHeight / this.startBorder.height; const sy = this.canvasHeight / this.startBorder.height;
const s=Math.max(sx,sy); const s = Math.max(sx, sy);
console.log(s+"s"); console.log(s + "s");
this.startBorder.setScaleXY(s); this.startBorder.setScaleXY(s);
this.renderArr.push(this.startBorder); this.renderArr.push(this.startBorder);
//标题一背景块 //标题一背景块
this.t1Bg=new MySprite(); this.t1Bg = new MySprite();
this.t1Bg.init(this.images.get('title1')); this.t1Bg.init(this.images.get('title1'));
this.t1Bg.setScaleXY(this.mapScale/1.6); this.t1Bg.setScaleXY(this.mapScale / 1.6);
//句子背景 //句子背景
this.juziBg=new MySprite(); this.juziBg = new MySprite();
this.juziBg.init(this.images.get('juzi')); this.juziBg.init(this.images.get('juzi'));
// this.juziBg.x = this.canvasWidth / 2.8; // this.juziBg.x = this.canvasWidth / 2.8;
// this.juziBg.y = this.canvasHeight / 2 ; // this.juziBg.y = this.canvasHeight / 2 ;
const jx =sx/1.8 ; const jx = sx / 1.8;
const jy = sy/1.8; const jy = sy / 1.8;
const j=Math.min(jx,jy); const j = Math.min(jx, jy);
console.log(j+"s"); console.log(j + "s");
this.juziBg.setScaleXY(j); this.juziBg.setScaleXY(j);
this.juziBg.x=-100; this.juziBg.x = -100;
this.juziBg.y=20; this.juziBg.y = 20;
this.startBorder.addChild(this.juziBg); this.startBorder.addChild(this.juziBg);
// this.juziBg.y=-2;
// this.juziBg.y=-2;
this.juziBg.addChild(this.t1Bg); this.juziBg.addChild(this.t1Bg);
this.t1Bg.x=-510; this.t1Bg.x = -510;
this.t1Bg.y=-340; this.t1Bg.y = -340;
//句子方块 //句子方块
this.juzi_bg = new ShapeRect(); this.juzi_bg = new ShapeRect();
this.juzi_bg.fillColor = '#ffffff' ; this.juzi_bg.fillColor = '#ffffff';
this.juzi_bg.setSize(1060, 570); this.juzi_bg.setSize(1060, 570);
this.juzi_bg.x=-550; this.juzi_bg.x = -550;
this.juzi_bg.y=-289; this.juzi_bg.y = -289;
this.juziBg.addChild(this.juzi_bg); 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);
}
if(this.data.wordArr.length>=6){
guideBg.setScaleXY(this.mapScale/1.3);
this.guide.setScaleXY(this.mapScale/4);
} this.Btn = new MySprite();
this.tBtn = new MySprite();
this.sBtn = new MySprite();
guideBg.x=15; this.tBtn.init(this.images.get('stop'));
guideBg.y=230; this.sBtn.init(this.images.get('start'));
this.guide.y=-89; this.Btn.addChild(this.sBtn);
this.guide.x=0; 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);
}
if (this.data.wordArr.length >= 6) {
guideBg.setScaleXY(this.mapScale / 1.3);
this.guide.setScaleXY(this.mapScale / 4);
}
}
}
guideBg.x = 15;
guideBg.y = 230;
this.guide.y = -89;
this.guide.x = 0;
}
}
bs
countc=0;
start=0;
mapDown(event) { mapDown(event) {
if (!this.canTouch) { if (!this.canTouch) {
return; return;
} }
if (this.checkClickTarget(this.sBtn) &&this.bs==1) {//播放键
if (this.checkClickTarget(this.sBtn) && this.bs == 1) {//播放键
this.sBtn.alpha=0;
this.tBtn.alpha=1;
this.bs=0; this.sBtn.alpha = 0;
this.tBtn.alpha = 1;
this.bs = 0;
//播放所有音乐 //播放所有音乐
const audio1 = this.audioObj[this.musicArr[0]]; const audio1 = this.audioObj[this.musicArr[0]];
audio1.pause(); audio1.pause();
audio1.currentTime = 0; audio1.currentTime = 0;
if(this.firstjuzi==1){ if (this.firstjuzi == 1) {
console.log("上一次点的"+this.x); console.log("上一次点的" + this.x);
const audio1 = this.audioObj[this.musicArr[this.x]]; const audio1 = this.audioObj[this.musicArr[this.x]];
audio1.pause(); audio1.pause();
audio1.currentTime = 0; audio1.currentTime = 0;
} }
console.log( "pic-audio"+this.musicArr[1]); console.log("pic-audio" + this.musicArr[1]);
this.playAudio(this.musicArr[1]); this.playAudio(this.musicArr[1]);
this.start=1; this.start = 1;
return; return;
} }
if (this.checkClickTarget(this.bgRect)) {//标题音 if (this.checkClickTarget(this.bgRect)) {//标题音
if(this.start==1){ if (this.start == 1) {
//跳转暂停 //跳转暂停
this.sBtn.alpha=1; this.sBtn.alpha = 1;
this.tBtn.alpha=0; this.tBtn.alpha = 0;
this.start=0; this.start = 0;
const audio1 = this.audioObj[this.musicArr[1]]; const audio1 = this.audioObj[this.musicArr[1]];
audio1.pause(); audio1.pause();
audio1.currentTime = 0; audio1.currentTime = 0;
} }
if(this.firstjuzi==1){ if (this.firstjuzi == 1) {
console.log("上一次点的"+this.x); console.log("上一次点的" + this.x);
const audio1 = this.audioObj[this.musicArr[this.x]]; const audio1 = this.audioObj[this.musicArr[this.x]];
audio1.pause(); audio1.pause();
audio1.currentTime = 0; audio1.currentTime = 0;
} }
this.playAudio(this.musicArr[0]); this.playAudio(this.musicArr[0]);
return; return;
} }
if (this.checkClickTarget(this.tBtn)&&this.bs==0) {//暂停键 if (this.checkClickTarget(this.tBtn) && this.bs == 0) {//暂停键
this.sBtn.alpha=1; this.sBtn.alpha = 1;
this.tBtn.alpha=0; this.tBtn.alpha = 0;
this.bs=1; this.bs = 1;
/* /*
const audio = this.audioObj[this.musicArr[1]]; const audio = this.audioObj[this.musicArr[1]];
audio.pause(); audio.pause();
...@@ -1143,79 +1075,67 @@ start=0; ...@@ -1143,79 +1075,67 @@ start=0;
} }
for (let i = 0; i < this.data.wordArr.length; i++) {//句子音
if (this.checkClickTarget(this.word_bg_groups[i])) {
for(let i=0;i<this.data.wordArr.length;i++){//句子音 this.firstjuzi = 1;
if ( this.checkClickTarget(this.word_bg_groups[i]) ) {
this.firstjuzi=1;
this.countc++; this.countc++;
if(this.start==1){ if (this.start == 1) {
//跳转暂停 //跳转暂停
this.sBtn.alpha=1; this.sBtn.alpha = 1;
this.tBtn.alpha=0; this.tBtn.alpha = 0;
this.start=0; this.start = 0;
const audio1 = this.audioObj[this.musicArr[1]]; const audio1 = this.audioObj[this.musicArr[1]];
audio1.pause(); audio1.pause();
audio1.currentTime = 0; audio1.currentTime = 0;
} }
console.log("contc"+this.countc); 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;
console.log("第一次");
if(this.countc==1){ 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);
else{
console.log("this.x"+this.x);
const audio = this.audioObj[this.musicArr[this.x]]; const audio = this.audioObj[this.musicArr[this.x]];
audio.pause(); audio.pause();
audio.currentTime = 0; audio.currentTime = 0;
} }
this.playAudio(this.musicArr[i+2]); this.playAudio(this.musicArr[i + 2]);
this.x=i+2; this.x = i + 2;
console.log("能点击"+this.data.wordArr[i].audio_url); console.log("能点击" + this.data.wordArr[i].audio_url);
this.canTouch = true; this.canTouch = true;
return; return;
} }
}
/*
if(this.checkClickTarget(this.juzi_bg)){
//滚动区域
this.shapePosY = event.clientY;
} }
*/
/*
if(this.checkClickTarget(this.juzi_bg)){
//滚动区域
this.shapePosY = event.clientY;
}
*/
} }
//音乐暂停 //音乐暂停
pauseAudio(key, callback = null){ pauseAudio(key, callback = null) {
const audio = this.audioObj[key]; const audio = this.audioObj[key];
if (audio) { if (audio) {
...@@ -1228,121 +1148,93 @@ start=0; ...@@ -1228,121 +1148,93 @@ start=0;
audio.pause(); audio.pause();
} }
} }
x
firstjuzi=0;
mapMove(event) { mapMove(event) {
/* if(this.checkClickTarget(this.juzi_bg)&&this.shapePosY&&this.word_left_scoll.visible){ /* if(this.checkClickTarget(this.juzi_bg)&&this.shapePosY&&this.word_left_scoll.visible){
let y = event.clientY; let y = event.clientY;
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;
} */
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.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);
if ( this.checkClickTarget(this.guide_bg) ) {
let y=event.clientY;
let i=9;
if(y<=317&&i<6){
this.guide.y=y-225;
} } else {
//-250+140*i-y-1000
if(i>=6&&y<530){ this.word_bg_groups[i].y = -250 + 140 * i - y + 120;
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);
} }
if (this.word_bg_groups[i].y < -300) {
else{ this.word_bg_groups[i].visible = false;
//-250+140*i-y-1000
this.word_bg_groups[i].y =-250+140*i-y+120;
} }
if(this.word_bg_groups[i].y<-300){ if (this.word_bg_groups[i].y >= -300 && this.word_bg_groups[i].y < 200) {
this.word_bg_groups[i].visible=false; this.word_bg_groups[i].visible = true;
} }
if(this.word_bg_groups[i].y>=-300&&this.word_bg_groups[i].y<200){ if (this.word_bg_groups[i].y > 200) {
this.word_bg_groups[i].visible=true; this.word_bg_groups[i].visible = false;
} }
if(this.word_bg_groups[i].y>200){
this.word_bg_groups[i].visible=false;
}
} }
return; return;
} }
} }
...@@ -1363,12 +1255,10 @@ start=0; ...@@ -1363,12 +1255,10 @@ start=0;
// ---------------------------------------------------------- // ----------------------------------------------------------
this.updateArr(this.renderArr); this.updateArr(this.renderArr);
} }
} }
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