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
c76ad82f
Commit
c76ad82f
authored
Sep 12, 2020
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix:增加不同皮肤背景图片设置,修复字体显示
parent
483860a2
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
229 additions
and
119 deletions
+229
-119
form.component.html
src/app/form/form.component.html
+101
-45
form.component.ts
src/app/form/form.component.ts
+23
-0
Title.ts
src/app/play/Title.ts
+1
-1
play.component.ts
src/app/play/play.component.ts
+104
-73
No files found.
src/app/form/form.component.html
View file @
c76ad82f
...
...
@@ -69,54 +69,110 @@
</div>
<div
id=
'listen-anchor'
>
<nz-divider
nzText=
"背景图片"
nzOrientation=
"left"
></nz-divider>
<nz-form-item>
<button
style=
"margin: 10px;"
nz-button
nzType=
"danger"
(
click
)="
clearBg
()"
>
<span>
清空
</span>
</button>
</nz-form-item>
<div
*
ngIf=
"item.skin == 'A'"
>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
2
"
>
左上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
lt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
lt_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
中上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
mt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
mt_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
右上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
rt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
rt_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
2
"
>
左中
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
lm_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
lm_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<div
nz-col
nzSpan=
"8"
></div>
<nz-form-label
[
nzSpan
]="
2
"
>
右中
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
rm_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
lm_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
2
"
>
左下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
lb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
lb_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
中下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
mb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
mb_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
右下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinA
.
rb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinA
,
'
rb_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
<div
*
ngIf=
"item.skin == 'B'"
>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
2
"
>
左上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
lt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
lt_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
lt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
lt_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
中上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
mt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
mt_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
mt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
mt_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
右上
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
rt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
rt_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
rt_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
rt_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
2
"
>
左中
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
lm_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
lm_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
lm_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
lm_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<div
nz-col
nzSpan=
"8"
></div>
<nz-form-label
[
nzSpan
]="
2
"
>
右中
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
l
m_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
l
m_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
r
m_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
r
m_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
2
"
>
左下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
lb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
lb_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
lb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
lb_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
中下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
mb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
mb_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
mb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
mb_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label
[
nzSpan
]="
2
"
>
右下
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
rb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
,
'
rb_pic_url
')"
></app-upload-image-with-preview>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
item
.
skinB
.
rb_pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
item
.
skinB
,
'
rb_pic_url
')"
></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div>
<div
*
ngFor=
"let data of item.exercisesArr;let j = index"
class=
"card-item"
style=
"padding: 0.5vw;"
>
<div
class=
"border"
>
...
...
src/app/form/form.component.ts
View file @
c76ad82f
...
...
@@ -23,6 +23,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
item
=
{};
this
.
item
.
skinA
=
{};
this
.
item
.
skinB
=
{};
this
.
item
.
title
=
this
.
getDefaultTile
();
this
.
item
.
exercisesArr
=
[];
...
...
@@ -36,6 +40,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
item
=
data
;
}
if
(
!
this
.
item
.
skinB
){
this
.
item
.
skinB
=
{};
}
if
(
!
this
.
item
.
skinA
){
this
.
item
.
skinA
=
{};
}
console
.
log
(
'
item:
'
,
this
.
item
);
this
.
init
();
this
.
changeDetectorRef
.
markForCheck
();
...
...
@@ -172,5 +184,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
save
();
}
}
clearBg
(){
if
(
this
.
item
.
skin
===
'
A
'
){
this
.
item
.
skinA
=
{};
}
else
{
this
.
item
.
skinB
=
{};
}
this
.
save
();
}
}
src/app/play/Title.ts
View file @
c76ad82f
...
...
@@ -44,7 +44,7 @@ export class Title {
part1
.
textAlign
=
'
left
'
;
part1
.
fontSize
=
48
;
part1
.
fontName
=
"
BRLNSDB
"
;
part1
.
fontColor
=
"
#
000000
"
;
part1
.
fontColor
=
"
#
ffffff
"
;
part1
.
refreshSize
();
part1
.
x
=
titePart1Bg
.
getBoundingBox
().
width
/
2
-
part1
.
getBoundingBox
().
width
-
13
*
mapScaleX
;
titePart1Bg
.
addChild
(
part1
);
...
...
src/app/play/play.component.ts
View file @
c76ad82f
...
...
@@ -452,7 +452,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
rawImages
.
set
(
url
,
url
);
}
addUrlToImage
(
url
,
key
){
if
(
!
key
){
key
=
url
;
}
this
.
rawImages
.
set
(
key
,
url
);
}
...
...
@@ -511,36 +517,46 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if
(
this
.
data
.
lt_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
lt_pic_url
);
const
loadBg
=
(
skin
,
skinType
)
=>
{
if
(
skin
.
lt_pic_url
)
{
this
.
addUrlToImage
(
skin
.
lt_pic_url
,
skinType
+
"
_
"
+
skin
.
lt_pic_url
);
}
if
(
skin
.
lm_pic_url
)
{
this
.
addUrlToImage
(
skin
.
lm_pic_url
,
skinType
+
"
_
"
+
skin
.
lm_pic_url
);
}
if
(
this
.
data
.
lm
_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
lm
_pic_url
);
if
(
skin
.
lb
_pic_url
)
{
this
.
addUrlToImage
(
skin
.
lb_pic_url
,
skinType
+
"
_
"
+
skin
.
lb
_pic_url
);
}
if
(
this
.
data
.
lb
_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
lb
_pic_url
);
if
(
skin
.
mt
_pic_url
)
{
this
.
addUrlToImage
(
skin
.
mt_pic_url
,
skinType
+
"
_
"
+
skin
.
mt
_pic_url
);
}
if
(
this
.
data
.
mt
_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
mt
_pic_url
);
if
(
skin
.
mb
_pic_url
)
{
this
.
addUrlToImage
(
skin
.
mb_pic_url
,
skinType
+
"
_
"
+
skin
.
mb
_pic_url
);
}
if
(
this
.
data
.
mb
_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
mb
_pic_url
);
if
(
skin
.
rt
_pic_url
)
{
this
.
addUrlToImage
(
skin
.
rt_pic_url
,
skinType
+
"
_
"
+
skin
.
rt
_pic_url
);
}
if
(
this
.
data
.
rt
_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
rt
_pic_url
);
if
(
skin
.
rm
_pic_url
)
{
this
.
addUrlToImage
(
skin
.
rm_pic_url
,
skinType
+
"
_
"
+
skin
.
rm
_pic_url
);
}
if
(
this
.
data
.
rm_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
rm_pic_url
);
if
(
skin
.
rb_pic_url
)
{
this
.
addUrlToImage
(
skin
.
rb_pic_url
,
skinType
+
"
_
"
+
skin
.
rb_pic_url
);
}
}
if
(
this
.
data
.
skinA
){
loadBg
(
this
.
data
.
skinA
,
'
A
'
);
}
if
(
this
.
data
.
rb_pic_url
)
{
this
.
addUrlToImages
(
this
.
data
.
rb_pic_url
);
if
(
this
.
data
.
skinB
)
{
loadBg
(
this
.
data
.
skinB
,
'
B
'
);
}
}
...
...
@@ -622,7 +638,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initBg
()
{
console
.
log
(
this
.
images
);
const
getPic
=
(
key
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
=>
{
const
pic
=
new
MySprite
();
pic
.
init
(
this
.
images
.
get
(
key
),
anchorX
,
anchorY
);
...
...
@@ -630,64 +646,79 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
skinRenderArr
.
push
(
pic
);
return
pic
;
}
const
initBg
=
(
skin
,
skinType
)
=>
{
console
.
log
(
skin
);
//左上
if
(
this
.
data
.
lt_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
lt_pic_url
,
0
,
0
);
if
(
skin
.
lt_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
lt_pic_url
,
0
,
0
);
pic
.
x
=
0
;
pic
.
y
=
0
;
}
//左中
if
(
this
.
data
.
lm_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
lm_pic_url
,
0
);
if
(
skin
.
lm_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
lm_pic_url
,
0
);
pic
.
x
=
0
;
pic
.
y
=
(
this
.
canvasHeight
-
pic
.
getBoundingBox
().
height
)
/
2
;
}
//左下
if
(
this
.
data
.
lb_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
lb_pic_url
,
0
,
1
);
if
(
skin
.
lb_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
lb_pic_url
,
0
,
1
);
pic
.
x
=
0
;
pic
.
y
=
this
.
canvasHeight
;
}
//中上
if
(
this
.
data
.
mt_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
lm
_pic_url
,
0.5
,
0
);
if
(
skin
.
mt_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
mt
_pic_url
,
0.5
,
0
);
pic
.
x
=
this
.
canvasWidth
/
2
;
pic
.
y
=
0
;
}
//中下
if
(
this
.
data
.
mb_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
mb_pic_url
,
0.5
,
1
);
if
(
skin
.
mb_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
mb_pic_url
,
0.5
,
1
);
pic
.
x
=
this
.
canvasWidth
/
2
;
pic
.
y
=
this
.
canvasHeight
;
}
//右上
if
(
this
.
data
.
rt_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
rt_pic_url
,
1
,
0
);
if
(
skin
.
rt_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
rt_pic_url
,
1
,
0
);
pic
.
x
=
this
.
canvasWidth
;
pic
.
y
=
0
;
}
//右中
if
(
this
.
data
.
rm_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
rm_pic_url
,
1
,
0.5
);
if
(
skin
.
rm_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
rm_pic_url
,
1
,
0.5
);
pic
.
x
=
this
.
canvasWidth
;
pic
.
y
=
this
.
canvasHeight
/
2
;
}
//右下
if
(
this
.
data
.
rb_pic_url
)
{
const
pic
=
getPic
(
this
.
data
.
rb_pic_url
,
1
,
1
);
if
(
skin
.
rb_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
rb_pic_url
,
1
,
1
);
pic
.
x
=
this
.
canvasWidth
;
pic
.
y
=
this
.
canvasHeight
;
}
}
if
(
this
.
data
.
skin
===
'
A
'
){
if
(
this
.
data
.
skinA
){
initBg
(
this
.
data
.
skinA
,
'
A
'
);
}
}
else
{
if
(
this
.
data
.
skinB
){
initBg
(
this
.
data
.
skinB
,
'
B
'
);
}
}
}
initBottomPart
()
{
const
listening
=
new
Listening
(
this
.
audioObj
[
'
listenAudio
'
],
this
.
images
);
...
...
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