Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
YM5-17
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
YM5-17
Commits
178c75fb
Commit
178c75fb
authored
Apr 13, 2021
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:完成模板开发
parent
25544071
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
522 additions
and
43 deletions
+522
-43
Scrollbar.ts
src/app/play/Scrollbar.ts
+14
-0
Unit.ts
src/app/play/Unit.ts
+21
-1
defaultValue.js
src/app/play/defaultValue.js
+408
-0
play.component.ts
src/app/play/play.component.ts
+79
-42
No files found.
src/app/play/Scrollbar.ts
View file @
178c75fb
...
...
@@ -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
src/app/play/Unit.ts
View file @
178c75fb
...
...
@@ -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
;
}
}
...
...
src/app/play/defaultValue.js
0 → 100644
View file @
178c75fb
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
src/app/play/play.component.ts
View file @
178c75fb
...
...
@@ -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
=
[];
start
Index
=
0
;
curRow
Index
=
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
.
start
Index
=
0
;
this
.
curRow
Index
=
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
){
s
entenceSpr
.
alpha
=
1
;
s
pr
=
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
;
}
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment