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

feat:完成模板开发

parent 25544071
......@@ -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 {
data;
_rowY = [];
constructor(ctx?: any) {
super(ctx);
......@@ -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';
for (let b = 0; b < row.length; b++) {
......@@ -1295,6 +1298,23 @@ export class RichText extends Label {
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;
}
}
......
const defaultVal = {
"title":{
"part1":"C",
"part2":"Read and point",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/ef597f87e534ab2c73f4f9ed34eb26fa.mp3"
},
"hotZoneItemArr":[
{
"index":0,
"text":"1",
"itemType":"rect",
"fontSize":50,
"fontName":"BRLNSR_1",
"fontColor":"#8f3758",
"fontScale":0.9892183288409704,
"imgScale":1,
"mapScale":0.9892183288409704,
"key":"key_1618043224370",
"rect":{
"x":83.5,
"y":48.89,
"width":50,
"height":50
}
},
{
"index":1,
"text":"2",
"itemType":"rect",
"fontSize":50,
"fontName":"BRLNSR_1",
"fontColor":"#8f3758",
"fontScale":0.9892183288409704,
"imgScale":1,
"mapScale":0.9892183288409704,
"key":"key_1618043230051",
"rect":{
"x":272.5,
"y":88.89,
"width":50,
"height":50
}
},
{
"index":2,
"text":"3",
"itemType":"rect",
"fontSize":50,
"fontName":"BRLNSR_1",
"fontColor":"#8f3758",
"fontScale":0.9892183288409704,
"imgScale":1,
"mapScale":0.9892183288409704,
"key":"key_1618043235458",
"rect":{
"x":213.5,
"y":212.89,
"width":50,
"height":50
}
},
{
"index":3,
"text":"4",
"itemType":"rect",
"fontSize":50,
"fontName":"BRLNSR_1",
"fontColor":"#8f3758",
"fontScale":0.9892183288409704,
"imgScale":1,
"mapScale":0.9892183288409704,
"key":"key_1618043240200",
"rect":{
"x":279.5,
"y":392.89,
"width":50,
"height":50
}
},
{
"index":4,
"text":"5",
"itemType":"rect",
"fontSize":50,
"fontName":"BRLNSR_1",
"fontColor":"#8f3758",
"fontScale":0.9892183288409704,
"imgScale":1,
"mapScale":0.9892183288409704,
"key":"key_1618145825155",
"rect":{
"x":142.5,
"y":329.89,
"width":50,
"height":50
}
}
],
"bgItem":{
"url":"http://staging-teach.cdn.ireadabc.com/a886b150e8792d433ced3672f4df7dfb.jpg",
"rect":{
"x":0,
"y":13.610546874999983,
"width":367,
"height":507.77890625000003
}
},
"sentenceArr":[
{
"renderTo":"key_1618043224370",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/f95fd3997cdd67abd51a1ab45efd855d.mp3",
"val":"He likes ham.",
"letterArr":[
{
"fontColor":"#000000",
"val":"H"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#000000",
"val":"l"
},
{
"fontColor":"#000000",
"val":"i"
},
{
"fontColor":"#000000",
"val":"k"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":"s"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#c8171e",
"val":"h"
},
{
"fontColor":"#c8171e",
"val":"a"
},
{
"fontColor":"#c8171e",
"val":"m"
},
{
"fontColor":"#000000",
"val":"."
}
]
},
{
"renderTo":"key_1618043230051",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3",
"val":"He likes ham.",
"letterArr":[
{
"fontColor":"#000000",
"val":"H"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#000000",
"val":"l"
},
{
"fontColor":"#000000",
"val":"i"
},
{
"fontColor":"#000000",
"val":"k"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":"s"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#c8171e",
"val":"h"
},
{
"fontColor":"#c8171e",
"val":"a"
},
{
"fontColor":"#c8171e",
"val":"m"
},
{
"fontColor":"#000000",
"val":"."
}
]
},
{
"renderTo":"key_1618043235458",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/8b5ecca5d4509e1b8a7e81e69d8db615.mp3",
"val":"He likes ham.",
"letterArr":[
{
"fontColor":"#000000",
"val":"H"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#000000",
"val":"l"
},
{
"fontColor":"#000000",
"val":"i"
},
{
"fontColor":"#000000",
"val":"k"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":"s"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#c8171e",
"val":"h"
},
{
"fontColor":"#c8171e",
"val":"a"
},
{
"fontColor":"#c8171e",
"val":"m"
},
{
"fontColor":"#000000",
"val":"."
}
]
},
{
"renderTo":"key_1618043240200",
"audioUrl":"http://staging-teach.cdn.ireadabc.com/30621df106455523573e3871a5a5c598.mp3",
"val":"He likes ham.",
"letterArr":[
{
"fontColor":"#000000",
"val":"H"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#000000",
"val":"l"
},
{
"fontColor":"#000000",
"val":"i"
},
{
"fontColor":"#000000",
"val":"k"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":"s"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#c8171e",
"val":"h"
},
{
"fontColor":"#c8171e",
"val":"a"
},
{
"fontColor":"#c8171e",
"val":"m"
},
{
"fontColor":"#000000",
"val":"."
}
]
},
{
"renderTo":"key_1618145825155",
"letterArr":[
{
"fontColor":"#000000",
"val":"H"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#000000",
"val":"l"
},
{
"fontColor":"#000000",
"val":"i"
},
{
"fontColor":"#000000",
"val":"k"
},
{
"fontColor":"#000000",
"val":"e"
},
{
"fontColor":"#000000",
"val":"s"
},
{
"fontColor":"#000000",
"val":" "
},
{
"fontColor":"#000000",
"val":"h"
},
{
"fontColor":"#000000",
"val":"a"
},
{
"fontColor":"#000000",
"val":"m"
},
{
"fontColor":"#000000",
"val":"."
}
],
"val":"He likes ham."
}
],
"listenAudioUrl":"http://staging-teach.cdn.ireadabc.com/919b2c150b41b3306869ebe78ecb70b3.mp3",
"titleVal":"A Smart Fox"
};
export {defaultVal}
\ No newline at end of file
......@@ -16,6 +16,7 @@ import { Listening } from './Listening';
import { Title } from './Title';
import { Index } from './Index';
import { Scrollbar } from './ScrollBar';
import { defaultVal } from './defaultValue';
......@@ -80,7 +81,7 @@ export class PlayComponent implements OnInit, OnDestroy {
sentenceArr = [];
startIndex = 0;
curRowIndex = 0;
sentenceBg: ShapeRect;
......@@ -103,7 +104,10 @@ export class PlayComponent implements OnInit, OnDestroy {
if (data && typeof data == 'object') {
this.data = data;
}
console.log('data:', data);
else{
this.data = defaultVal;
}
//console.log('data:', JSON.stringify(data));
// 初始化 各事件监听
this.initListener();
......@@ -528,7 +532,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.sentenceArr = [];
this.startIndex = 0;
this.curRowIndex = 0;
this.posArr = [];
}
......@@ -704,15 +708,10 @@ export class PlayComponent implements OnInit, OnDestroy {
text.refreshSize();
text.y = y + text.getBoundingBox().height / 2;
text.x = 0;
text.alpha = 0;
text.data = sentence;
//如果超过视窗,则不显示
if (text.y > viewHight) {
//text.visible = false;
}
bg.addChild(text);
text.alpha = 0;
text.visible = false;
this.sentenceBg.addChild(text);
this.sentenceArr.push(text);
......@@ -726,7 +725,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let scrollbar = new Scrollbar();
scrollbar.init(this.mapScale, this.mapScale, viewHight, totalHeight - dH, 14);
scrollbar.showScrollbar();
//scrollbar.hide();
scrollbar.hide();
scrollbar.bg.x = this.canvasWidth / 2 + 161 * this.mapScale;
scrollbar.bg.y = this.canvasHeight / 2 - 231 * this.mapScale;
this.renderArr.push(scrollbar.bg);
......@@ -793,35 +792,8 @@ export class PlayComponent implements OnInit, OnDestroy {
let dis = this.my - this.scrollbar.touchY;
this.scrollbar.drag(dis, (dis) => {
let d = this.initY - (this.startY - dis);
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{
}
this.sentenceBg.y = this.startY - dis;
this.setShowRow();
});
}
......@@ -885,16 +857,81 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curAudio = this.playAudio(sentence.audioUrl, true);
let spr;
for(let i = 0; i < this.sentenceArr.length; ++ i){
let sentenceSpr = this.sentenceArr[i];
if(sentenceSpr.data.renderTo == sentence.renderTo){
sentenceSpr.alpha = 1;
spr = sentenceSpr;
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