Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
YM-42
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
YM-42
Commits
8ccb5248
Commit
8ccb5248
authored
Sep 18, 2020
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix:修复单词因浏览器放大缩小导致挤在一起的问题
parent
f0c7c95c
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
245 additions
and
109 deletions
+245
-109
Exercises.ts
src/app/play/Exercises.ts
+81
-101
Unit.ts
src/app/play/Unit.ts
+161
-0
play.component.ts
src/app/play/play.component.ts
+3
-8
No files found.
src/app/play/Exercises.ts
View file @
8ccb5248
...
...
@@ -3,7 +3,9 @@ import {
MySprite
,
ShapeRectNew
,
ShapeCircle
,
tweenChange
,
ShapeRect
ShapeRect
,
Lable2
,
LableText
}
from
'
./Unit
'
;
import
{
...
...
@@ -22,7 +24,7 @@ export class Exercises {
bg
;
textLabel
Arr
=
[]
;
textLabel
:
Lable2
;
bigCard
;
...
...
@@ -158,11 +160,11 @@ export class Exercises {
/**
* 设置x坐标
* @param textLabel
Arr
* @param textLabel
* @param totalWidth
* @param skin
*/
private
resetX
(
textLabel
Arr
,
totalWidth
,
skin
){
private
resetX
(
textLabel
,
totalWidth
,
skin
){
var
startX
=
0
;
...
...
@@ -173,33 +175,36 @@ export class Exercises {
startX
=
this
.
scaleX
*
100
;
}
for
(
let
i
=
0
;
i
<
textLabelArr
.
length
;
++
i
)
{
var
textLabel
=
textLabelArr
[
i
];
textLabel
.
x
=
startX
;
startX
+=
textLabel
.
getBoundingBox
().
width
;
}
textLabel
.
x
=
startX
;
}
private
addText
(
bg
:
ShapeRectNew
,
skin
)
{
let
totalWidth
=
0
;
let
text
=
new
Lable2
();
text
.
fontName
=
"
GOTHIC
"
;
let
fontSize
=
48
;
if
(
skin
==
'
B
'
){
fontSize
=
48
;
}
else
{
fontSize
=
56
;
}
text
.
fontSize
=
fontSize
;
let
textArr
=
new
Array
<
LableText
>
();
text
.
textArr
=
textArr
;
for
(
let
i
=
0
;
i
<
this
.
exercisesData
.
letters
.
length
;
++
i
)
{
var
letter
=
this
.
exercisesData
.
letters
[
i
];
//内容
const
text
=
new
Label
();
text
.
text
=
letter
.
val
;
text
.
fontName
=
"
GOTHIC
"
;
let
fontColor
=
""
;
let
labelText
=
new
LableText
();
labelText
.
val
=
letter
.
val
;
let
font
Size
=
48
;
let
font
Color
=
""
;
if
(
skin
==
'
B
'
)
{
if
(
letter
.
isColor
===
'
0
'
)
{
...
...
@@ -211,7 +216,7 @@ export class Exercises {
}
else
{
fontSize
=
56
;
if
(
letter
.
isColor
===
'
0
'
)
{
fontColor
=
"
#000000
"
;
}
...
...
@@ -219,21 +224,21 @@ export class Exercises {
fontColor
=
"
#cc2a2e
"
;
}
}
text
.
fontColor
=
fontColor
;
text
.
fontSize
=
fontSize
;
text
.
y
=
bg
.
height
/
2
;
this
.
textLabelArr
.
push
(
text
);
text
.
refreshSize
();
totalWidth
+=
text
.
getBoundingBox
().
width
;
bg
.
addChild
(
text
);
labelText
.
fontColor
=
fontColor
;
textArr
.
push
(
labelText
);
}
//计算最大的scale
totalWidth
=
this
.
setMaxScale
(
this
.
textLabelArr
,
bg
.
width
-
96
*
this
.
scaleX
);
text
.
refreshSize
();
text
.
y
=
bg
.
height
/
2
;
totalWidth
=
text
.
getBoundingBox
().
width
;
bg
.
addChild
(
text
);
text
.
setMaxSize
(
bg
.
width
-
96
*
this
.
scaleX
);
this
.
textLabel
=
text
;
this
.
resetX
(
t
his
.
textLabelArr
,
totalWidth
,
this
.
skin
);
this
.
resetX
(
t
ext
,
totalWidth
,
this
.
skin
);
}
private
initB
(
scaleX
=
1
,
scaleY
=
1
,
type
)
{
...
...
@@ -331,7 +336,7 @@ export class Exercises {
const
constantBg
=
new
ShapeRect
();
constantBg
.
setSize
(
width
,
height
);
constantBg
.
fillColor
=
'
#
FFFFFF
'
;
constantBg
.
fillColor
=
'
#
ffffff
'
;
constantBg
.
alpha
=
1
;
constantBg
.
visible
=
false
;
constantBg
.
x
=
20
*
parent
.
scaleX
;
...
...
@@ -346,18 +351,21 @@ export class Exercises {
const
addText
=
(
bg
:
ShapeRect
,
skin
,
fontSize
)
=>
{
let
totalWidth
=
0
;
let
text
=
new
Lable2
();
text
.
fontName
=
"
GOTHICB
"
;
let
textLabelArr
=
[];
text
.
fontSize
=
fontSize
;
let
textArr
=
new
Array
<
LableText
>
();
text
.
textArr
=
textArr
;
for
(
let
i
=
0
;
i
<
this
.
exercisesData
.
letters
.
length
;
++
i
)
{
let
letter
=
this
.
exercisesData
.
letters
[
i
];
var
letter
=
this
.
exercisesData
.
letters
[
i
];
let
labelText
=
new
LableText
();
labelText
.
val
=
letter
.
val
;
//内容
const
text
=
new
Label
();
text
.
text
=
letter
.
val
;
text
.
fontName
=
"
GOTHICB
"
;
let
fontColor
=
""
;
if
(
skin
==
'
B
'
)
{
...
...
@@ -367,8 +375,10 @@ export class Exercises {
else
{
fontColor
=
"
#cc2a2e
"
;
}
}
else
{
if
(
letter
.
isColor
===
'
0
'
)
{
fontColor
=
"
#000000
"
;
}
...
...
@@ -376,32 +386,20 @@ export class Exercises {
fontColor
=
"
#cc2a2e
"
;
}
}
text
.
fontColor
=
fontColor
;
text
.
fontSize
=
fontSize
;
text
.
y
=
bg
.
height
/
2
;
textLabelArr
.
push
(
text
);
text
.
refreshSize
();
totalWidth
+=
text
.
getBoundingBox
().
width
;
labelText
.
fontColor
=
fontColor
;
textArr
.
push
(
labelText
);
}
totalWidth
=
this
.
setMaxScale
(
textLabelArr
,
960
*
this
.
scaleX
);
var
startX
=
(
bg
.
width
-
totalWidth
)
/
2
;
for
(
let
i
=
0
;
i
<
textLabelArr
.
length
;
++
i
)
{
var
textLabel
=
textLabelArr
[
i
];
textLabel
.
x
=
startX
;
text
.
setMaxSize
(
960
*
this
.
scaleX
);
text
.
refreshSize
();
text
.
y
=
bg
.
height
/
2
;
let
totalWidth
=
text
.
getBoundingBox
().
width
;
text
.
x
=
(
bg
.
width
-
totalWidth
)
/
2
;
startX
+=
textLabel
.
getBoundingBox
().
width
;
bg
.
addChild
(
textLabel
);
bg
.
addChild
(
text
);
}
}
const
contentBg
=
this
.
getContentBg
(
parent
);
...
...
@@ -418,25 +416,22 @@ export class Exercises {
const
addText
=
(
bg
:
ShapeRect
,
skin
,
fontSize
)
=>
{
let
totalWidth
=
0
;
var
textLabelArr
=
[];
let
text
=
new
Lable2
();
text
.
fontName
=
"
GOTHICB
"
;
var
sHeight
=
0
;
text
.
fontSize
=
fontSize
;
let
height
=
0
;
let
textArr
=
new
Array
<
LableText
>
();
text
.
textArr
=
textArr
;
for
(
let
i
=
0
;
i
<
this
.
exercisesData
.
letters
.
length
;
++
i
)
{
var
letter
=
this
.
exercisesData
.
letters
[
i
];
//内容
const
text
=
new
Label
();
text
.
text
=
letter
.
val
;
let
labelText
=
new
LableText
();
labelText
.
val
=
letter
.
val
;
text
.
fontName
=
"
GOTHICB
"
;
let
fontColor
=
""
;
if
(
skin
==
'
B
'
)
{
if
(
letter
.
isColor
===
'
0
'
)
{
fontColor
=
"
#717071
"
;
...
...
@@ -453,34 +448,24 @@ export class Exercises {
fontColor
=
"
#cc2a2e
"
;
}
}
text
.
fontColor
=
fontColor
;
text
.
fontSize
=
fontSize
;
text
.
y
=
bg
.
height
-
text
.
getBoundingBox
().
height
/
2
-
40
*
this
.
scaleY
;
textLabelArr
.
push
(
text
);
text
.
refreshSize
();
totalWidth
+=
text
.
getBoundingBox
().
width
;
labelText
.
fontColor
=
fontColor
;
sHeight
=
text
.
getBoundingBox
().
height
;
height
=
text
.
height
;
textArr
.
push
(
labelText
);
}
totalWidth
=
this
.
setMaxScale
(
textLabelArr
,
(
960
-
90
)
*
this
.
scaleX
);
var
startX
=
(
bg
.
width
-
totalWidth
)
/
2
;
for
(
let
i
=
0
;
i
<
textLabelArr
.
length
;
++
i
)
{
var
textLabel
=
textLabelArr
[
i
];
text
.
setMaxSize
((
960
-
90
)
*
this
.
scaleX
);
text
.
refreshSize
();
text
.
y
=
bg
.
height
-
text
.
getBoundingBox
().
height
/
2
-
7
*
this
.
scaleY
;
let
totalWidth
=
text
.
getBoundingBox
().
width
;
text
.
x
=
(
bg
.
width
-
totalWidth
)
/
2
;
textLabel
.
x
=
startX
;
startX
+=
textLabel
.
getBoundingBox
().
width
;
bg
.
addChild
(
text
)
;
bg
.
addChild
(
textLabel
)
;
var
sHeight
=
text
.
getBoundingBox
().
height
;
}
let
height
=
text
.
height
;
return
{
height
:
height
,
sHeight
:
sHeight
};
}
...
...
@@ -662,17 +647,12 @@ export class Exercises {
var
totalWidth
=
0
for
(
let
i
=
0
;
i
<
this
.
textLabelArr
.
length
;
++
i
)
{
var
textLabel
=
this
.
textLabelArr
[
i
];
textLabel
.
setScaleXY
(
scale
);
this
.
textLabel
.
setScaleXY
(
scale
);
this
.
textLabel
.
refreshSize
();
textLabel
.
refreshSize
();
totalWidth
+=
textLabel
.
getBoundingBox
().
width
;
}
totalWidth
=
this
.
textLabel
.
getBoundingBox
().
width
;
this
.
resetX
(
this
.
textLabel
Arr
,
totalWidth
,
skin
);
this
.
resetX
(
this
.
textLabel
,
totalWidth
,
skin
);
}
playAudio
(
callback
=
null
)
{
...
...
src/app/play/Unit.ts
View file @
8ccb5248
...
...
@@ -645,6 +645,167 @@ export class Label extends MySprite {
}
export
class
LableText
{
private
_val
:
string
;
private
_fontColor
=
"
#000000
"
;
private
_underLine
:
boolean
=
false
;
set
val
(
val
){
this
.
_val
=
val
;
}
get
val
(){
return
this
.
_val
;
}
set
fontColor
(
fontColor
){
this
.
_fontColor
=
fontColor
;
}
get
fontColor
(){
return
this
.
_fontColor
;
}
set
underLine
(
underLine
){
this
.
_underLine
=
underLine
;
}
get
underLine
(){
return
this
.
_underLine
;
}
}
export
class
Lable2
extends
MySprite
{
textArr
:
Array
<
LableText
>
=
[];
fontName
=
'
Verdana
'
;
textAlign
=
'
left
'
;
fontSize
=
40
;
fontColor
=
'
#000000
'
;
fontWeight
=
900
;
_maxWidth
;
outline
=
0
;
outlineColor
=
'
#ffffff
'
;
_outlineFlag
=
false
;
_outLineWidth
;
_outLineColor
;
constructor
(
ctx
=
null
)
{
super
(
ctx
);
this
.
init
();
}
refreshSize
()
{
this
.
ctx
.
save
();
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
let
text
=
""
;
for
(
let
i
=
0
;
i
<
this
.
textArr
.
length
;
++
i
){
text
+=
this
.
textArr
[
i
].
val
;
}
this
.
_width
=
this
.
ctx
.
measureText
(
text
).
width
;
this
.
_height
=
this
.
fontSize
;
this
.
refreshAnchorOff
();
this
.
ctx
.
restore
();
}
setMaxSize
(
w
)
{
this
.
_maxWidth
=
w
;
this
.
refreshSize
();
if
(
this
.
width
>=
w
)
{
this
.
scaleX
*=
w
/
this
.
width
;
this
.
scaleY
*=
w
/
this
.
width
;
}
}
show
(
callBack
=
null
)
{
this
.
visible
=
true
;
if
(
this
.
alpha
>=
1
)
{
return
;
}
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
alpha
:
1
},
800
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
setOutline
(
width
=
5
,
color
=
'
#ffffff
'
)
{
this
.
_outlineFlag
=
true
;
this
.
_outLineWidth
=
width
;
this
.
_outLineColor
=
color
;
}
drawText
()
{
if
(
!
this
.
textArr
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
var
startX
=
0
;
for
(
let
i
=
0
;
i
<
this
.
textArr
.
length
;
++
i
){
var
text
=
this
.
textArr
[
i
];
if
(
this
.
_outlineFlag
)
{
this
.
ctx
.
lineWidth
=
this
.
_outLineWidth
;
this
.
ctx
.
strokeStyle
=
this
.
_outLineColor
;
this
.
ctx
.
strokeText
(
text
.
val
,
startX
,
0
);
}
this
.
ctx
.
fillStyle
=
text
.
fontColor
?
text
.
fontColor
:
this
.
fontColor
;
if
(
this
.
outline
>
0
)
{
this
.
ctx
.
lineWidth
=
this
.
outline
;
this
.
ctx
.
strokeStyle
=
this
.
outlineColor
;
this
.
ctx
.
strokeText
(
text
.
val
,
startX
,
0
);
}
this
.
ctx
.
fillText
(
text
.
val
,
startX
,
0
);
startX
+=
this
.
ctx
.
measureText
(
text
.
val
).
width
;
}
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawText
();
}
}
export
class
RichTextOld
extends
Label
{
textArr
=
[];
...
...
src/app/play/play.component.ts
View file @
8ccb5248
...
...
@@ -837,17 +837,12 @@ export class PlayComponent implements OnInit, OnDestroy {
//获取最小字体
for
(
let
i
=
0
;
i
<
this
.
exercisesArr
.
length
;
++
i
)
{
let
textLabel
Arr
=
this
.
exercisesArr
[
i
].
textLabelArr
;
let
textLabel
=
this
.
exercisesArr
[
i
].
textLabel
;
for
(
let
j
=
0
;
j
<
textLabelArr
.
length
;
++
j
)
{
let
textLabel
=
textLabelArr
[
j
];
if
(
minScale
>
textLabel
.
scaleX
)
{
minScale
=
textLabel
.
scaleX
;
}
if
(
minScale
>
textLabel
.
scaleX
)
{
minScale
=
textLabel
.
scaleX
;
}
}
for
(
let
i
=
0
;
i
<
this
.
exercisesArr
.
length
;
++
i
)
{
...
...
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