Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
YM5-3
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-3
Commits
5f34dae4
Commit
5f34dae4
authored
Jan 10, 2021
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:增加背景图片
parent
b09336cf
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
226 additions
and
0 deletions
+226
-0
form.component.html
src/app/form/form.component.html
+69
-0
form.component.ts
src/app/form/form.component.ts
+21
-0
play.component.ts
src/app/play/play.component.ts
+136
-0
No files found.
src/app/form/form.component.html
View file @
5f34dae4
...
...
@@ -109,6 +109,75 @@
</nz-form-item>
</div>
</div>
<div
nz-row
>
<div
nz-col
[
nzSpan
]="
20
"
nzOffset=
"2"
>
<nz-card
nzTitle=
"背景图片"
[
nzExtra
]="
bgTemplate
"
>
<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
,
'
rm_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>
</nz-card>
<ng-template
#
bgTemplate
>
<button
style=
"margin: 10px;"
nz-button
nzType=
"danger"
(
click
)="
clearBg
()"
>
<span>
清空
</span>
</button>
</ng-template>
</div>
</div>
<div
nz-row
>
<div
*
ngFor=
"let zone of item.zoneArr; let i = index"
style=
"padding: 0.5vw;"
>
<div
nz-col
[
nzSpan
]="
20
"
nzOffset=
"2"
>
...
...
src/app/form/form.component.ts
View file @
5f34dae4
...
...
@@ -26,6 +26,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
item
=
{};
this
.
item
.
skinA
=
{};
this
.
item
.
skin
=
'
A
'
;
this
.
item
.
title
=
getDefaultTile
();
this
.
item
.
letterArr
=
[];
...
...
@@ -73,6 +77,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
item
.
letterArr
=
[];
}
if
(
!
this
.
item
.
skin
){
this
.
item
.
skin
=
'
A
'
;
}
if
(
!
this
.
item
.
skinA
)
{
this
.
item
.
skinA
=
{};
}
if
(
!
this
.
item
.
zoneArr
)
{
this
.
item
.
zoneArr
=
[];
}
...
...
@@ -202,6 +214,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
clearBg
()
{
if
(
this
.
item
.
skin
===
'
A
'
)
{
this
.
item
.
skinA
=
{};
}
this
.
save
();
}
/**
* 储存数据
...
...
src/app/play/play.component.ts
View file @
5f34dae4
...
...
@@ -441,6 +441,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
rawImages
.
set
(
url
,
url
);
}
addUrlToImage
(
url
,
key
)
{
if
(
!
key
)
{
key
=
url
;
}
this
.
rawImages
.
set
(
key
,
url
);
}
...
...
@@ -470,6 +477,14 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
data
.
letterArr
=
[];
}
if
(
!
this
.
data
.
skin
){
this
.
data
.
skin
=
'
A
'
;
}
if
(
!
this
.
data
.
skinA
)
{
this
.
data
.
skinA
=
{};
}
if
(
!
this
.
data
.
zoneArr
)
{
this
.
data
.
zoneArr
=
[];
}
...
...
@@ -512,6 +527,43 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg
()
{
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
(
skin
.
lb_pic_url
)
{
this
.
addUrlToImage
(
skin
.
lb_pic_url
,
skinType
+
"
_
"
+
skin
.
lb_pic_url
);
}
if
(
skin
.
mt_pic_url
)
{
this
.
addUrlToImage
(
skin
.
mt_pic_url
,
skinType
+
"
_
"
+
skin
.
mt_pic_url
);
}
if
(
skin
.
mb_pic_url
)
{
this
.
addUrlToImage
(
skin
.
mb_pic_url
,
skinType
+
"
_
"
+
skin
.
mb_pic_url
);
}
if
(
skin
.
rt_pic_url
)
{
this
.
addUrlToImage
(
skin
.
rt_pic_url
,
skinType
+
"
_
"
+
skin
.
rt_pic_url
);
}
if
(
skin
.
rm_pic_url
)
{
this
.
addUrlToImage
(
skin
.
rm_pic_url
,
skinType
+
"
_
"
+
skin
.
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
'
);
}
}
...
...
@@ -604,6 +656,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initView
()
{
this
.
initBg
();
this
.
initTitle
();
...
...
@@ -614,6 +667,89 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
initExercises
();
}
initBg
()
{
const
getPic
=
(
key
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
=>
{
const
pic
=
new
MySprite
();
pic
.
init
(
this
.
images
.
get
(
key
),
anchorX
,
anchorY
);
pic
.
setScaleXY
(
this
.
mapScale
);
this
.
renderArr
.
push
(
pic
);
return
pic
;
}
const
initBg
=
(
skin
,
skinType
)
=>
{
//左上
if
(
skin
.
lt_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
lt_pic_url
,
0
,
0
);
pic
.
x
=
0
;
pic
.
y
=
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
(
skin
.
lb_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
lb_pic_url
,
0
,
1
);
pic
.
x
=
0
;
pic
.
y
=
this
.
canvasHeight
;
}
//中上
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
(
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
(
skin
.
rt_pic_url
)
{
const
pic
=
getPic
(
skinType
+
'
_
'
+
skin
.
rt_pic_url
,
1
,
0
);
pic
.
x
=
this
.
canvasWidth
;
pic
.
y
=
0
;
}
//右中
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
(
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