Commit af450371 authored by limingzhe's avatar limingzhe

style: 格式化

parent c4f68981
......@@ -6,19 +6,25 @@ import TWEEN from '@tweenjs/tween.js';
import {
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';
@Component({
selector: 'app-play',
templateUrl: './play.component.html',
......@@ -26,8 +32,8 @@ import {
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
// 数据
data;
......@@ -80,20 +86,34 @@ export class PlayComponent implements OnInit, OnDestroy {
juzi_bg: ShapeRect;
guide_bg: ShapeRect;
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'])
onResize(event) {
this.winResizeEventStream.next();
}
ngOnInit() {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
......@@ -108,14 +128,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
// 初始化 各事件监听
this.initListener();
......@@ -124,22 +136,16 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initDefaultData();
// 初始化 音频资源
this.initAudio();
// 初始化 图片资源
this.initImg();
console.log('data:' , this.data);
console.log('data:', this.data);
// 开始预加载资源
this.load();
console.log('data:' , this.data);
console.log('data:', this.data);
// 加载完成播放音乐
......@@ -149,13 +155,14 @@ export class PlayComponent implements OnInit, OnDestroy {
}
ngOnDestroy() {
window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId);
}
// ======================================================编写区域==========================================================================
load() {
// 预加载资源
......@@ -167,7 +174,6 @@ export class PlayComponent implements OnInit, OnDestroy {
});
}
init() {
this.initCtx();
......@@ -190,11 +196,6 @@ export class PlayComponent implements OnInit, OnDestroy {
window['curCtx'] = this.ctx;
}
updateItem(item) {
if (item) {
item.update();
......@@ -210,12 +211,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
initListener() {
this.winResizeEventStream
......@@ -316,7 +311,6 @@ export class PlayComponent implements OnInit, OnDestroy {
addTouchListener();
}
playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key];
......@@ -335,8 +329,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
......@@ -387,17 +379,12 @@ export class PlayComponent implements OnInit, OnDestroy {
});
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
checkClickTarget(target) {
const rect = target.getBoundingBox();
......@@ -430,10 +417,6 @@ export class PlayComponent implements OnInit, OnDestroy {
return false;
}
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj;
......@@ -463,28 +446,17 @@ export class PlayComponent implements OnInit, OnDestroy {
this.rawImages.set(url, url);
}
// ======================================================编写区域==========================================================================
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if(!this.data.title){
if (!this.data.title) {
this.data.title = this.getDefaultTitle();
}
if(!this.data.words){
if (!this.data.words) {
this.data.words = "a_e";
}
if (!this.data.wordArr) {
......@@ -492,87 +464,78 @@ export class PlayComponent implements OnInit, OnDestroy {
}
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.';
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';
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';
}
}
defaultWordArr(){
defaultWordArr() {
return [
{
left: {
num:"Y",
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'}
{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",
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'}
{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",
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'}
{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(){
getDefaultTitle() {
return {
t_val1:'C',
t_val2:'Listen, make a sentence.Then chant.',
t_font_color:'#f2c558',
t_font:'BRLNSDB',
t_font_size:40
t_val1: 'C',
t_val2: 'Listen, make a sentence.Then chant.',
t_font_color: '#f2c558',
t_font: 'BRLNSDB',
t_font_size: 40
};
}
/**
* 添加预加载图片
*/
......@@ -584,7 +547,7 @@ export class PlayComponent implements OnInit, OnDestroy {
};
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,7 +562,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 音频资源
this.addUrlToAudioObj(this.data.title.audio_url);
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);
}
......@@ -609,8 +572,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
wordArr
/**
* 初始化数据
*/
......@@ -632,7 +593,6 @@ wordArr
// this.mapScale = this.canvasHeight / this.canvasBaseH;
this.canTouch = true;
......@@ -643,13 +603,8 @@ wordArr
this.renderArr = [];
}
/**
* 初始化试图
*/
......@@ -670,22 +625,20 @@ wordArr
// 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() {
for (let i = 0; i < this.data.wordArr.length + 2; i++) {
let musicArr = [];
if (i == 0) {
musicArr[0] = this.data.title.audio_url;
}
else if(i==1){
musicArr[1]=this.data.title.allmusic_audio;
} else if (i == 1) {
musicArr[1] = this.data.title.allmusic_audio;
}
else{
musicArr[i]=this.data.wordArr[i-2].audio_url;
} else {
musicArr[i] = this.data.wordArr[i - 2].audio_url;
}
......@@ -693,38 +646,36 @@ wordArr
this.musicArr.push(musicArr[i]);
}
}
musicArr = [];
initPic(){
for(let i=0;i<this.data.wordArr.length;i++){
let pic=new MySprite();
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;
pic.visible = true;
if(pic.width>=pic.height||pic.width>500){
if (pic.width >= pic.height || pic.width > 500) {
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.x=this.juWidth[i]+100;
pic.y=20;
console.log("图片",pic.x);
pic.x = this.juWidth[i] + 100;
pic.y = 20;
console.log("图片", pic.x);
}
}
getColor(colorId){
getColor(colorId) {
let color = "#000000";
switch(colorId){
switch (colorId) {
case "C01":
color = "#008000";
break;
......@@ -741,7 +692,8 @@ wordArr
return color;
}
getUnitFontWidth(){
getUnitFontWidth() {
let spr = new Label();
spr.text = "w";
spr.textAlign = 'left';
......@@ -750,11 +702,11 @@ wordArr
spr.refreshSize();
return spr.width;
}
number=0;
makeSentence(index,letters, position='middle') {
makeSentence(index, letters, position = 'middle') {
//单词
let word_bg = new ShapeRect();
word_bg.fillColor = '#fff' ;
word_bg.fillColor = '#fff';
let totalWidth = 0;
let tempWidth = 0;
let rowHeight = 0;
......@@ -766,34 +718,34 @@ wordArr
let numWidth = 0;
for(let i = 0; i < letters.length; ++ i) {
for (let i = 0; i < letters.length; ++i) {
//字母
let letter = letters[i];
if(i==0){
if(this.data.wordArr[index].left.num=='Y'){
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.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;
letter_num.x = tempWidth + 5;
rowHeight = letter_num.height;
letter_num.y = rows*rowHeight-rowHeight/2;
rowGroup[rows-1].letterLabels.push(letter_num);
letter_num.y = rows * rowHeight - rowHeight / 2;
rowGroup[rows - 1].letterLabels.push(letter_num);
word_bg.addChild(letter_num);
}
numWidth = this.getUnitFontWidth()*2;
numWidth = this.getUnitFontWidth() * 2;
tempWidth += numWidth+10;
tempWidth += numWidth + 10;
}
......@@ -808,13 +760,13 @@ wordArr
letter_spr.fontColor = this.getColor(letter.letter_color);
letter_spr.refreshSize();
//设置坐标
letter_spr.x = tempWidth+5;
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;
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"){
......@@ -831,9 +783,8 @@ wordArr
} */
if(i==letters.length-1){
if(tempWidth>totalWidth){
if (i == letters.length - 1) {
if (tempWidth > totalWidth) {
totalWidth = tempWidth;
}
}
......@@ -841,37 +792,34 @@ wordArr
}
//重新调整位置,使文字居中
for(let i=0;i<rowGroup.length;i++){
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++){
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;
label.x += offset;
}
}
}else if(position=='left'){
let offset = numWidth+5;
if(i>0){
for(let j=0;j<group.letterLabels.length;j++){
} 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;
label.x += offset;
}
}
}
}
word_bg.setSize(totalWidth, rows*rowHeight);
this.juziWidth=tempWidth;
word_bg.setSize(totalWidth, rows * rowHeight);
this.juziWidth = tempWidth;
return word_bg;
}
juziWidth
word_bg_groups=[];
word_show_index;
juWidth=[];
initjuzi(){
initjuzi() {
this.word_bg_groups = [];
this.word_show_index = 0;
//句子个数
......@@ -880,25 +828,24 @@ wordArr
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].y = -240 + 140 * i;
this.word_bg_groups[i].x = -540;
if(i<4){
if (i < 4) {
//只显示第一个
this.word_bg_groups[i].visible = true;
}else{
this.word_bg_groups[i].visible =false;
} else {
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]);
}
}
title1
title2
initTitle(){
initTitle() {
//小标题
console.log("title"+this.data);
console.log("title" + this.data);
this.title1 = new Label();
this.title1.text = this.data.title.t_val1;
......@@ -909,16 +856,16 @@ wordArr
this.title1.refreshSize();
this.t1Bg.addChild(this.title1);
this.title1.setMaxSize(52);
this.title1.x=-2;
this.title1.y=1;
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;
bgRect.x = 37;
bgRect.y = -333;
// this.startBorder.addChild(bgRect, -1);
this.title2 = new Label();
......@@ -933,73 +880,70 @@ wordArr
this.title2.x = -514;
this.title2.y = 0;
this.bgRect=bgRect;
this.bgRect = bgRect;
}
bgRect
tBtn
initBg(){
initBg() {
//背景
this.startBorder = new MySprite();
this.startBorder.init(this.images.get('bg'));
this.startBorder.x = this.canvasWidth / 2 ;
this.startBorder.y = this.canvasHeight / 2 ;
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");
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 = new MySprite();
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.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");
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.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.t1Bg.x = -510;
this.t1Bg.y = -340;
//句子方块
this.juzi_bg = new ShapeRect();
this.juzi_bg.fillColor = '#ffffff' ;
this.juzi_bg.fillColor = '#ffffff';
this.juzi_bg.setSize(1060, 570);
this.juzi_bg.x=-550;
this.juzi_bg.y=-289;
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.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);
......@@ -1008,93 +952,81 @@ wordArr
this.sBtn.setScaleXY(this.mapScale);
this.tBtn.setScaleXY(this.mapScale);
this.Btn.x=650;
this.Btn.y=240;
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;
this.tBtn.alpha = 0;
this.bs = 1;
if(this.data.wordArr.length>4){
if (this.data.wordArr.length > 4) {
//加滚动条
this.guide_bg = new ShapeRect();
this.guide_bg.fillColor = '#ffffff' ;
this.guide_bg.fillColor = '#ffffff';
this.guide_bg.setSize(30, 470);
this.juziBg.addChild(this.guide_bg);
let guideBg=new MySprite();
let guideBg = new MySprite();
guideBg.init(this.images.get('dhBg'));
this.guide=new MySprite();
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;
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 / 1.3);
}
if(this.data.wordArr.length>=6){
guideBg.setScaleXY(this.mapScale/1.3);
this.guide.setScaleXY(this.mapScale/4);
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;
guideBg.x = 15;
guideBg.y = 230;
this.guide.y = -89;
this.guide.x = 0;
}
}
bs
countc=0;
start=0;
mapDown(event) {
if (!this.canTouch) {
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]];
audio1.pause();
audio1.currentTime = 0;
if(this.firstjuzi==1){
console.log("上一次点的"+this.x);
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]);
console.log("pic-audio" + this.musicArr[1]);
this.playAudio(this.musicArr[1]);
this.start=1;
this.start = 1;
return;
......@@ -1102,11 +1034,11 @@ start=0;
if (this.checkClickTarget(this.bgRect)) {//标题音
if(this.start==1){
if (this.start == 1) {
//跳转暂停
this.sBtn.alpha=1;
this.tBtn.alpha=0;
this.start=0;
this.sBtn.alpha = 1;
this.tBtn.alpha = 0;
this.start = 0;
const audio1 = this.audioObj[this.musicArr[1]];
audio1.pause();
audio1.currentTime = 0;
......@@ -1114,8 +1046,8 @@ start=0;
}
if(this.firstjuzi==1){
console.log("上一次点的"+this.x);
if (this.firstjuzi == 1) {
console.log("上一次点的" + this.x);
const audio1 = this.audioObj[this.musicArr[this.x]];
audio1.pause();
audio1.currentTime = 0;
......@@ -1127,10 +1059,10 @@ start=0;
return;
}
if (this.checkClickTarget(this.tBtn)&&this.bs==0) {//暂停键
this.sBtn.alpha=1;
this.tBtn.alpha=0;
this.bs=1;
if (this.checkClickTarget(this.tBtn) && this.bs == 0) {//暂停键
this.sBtn.alpha = 1;
this.tBtn.alpha = 0;
this.bs = 1;
/*
const audio = this.audioObj[this.musicArr[1]];
audio.pause();
......@@ -1143,28 +1075,24 @@ 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++){//句子音
if ( this.checkClickTarget(this.word_bg_groups[i]) ) {
this.firstjuzi=1;
this.firstjuzi = 1;
this.countc++;
if(this.start==1){
if (this.start == 1) {
//跳转暂停
this.sBtn.alpha=1;
this.tBtn.alpha=0;
this.start=0;
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("contc" + this.countc);
console.log("第一次");
const audio1 = this.audioObj[this.musicArr[0]];
......@@ -1175,17 +1103,11 @@ start=0;
audio2.currentTime = 0;
if(this.countc==1){
}
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]];
audio.pause();
audio.currentTime = 0;
......@@ -1193,29 +1115,27 @@ start=0;
}
this.playAudio(this.musicArr[i+2]);
this.x=i+2;
console.log("能点击"+this.data.wordArr[i].audio_url);
this.playAudio(this.musicArr[i + 2]);
this.x = i + 2;
console.log("能点击" + this.data.wordArr[i].audio_url);
this.canTouch = true;
return;
}
}
/*
/*
if(this.checkClickTarget(this.juzi_bg)){
//滚动区域
this.shapePosY = event.clientY;
}
*/
*/
}
//音乐暂停
pauseAudio(key, callback = null){
pauseAudio(key, callback = null) {
const audio = this.audioObj[key];
if (audio) {
......@@ -1228,8 +1148,6 @@ start=0;
audio.pause();
}
}
x
firstjuzi=0;
mapMove(event) {
......@@ -1240,9 +1158,9 @@ start=0;
let bodyBox = this.word_left_shape_body;
let bodyY = bodyBox.y;
let bodyH = bodyBox.height;
//句子可见高度570/整个屏幕高度
//句子可见高度570/整个屏幕高度
let sx = this.bodySeeHeight/this.canvasHeight;
//鼠标点击拖动量
//鼠标点击拖动量
let step = (y-this.shapePosY)*sx;
......@@ -1274,67 +1192,41 @@ start=0;
} */
if ( this.checkClickTarget(this.guide_bg) ) {
let y=event.clientY;
let i=9;
if(y<=317&&i<6){
this.guide.y=y-225;
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;
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){
let x = 9;
if (x < 6) {
this.word_bg_groups[i].y =-250+140*i+(y-25);
}
this.word_bg_groups[i].y = -250 + 140 * i + (y - 25);
else{
} else {
//-250+140*i-y-1000
this.word_bg_groups[i].y =-250+140*i-y+120;
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].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 >= -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;
if (this.word_bg_groups[i].y > 200) {
this.word_bg_groups[i].visible = false;
}
......@@ -1363,12 +1255,10 @@ start=0;
// ----------------------------------------------------------
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