Commit 81058fdf authored by limingzhe's avatar limingzhe

feat: 适配窗口

parent 03c59257
......@@ -431,20 +431,28 @@ cc.Class({
const letterS = this.data.letter.toLowerCase();
const itemLetterBig = getSprNode('letter/' + letterS + '_1_1');
itemLetterBig.x = -this.canvas.width / 2 + 70 * this._mapScaleMin;
itemLetterBig.y = 200 * this._mapScaleMin;
// itemLetterBig.x = -this.canvas.width / 2 + 70 * this._mapScaleMin;
// itemLetterBig.y = 200 * this._mapScaleMin;
itemLetterBig.scale = this._mapScaleMin;
itemLetterBig.anchorY = 0.28
this.canvas.addChild(itemLetterBig);
const itemBgBig = getSprNode('item_bg');
itemBgBig.scale = this._mapScaleMin;
itemBgBig.x = itemLetterBig.x + 70 * this._mapScaleMin;
itemBgBig.y = itemLetterBig.y;
// itemBgBig.x = itemLetterBig.x + 70 * this._mapScaleMin;
// itemBgBig.y = itemLetterBig.y;
itemBgBig.anchorX = 0;
this.canvas.addChild(itemBgBig);
this.itemBgBig = itemBgBig;
const letterW = 50 * this._mapScaleMin;
itemBgBig.x = -itemBgBig.width / 2 * itemBgBig.scaleX + letterW;
itemBgBig.y = 200 * this._mapScaleMin;
itemLetterBig.x = itemBgBig.x - letterW;
itemLetterBig.y = itemBgBig.y;
const letterAnim0 = this.getLetterAnimBig0(letterS);
letterAnim0.x = 100;
......@@ -472,20 +480,27 @@ cc.Class({
const letterS = this.data.letter.toLowerCase();
const itemLetterSmall = getSprNode('letter/' + letterS + '_0_1');
itemLetterSmall.x = -this.canvas.width / 2 + 70 * this._mapScaleMin;
itemLetterSmall.y = -30 * this._mapScaleMin;
// itemLetterSmall.x = -this.canvas.width / 2 + 70 * this._mapScaleMin;
// itemLetterSmall.y = -30 * this._mapScaleMin;
itemLetterSmall.scale = this._mapScaleMin;
this.canvas.addChild(itemLetterSmall);
const itemBgSmall = getSprNode('item_bg');
itemBgSmall.scale = this._mapScaleMin;
itemBgSmall.x = itemLetterSmall.x + 70 * this._mapScaleMin;
itemBgSmall.y = itemLetterSmall.y;
// itemBgSmall.x = itemLetterSmall.x + 70 * this._mapScaleMin;
// itemBgSmall.y = itemLetterSmall.y;
itemBgSmall.anchorX = 0;
this.canvas.addChild(itemBgSmall);
this.itemBgSmall = itemBgSmall;
const letterW = 50 * this._mapScaleMin;
itemBgSmall.x = -itemBgSmall.width / 2 * itemBgSmall.scaleX + letterW;
itemBgSmall.y = -30 * this._mapScaleMin;
itemLetterSmall.x = itemBgSmall.x - letterW;
itemLetterSmall.y = itemBgSmall.y;
const letterAnim0 = this.getLetterAnimSmall0(letterS);
letterAnim0.x = 100;
letterAnim0.y = 0;
......
......@@ -371,19 +371,21 @@ cc.Class({
const letterS = this.data.letter.toLowerCase();
const itemLetterBig = getSprNode('letter/' + letterS + '_1_1');
itemLetterBig.x = -this.canvas.width / 2 + 70 * this._mapScaleMin;
itemLetterBig.y = 200 * this._mapScaleMin;
itemLetterBig.scale = this._mapScaleMin;
itemLetterBig.anchorY = 0.28
this.canvas.addChild(itemLetterBig);
const itemBgBig = getSprNode('item_bg');
itemBgBig.scale = this._mapScaleMin;
itemBgBig.x = itemLetterBig.x + 70 * this._mapScaleMin;
itemBgBig.y = itemLetterBig.y;
itemBgBig.anchorX = 0;
this.canvas.addChild(itemBgBig);
const letterW = 300 * this._mapScaleMin;
// itemBgBig.x = this.canvas.width / 2 - itemBgBig.width / 2 * itemBgBig.scaleX + letterW // itemLetterBig.x + 70 * this._mapScaleMin;
itemBgBig.y = 200 * this._mapScaleMin;
// itemLetterBig.x = itemBgBig.x - letterW / 2;
itemLetterBig.y = itemBgBig.y;
const letterAnim0 = this.getLetterAnimBig0(letterS);
letterAnim0.x = 100;
......@@ -697,126 +699,6 @@ cc.Class({
_curIndex: null,
initPic() {
let exercises = this.data.exercises;
this.getSprNodeByUrl(exercises.picUrl, (sprNode) => {
let pic = cc.find("Canvas/content/bg_green/pic");
const picNode = sprNode;
picNode.scale = pic.width / picNode.width;
picNode.x = 0;
picNode.y = 0;
pic.addChild(picNode);
});
let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text");
textNode.initScale = textNode.scale;
let wordNodeArr = [];
let wordArr = this.data.exercises.wordArr;
for (let i = 0; i < wordArr.length; ++i) {
if (!wordArr[i].val) {
continue;
}
//首字母
let initial = wordArr[i].val.substr(0, 1);
let label = this.getWord(initial, 200, true);
label.isInitial = true;
wordNodeArr.push(label);
//其余字母
let last = wordArr[i].val.substr(1);
let lastLabel = this.getWord(last, 200, false);
wordNodeArr.push(lastLabel);
}
textNode.wordNodeArr = wordNodeArr;
this.resetTextPosition();
this._curIndex = 0;
},
initBtn() {
},
getWord(wordVal, size, isInitial) {
let color = new cc.color();
color.fromHEX('#000000');
const labelNode = new cc.Node();
labelNode.color = color;
const label = labelNode.addComponent(cc.Label);
label.lineHeight = size;
label.fontSize = size;
label.font = cc.find('Canvas/res/font/MuliBold-YzEVy').getComponent(cc.Label).font;
label.string = wordVal;
labelNode.x = 0;
labelNode.y = 0;
let widget = labelNode.addComponent(cc.Widget);
widget.isAlignBottom = true;
widget.bottom = - size / 2;
widget.updateAlignment();
labelNode.addComponent(cc.Button);
labelNode.on('click', () => {
if (!this._cantouch) {
return;
}
//设置不可点击
this._cantouch = false;
playAudio(this.audioBtn.clip, () => {
//如果是首字母,则添加点击事件
if (isInitial) {
this.playTextAutio(() =>{
this._curIndex++;
this.moveHand(this._curIndex, () => {
this._cantouch = true;
this.showEnd();
})
})
}
else {
//显示完,则播放音频
if (this._shown) {
this.playTextAutio(() => {
this._cantouch = true;
});
}
else{
this._cantouch = true;
}
}
})
})
return labelNode;
},
playAni(name, times = 1) {
......@@ -848,387 +730,9 @@ cc.Class({
return state;
},
moveHand(index, callback = null) {
let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text");
let wordNodeArr = textNode.wordNodeArr
let wordNode = wordNodeArr[2 * index];
if (!wordNode) {
if (callback) {
callback();
}
return;
}
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.x = wordNode.x;
this.handAni();
if (callback) {
callback();
}
},
/**
* 播放文本音频
* @param {*} callback
*/
playTextAutio(callback = null) {
this.playAudioByUrl(this.data.exercises.audioUrl, () => {
//停止监听动画
this._stopAni = true;
if (callback) {
callback();
}
},(audioId) => {
//显示完成,不再播放动画
if (this._shown) {
return;
}
//设置可播放动画
this._stopAni = false;
//隐藏手指
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 0;
let lyrics = this.data.exercises.lrcData.lyrics;
//临时音频打点数组
let arr = JSON.parse(JSON.stringify(lyrics));
console.log(arr);
this.monitor(audioId, arr);
})
},
/**
* 重新设置文字位置
*/
resetTextPosition() {
let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text");
let wordNodeArr = textNode.wordNodeArr;
//间隔
let space = 40;
let tW = 0;
for (let i = 0; i < wordNodeArr.length; ++i) {
let wordNode = wordNodeArr[i];
wordNode.removeFromParent();
wordNode.parent = textNode;
tW += wordNode.width;
let widget = wordNode.getComponent(cc.Widget);
widget.bottom = - wordNode.getComponent(cc.Label).fontSize / 2;
widget.updateAlignment();
wordNode.initScale = wordNode.scale;
}
tW += (this.data.exercises.wordArr.length - 1) * space;
let startX = - tW / 2;
for (let i = 0; i < wordNodeArr.length; ++i) {
let width = wordNodeArr[i].width;
wordNodeArr[i].x = startX + width / 2;
startX += width;
if (wordNodeArr[i].isInitial) {
continue;
}
startX += space;
}
if(tW > textNode.width){
const sx = textNode.width / tW;
textNode.scale = Math.round(sx * 1000) / 1000;
textNode.initScale = textNode.scale;
}
},
/**
* 显示结束
*/
_shown: null,
showEnd() {
console.log(' in showEnd');
if (this._curIndex < this.data.exercises.wordArr.length) {
return;
}
if (this._shown) {
return;
}
this._shown = true;
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 0;
this._stop = true;
//播放动画
const state = this.playAni('finish', 0);
//播放引导音频2
this.playAudioByUrl(this.data.guideAudioUrl2, () => {
state.stop();
this.playAni('normal', 0);
this.showPhotoBtn();
});
},
_stop: null,
_tween: null,
handAni(){
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 255;
handNode.y = handNode.initY;
const move = () => {
this._tween = cc.tween(handNode)
.to(0.5,{y: handNode.initY + 50})
.to(0.5,{y: handNode.initY})
.call(() =>{
if(!this._stop){
move()
}
})
.start();
}
this._stop = false;
move();
},
_stopAni:null,
monitor(audioId, arr){
if(this._stopAni){
return;
}
this._stopAni = false;
let currentTime = cc.audioEngine.getCurrentTime(audioId);
let len = arr.length;
for(let i = len - 1; i >=0; -- i){
let time = arr[i].time;
time = Math.round(time * 1000) / 1000;
currentTime = Math.round(currentTime * 1000) / 1000;
if(time < currentTime ){
//如果是最后一个匹配,则播放内容动画
if(len == 1){
this.contentAni();
}
else{
this.textAni();
}
//移除匹配上的元素
arr.splice(i, 1);
break;
}
}
requestAnimationFrame(()=>{
this.monitor(audioId, arr);
})
},
/**
* 文本动画
*/
_playText:null,
textAni(){
if(this._playText){
return;
}
this._playText = true;
this._cantouch = false;
const twinkle =(node) => {
cc.tween(node)
.to(0.3,{scale: node.initScale * 1.5})
.to(0.3,{scale: node.initScale})
.call(() => {
this._playText = false;
})
.start();
};
let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text");
let wordNodeArr = textNode.wordNodeArr;
for (let i = 0; i < wordNodeArr.length; ++i) {
let wordNode = wordNodeArr[i];
//如果是首字母,则执行动画
if(wordNode.isInitial){
twinkle(wordNode);
}
}
},
/**
* 内容动画
*/
contentAni(){
let handNode = cc.find("Canvas/content/bg_green/bg_word-background/text/icon_hand");
handNode.opacity = 0;
const twinkle =(node) => {
cc.tween(node)
.to(0.5,{scale: node.initScale * 1.1})
.to(0.5,{scale: node.initScale})
.to(0.5,{scale: node.initScale * 1.1})
.to(0.5,{scale: node.initScale})
.call(()=>{
this._cantouch = true;
})
.start();
};
let textNode = cc.find("Canvas/content/bg_green/bg_word-background/text");
twinkle(textNode);
},
photoBtn: null,
initPhotoBtn() {
const canvas = cc.find('Canvas');
const photoBtn = this.getSprNode('btn_photo');
photoBtn.active = false;
canvas.addChild(photoBtn);
photoBtn.scale = this._mapScaleMin;
// photoBtn.x = 100;
photoBtn.y = -canvas.height / 2 + photoBtn.height / 2 * photoBtn.scaleY;
photoBtn.addComponent(cc.Button);
photoBtn.on('click', () => {
this.showPhotoTip();
})
this.photoBtn = photoBtn;
},
showPhotoBtn() {
if (!this.photoBtn) {
this.initPhotoBtn();
}
this.photoBtn.active = true;
},
hidePhotoBtn() {
if (!this.photoBtn) {
return;
}
this.photoBtn.active = false;
},
showPhotoTip() {
this.maskNode.active = true;
playAudio(this.audioOsmoTip.clip);
this.playAni('begin', 0)
this.playTipAni('normal', 1, () => {
console.log('play ani end');
this.playAni('normal', 0)
this.photoBtnClick();
})
},
photoBtnClick() {
console.log(' in photoBtnClick')
if (!window || !window.courseware) {
console.log('window.courseware not found')
return;
}
// window.courseware.openRecognitionCamera = this.getPhotoData.bind(this);
const openRecognitionCamera = window.courseware.openRecognitionCamera;
if (!openRecognitionCamera) {
console.log('openRecognitionCamera not found')
return;
}
openRecognitionCamera((data) => {
console.log('openRecognitionCamera data: ', data)
this.timer_2 = setTimeout(() => {
if ( typeof data == 'string' ) {
data = JSON.parse(data);
}
const {result} = data;
this.photoEnd(result);
this.maskNode.active = false;
}, 100);
})
},
photoEnd(data) {
......@@ -1630,31 +1134,6 @@ cc.Class({
return topTitleData && topLeftLetterData;
// const block = data?.block
// if (!block) {
// return false;
// }
// const letter = this.data.letter || 'Aa';
// const topLabelData = this.getPhotoLabelData(['or', 'cross', 't', 'out'], block);
// if (!topLabelData) {
// console.log('!topLabelData')
// return false;
// }
// this.topLabelData = topLabelData;
// let topLeftLetter = this.getTopLeftLetter(letter, block, topLabelData);
// this.topLeftLetter = topLeftLetter;
// console.log('topLabelData: ', topLabelData);
// console.log('topLeftLetter: ', topLeftLetter);
// return topLeftLetter;
},
......
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