Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
T_FT_01
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
T_FT_01
Commits
8092cd0a
Commit
8092cd0a
authored
Nov 02, 2020
by
Chen Jiping
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix:修复动画展示,采用龙骨动画
parent
64764173
Changes
4
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
297 additions
and
190 deletions
+297
-190
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+23
-18
form.component.html
form/src/app/form/form.component.html
+51
-17
form.component.ts
form/src/app/form/form.component.ts
+118
-18
Scene.js
play/assets/tmpGame/script/Scene.js
+105
-137
No files found.
form/src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
8092cd0a
...
@@ -14,7 +14,7 @@ import {Subject} from 'rxjs';
...
@@ -14,7 +14,7 @@ import {Subject} from 'rxjs';
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
}
from
'
./Unit
'
;
import
{
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
}
from
'
./Unit
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
getMinScale
}
from
"
../../play/Unit
"
;
import
{
getMinScale
,
ShapeRect
}
from
"
../../play/Unit
"
;
import
{
tar
}
from
"
compressing
"
;
import
{
tar
}
from
"
compressing
"
;
...
@@ -396,14 +396,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -396,14 +396,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
else
{
}
else
{
this
.
refreshBackground
(()
=>
{
this
.
refreshBackground
(()
=>
{
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if
(
!
this
.
hotZoneItemArr
)
{
if
(
!
this
.
hotZoneItemArr
)
{
this
.
hotZoneItemArr
=
[];
this
.
hotZoneItemArr
=
[];
}
else
{
}
else
{
...
@@ -411,6 +403,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -411,6 +403,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
refreshBg
();
refreshBg
();
});
});
}
}
...
@@ -447,8 +441,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -447,8 +441,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
data
.
rect
.
width
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
//
data.rect.x += curBgRect.x;
data
.
rect
.
y
+=
curBgRect
.
y
;
//
data.rect.y += curBgRect.y;
// img['picItem'] = this.getPicItem(img, data);
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
// img['audio_url'] = arr[i].audio_url;
...
@@ -517,9 +511,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -517,9 +511,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData
()
{
initData
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
mapScale
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
this
.
renderArr
=
[];
this
.
renderArr
=
[];
this
.
bg
=
null
;
this
.
bg
=
null
;
...
@@ -528,6 +520,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -528,6 +520,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
initCtx
()
{
initCtx
()
{
let
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
let
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
canvasWidth
=
canvasWidth
;
this
.
canvasHeight
=
canvasHeight
;
console
.
log
(
canvasWidth
,
canvasHeight
);
const
sx
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
const
sy
=
this
.
canvasHeight
/
this
.
canvasBaseH
;
const
s
=
Math
.
min
(
sx
,
sy
);
this
.
mapScale
=
s
;
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
...
@@ -890,15 +894,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -890,15 +894,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
fontColor
:
this
.
hotZoneFontObj
.
color
,
fontColor
:
this
.
hotZoneFontObj
.
color
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
imgScale
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
scaleX
:
1
,
imgScale
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
scaleX
:
1
,
mapScale
:
this
.
mapScale
mapScale
:
this
.
mapScale
,
picX
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
x
:
0
,
picY
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
y
:
0
};
};
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
hotZoneItem
[
'
rect
'
].
x
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
x
-
bgItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
x
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
y
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
y
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
height
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
height
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
height
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
height
)
*
100
)
/
100
;
hotZoneItemArr
.
push
(
hotZoneItem
);
hotZoneItemArr
.
push
(
hotZoneItem
);
}
}
...
...
form/src/app/form/form.component.html
View file @
8092cd0a
...
@@ -59,27 +59,15 @@
...
@@ -59,27 +59,15 @@
<app-custom-hot-zone
[
bgItem
]="
item
.
bg
"
[
hotZoneItemArr
]="
data
.
hotZoneItemArr
"
<app-custom-hot-zone
[
bgItem
]="
item
.
bg
"
[
hotZoneItemArr
]="
data
.
hotZoneItemArr
"
(
save
)="
saveData
($
event
,
i
)"
></app-custom-hot-zone>
(
save
)="
saveData
($
event
,
i
)"
></app-custom-hot-zone>
<nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
>
序列帧
动画
</nz-form-label>
<nz-form-label
[
nzSpan
]="
6
"
>
动画
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<nz-form-control
[
nzSpan
]="
6
"
>
<button
nz-button
nzType=
"dashed"
class=
"add-btn"
id=
"add-btn"
<button
nz-button
nzType=
"dashed"
(
click
)="
setAnimaBtnClick
(
data
)"
nzSize=
"large"
style=
"margin-top: 10px"
>
(
click
)="
addFrame
(
data
,
'
frames
')"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
添加
配置龙骨动画
</button>
</button>
</nz-form-control>
</nz-form-control>
</nz-form-item>
</nz-form-item>
<nz-form-item>
<nz-form-control
[
nzOffset
]="
2
"
[
nzSpan
]="
18
"
>
<div
nz-col
[
nzSpan
]="
6
"
*
ngFor=
"let frame of data.frames;let m = index"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
frame
.
picUrl
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
frame
,
'
picUrl
')"
>
</app-upload-image-with-preview>
<button
style=
"margin: 10px;"
nz-button
nzType=
"danger"
(
click
)="
delFrame
(
data
,
'
frames
',
m
)"
>
<span>
删除
</span>
</button>
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-item>
<nz-form-label
[
nzSpan
]="
6
"
>
备选答案
</nz-form-label>
<nz-form-label
[
nzSpan
]="
6
"
>
备选答案
</nz-form-label>
<nz-form-control
[
nzSpan
]="
6
"
>
<nz-form-control
[
nzSpan
]="
6
"
>
...
@@ -135,4 +123,50 @@
...
@@ -135,4 +123,50 @@
</div>
</div>
</div>
</div>
</div>
</div>
<!--龙骨面板-->
<nz-modal
[(
nzVisible
)]="
animaPanelVisible
"
nzTitle=
"配置资源文件"
(
nzOnCancel
)="
animaPanelCancel
()"
(
nzOnOk
)="
animaPanelOk
()"
nzOkText=
"保存"
>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 ske_json 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept=
"application/json"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
skeJsonHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isSkeJsonLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"skeJsonData['name']"
style=
"margin-left: 10px"
><u>
{{skeJsonData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 tex_json 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept=
"application/json"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
texJsonHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isTexJsonLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"texJsonData['name']"
style=
"margin-left: 10px"
><u>
{{texJsonData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 tex_png 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept =
"image/*"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
texPngHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isTexPngLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"texPngData['name']"
style=
"margin-left: 10px"
><u>
{{texPngData['name']}}
</u></span>
</div>
</nz-modal>
</div>
</div>
\ No newline at end of file
form/src/app/form/form.component.ts
View file @
8092cd0a
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
JsonPipe
}
from
'
@angular/common
'
;
import
{
JsonPipe
}
from
'
@angular/common
'
;
import
{
Answer
,
Frame
,
getDefaultExercises
,
getDefaultItem
}
from
'
../bean/ObjBean
'
;
import
{
Answer
,
Frame
,
getDefaultExercises
,
getDefaultItem
}
from
'
../bean/ObjBean
'
;
import
{
NzMessageService
}
from
'
ng-zorro-antd
'
;
@
Component
({
@
Component
({
selector
:
'
app-form
'
,
selector
:
'
app-form
'
,
...
@@ -14,10 +14,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -14,10 +14,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveKey
=
"
FT-01
"
;
saveKey
=
"
FT-01
"
;
// 储存对象
// 储存对象
item
;
item
;
isShowPicPanel
=
false
;
curGroup
=
null
;
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
skeJsonData
=
{};
texJsonData
=
{};
texPngData
=
{};
animaPanelVisible
=
false
;
isSkeJsonLoading
=
false
;
isTexJsonLoading
=
false
;
isTexPngLoading
=
false
;
uploadUrl
;
uploadData
;
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
,
private
nzMessageService
:
NzMessageService
)
{
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
window
[
'
air
'
].
getUploadCallback
=
(
url
,
data
)
=>
{
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
};
}
}
ngOnInit
()
{
ngOnInit
()
{
...
@@ -135,29 +152,112 @@ onAudioUploadSuccess(e, item, key) {
...
@@ -135,29 +152,112 @@ onAudioUploadSuccess(e, item, key) {
}
}
}
}
addFrame
(
exercises
,
key
){
let
frame
=
new
Frame
();
exercises
[
key
]
=
[...
exercises
[
key
],
frame
];
saveData
(
e
,
i
)
{
console
.
log
(
'
savedata e:
'
,
e
);
this
.
item
.
bg
=
e
.
bgItem
;
this
.
item
.
exercisesArr
[
i
].
hotZoneItemArr
=
e
.
hotZoneItemArr
;
this
.
save
();
this
.
save
();
}
handleOk
()
{
this
.
isShowPicPanel
=
false
;
}
}
delFrame
(
exercises
,
key
,
index
)
{
handleCancel
()
{
if
(
index
!==
-
1
)
{
this
.
isShowPicPanel
=
false
;
exercises
[
key
].
splice
(
index
,
1
);
exercises
[
key
]
=
[...
exercises
[
key
]];
this
.
save
();
}
}
}
saveData
(
e
,
i
)
{
setAnimaBtnClick
(
group
)
{
console
.
log
(
'
savedata e:
'
,
e
);
this
.
item
.
bg
=
e
.
bgItem
;
console
.
log
(
'
in setAnimaBtnClick
'
);
this
.
item
.
exercisesArr
[
i
].
hotZoneItemArr
=
e
.
hotZoneItemArr
;
this
.
curGroup
=
group
;
const
{
skeJsonData
,
texJsonData
,
texPngData
}
=
group
;
this
.
skeJsonData
=
skeJsonData
||
{};
this
.
texJsonData
=
texJsonData
||
{};
this
.
texPngData
=
texPngData
||
{};
this
.
animaPanelVisible
=
true
;
this
.
refresh
();
}
animaPanelCancel
()
{
this
.
animaPanelVisible
=
false
;
}
animaPanelOk
()
{
this
.
animaPanelVisible
=
false
;
this
.
setItemDragonBoneData
(
this
.
curGroup
);
this
.
save
();
this
.
save
();
}
}
setItemDragonBoneData
(
item
)
{
item
[
'
skeJsonData
'
]
=
this
.
skeJsonData
;
item
[
'
texJsonData
'
]
=
this
.
texJsonData
;
item
[
'
texPngData
'
]
=
this
.
texPngData
;
}
skeJsonHandleChange
(
e
)
{
switch
(
e
.
type
)
{
case
'
start
'
:
this
.
isSkeJsonLoading
=
true
;
break
;
case
'
success
'
:
this
.
skeJsonData
[
'
url
'
]
=
e
.
file
.
response
.
url
;
this
.
skeJsonData
[
'
name
'
]
=
e
.
file
.
name
;
this
.
nzMessageService
.
success
(
'
上传成功
'
);
this
.
isSkeJsonLoading
=
false
;
break
;
case
'
progress
'
:
break
;
}
}
texJsonHandleChange
(
e
)
{
switch
(
e
.
type
)
{
case
'
start
'
:
this
.
isTexJsonLoading
=
true
;
break
;
case
'
success
'
:
this
.
texJsonData
[
'
url
'
]
=
e
.
file
.
response
.
url
;
this
.
texJsonData
[
'
name
'
]
=
e
.
file
.
name
;
this
.
nzMessageService
.
success
(
'
上传成功
'
);
this
.
isTexJsonLoading
=
false
;
break
;
case
'
progress
'
:
break
;
}
}
texPngHandleChange
(
e
)
{
switch
(
e
.
type
)
{
case
'
start
'
:
this
.
isTexPngLoading
=
true
;
break
;
case
'
success
'
:
this
.
texPngData
[
'
url
'
]
=
e
.
file
.
response
.
url
;
this
.
texPngData
[
'
name
'
]
=
e
.
file
.
name
;
this
.
nzMessageService
.
success
(
'
上传成功
'
);
this
.
isTexPngLoading
=
false
;
break
;
case
'
progress
'
:
break
;
}
}
}
}
\ No newline at end of file
play/assets/tmpGame/script/Scene.js
View file @
8092cd0a
This diff is collapsed.
Click to expand it.
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