Commit 178c75fb authored by Chen Jiping's avatar Chen Jiping

feat:完成模板开发

parent 25544071
...@@ -148,4 +148,18 @@ export class Scrollbar { ...@@ -148,4 +148,18 @@ export class Scrollbar {
} }
} }
setOffset(dis){
let newY = this.scrollbar.y + dis / this.scale;
if (newY < this.scrollbarInitY) {
newY = this.scrollbarInitY;
}
else if (newY > this.scrollbarInitY + this.canMoveDis) {
newY = this.scrollbarInitY + this.canMoveDis;
}
this.scrollbar.y = newY;
}
} }
\ No newline at end of file
...@@ -1103,6 +1103,8 @@ export class RichText extends Label { ...@@ -1103,6 +1103,8 @@ export class RichText extends Label {
data; data;
_rowY = [];
constructor(ctx?: any) { constructor(ctx?: any) {
super(ctx); super(ctx);
...@@ -1264,7 +1266,8 @@ export class RichText extends Label { ...@@ -1264,7 +1266,8 @@ export class RichText extends Label {
} }
} }
x = 0;this.ctx.font = `${this.fontSize}px ${this.boldFontName}`; x = 0;
this.ctx.font = `${this.fontSize}px ${this.boldFontName}`;
// this.ctx.fillStyle = '#ff7600'; // this.ctx.fillStyle = '#ff7600';
for (let b = 0; b < row.length; b++) { for (let b = 0; b < row.length; b++) {
...@@ -1295,6 +1298,23 @@ export class RichText extends Label { ...@@ -1295,6 +1298,23 @@ export class RichText extends Label {
this.drawText(); this.drawText();
} }
get row(){
return this.getContent();
}
get rowY(){
if(this._rowY.length == 0){
let row = this.getContent();
const disH = (this.fontSize + this.disH);
for (let b = 0; b < row.length; b++) {
this._rowY.push(b * disH);
}
}
return this._rowY;
}
} }
......
This diff is collapsed.
...@@ -16,6 +16,7 @@ import { Listening } from './Listening'; ...@@ -16,6 +16,7 @@ import { Listening } from './Listening';
import { Title } from './Title'; import { Title } from './Title';
import { Index } from './Index'; import { Index } from './Index';
import { Scrollbar } from './ScrollBar'; import { Scrollbar } from './ScrollBar';
import { defaultVal } from './defaultValue';
...@@ -80,7 +81,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -80,7 +81,7 @@ export class PlayComponent implements OnInit, OnDestroy {
sentenceArr = []; sentenceArr = [];
startIndex = 0; curRowIndex = 0;
sentenceBg: ShapeRect; sentenceBg: ShapeRect;
...@@ -103,7 +104,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -103,7 +104,10 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') { if (data && typeof data == 'object') {
this.data = data; this.data = data;
} }
console.log('data:', data); else{
this.data = defaultVal;
}
//console.log('data:', JSON.stringify(data));
// 初始化 各事件监听 // 初始化 各事件监听
this.initListener(); this.initListener();
...@@ -528,7 +532,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -528,7 +532,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.sentenceArr = []; this.sentenceArr = [];
this.startIndex = 0; this.curRowIndex = 0;
this.posArr = []; this.posArr = [];
} }
...@@ -704,15 +708,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -704,15 +708,10 @@ export class PlayComponent implements OnInit, OnDestroy {
text.refreshSize(); text.refreshSize();
text.y = y + text.getBoundingBox().height / 2; text.y = y + text.getBoundingBox().height / 2;
text.x = 0; text.x = 0;
text.alpha = 0;
text.data = sentence; text.data = sentence;
text.alpha = 0;
//如果超过视窗,则不显示 text.visible = false;
if (text.y > viewHight) { this.sentenceBg.addChild(text);
//text.visible = false;
}
bg.addChild(text);
this.sentenceArr.push(text); this.sentenceArr.push(text);
...@@ -726,7 +725,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -726,7 +725,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let scrollbar = new Scrollbar(); let scrollbar = new Scrollbar();
scrollbar.init(this.mapScale, this.mapScale, viewHight, totalHeight - dH, 14); scrollbar.init(this.mapScale, this.mapScale, viewHight, totalHeight - dH, 14);
scrollbar.showScrollbar(); scrollbar.showScrollbar();
//scrollbar.hide(); scrollbar.hide();
scrollbar.bg.x = this.canvasWidth / 2 + 161 * this.mapScale; scrollbar.bg.x = this.canvasWidth / 2 + 161 * this.mapScale;
scrollbar.bg.y = this.canvasHeight / 2 - 231 * this.mapScale; scrollbar.bg.y = this.canvasHeight / 2 - 231 * this.mapScale;
this.renderArr.push(scrollbar.bg); this.renderArr.push(scrollbar.bg);
...@@ -793,35 +792,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -793,35 +792,8 @@ export class PlayComponent implements OnInit, OnDestroy {
let dis = this.my - this.scrollbar.touchY; let dis = this.my - this.scrollbar.touchY;
this.scrollbar.drag(dis, (dis) => { this.scrollbar.drag(dis, (dis) => {
this.sentenceBg.y = this.startY - dis;
let d = this.initY - (this.startY - dis); this.setShowRow();
let dH = 24 * this.mapScale;
let tH = 0;
if(dis > 0){
for(let i = 0; i < this.sentenceArr.length; ++ i){
let sentence = this.sentenceArr[i];
tH += sentence.getBoundingBox().height + dH;
if(tH < d){
sentence.alpha = 0;
this.sentenceBg.y = this.startY - dis;
}
else{
break;
}
}
}
else{
}
}); });
} }
...@@ -885,16 +857,81 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -885,16 +857,81 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curAudio = this.playAudio(sentence.audioUrl, true); this.curAudio = this.playAudio(sentence.audioUrl, true);
let spr;
for(let i = 0; i < this.sentenceArr.length; ++ i){ for(let i = 0; i < this.sentenceArr.length; ++ i){
let sentenceSpr = this.sentenceArr[i]; let sentenceSpr = this.sentenceArr[i];
if(sentenceSpr.data.renderTo == sentence.renderTo){ if(sentenceSpr.data.renderTo == sentence.renderTo){
sentenceSpr.alpha = 1; spr = sentenceSpr;
break; break;
} }
} }
this.showSentence(spr);
}
private showSentence(sentence){
if(!sentence){
return;
}
let y = sentence.getBoundingBox().y;
let h = sentence.getBoundingBox().height;
let offsetY = Math.floor(y - h / 2);
sentence.alpha = 1;
let dH = 24 * this.mapScale;
//如果句子不在可视窗口,则进行定位滚动
if(offsetY < Math.floor(this.initY) || offsetY > Math.floor(this.initY + this.sentenceBg.height)){
let dis = 0;
if(offsetY < Math.floor(this.initY)){
dis = Math.floor(this.initY) - offsetY;
}
else if(offsetY > Math.floor(this.initY + this.sentenceBg.height)){
dis = -(offsetY - Math.floor(this.initY + this.sentenceBg.height) + h + dH);
}
this.sentenceBg.y += dis;
this.scrollbar.setOffset(-dis);
this.scrollbar.show();
this.startY = this.sentenceBg.y;
}
this.setShowRow();
}
private setShowRow() {
for(let i = 0; i < this.sentenceArr.length; ++ i){
let sentence = this.sentenceArr[i];
let y = sentence.getBoundingBox().y;
let h = sentence.getBoundingBox().height;
let offsetY = Math.floor(y - h / 2);
if(offsetY < Math.floor(this.initY) || (offsetY + h) > Math.floor(this.initY + this.sentenceBg.height)){
sentence.visible = false;
}
else{
sentence.visible = true;
}
}
} }
} }
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