Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
DG_FAF
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
DG_FAF
Commits
95f61d6f
Commit
95f61d6f
authored
Feb 17, 2023
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
改为原版热区组件
parent
be906b8d
Changes
6
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
438 additions
and
1600 deletions
+438
-1600
defaultData_DG_FAF.ts
assets/DG_FAF/script/defaultData_DG_FAF.ts
+170
-133
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+22
-230
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+106
-7
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+140
-1170
form.component.html
form_angular/src/app/form/form.component.html
+0
-1
form.component.ts
form_angular/src/app/form/form.component.ts
+0
-59
No files found.
assets/DG_FAF/script/defaultData_DG_FAF.ts
View file @
95f61d6f
// export const defaultData = {
// "lineType": "1",
// "circleSize": "1",
// "helpTime": 10,
// "book_id": "1",
// "page_id": "1",
// "part_name": "1",
// "bgItem": {
// "url": "http://staging-teach.cdn.ireadabc.com/5c84b987ea2291c8d6013fffd39dda32.png",
// "rect": {
// "x": 493.97,
// "y": 0,
// "width": 363.05,
// "height": 511
// }
// },
// "hotZoneItemArr": [
// {
// "id": "1676548040151",
// "index": 0,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 549.5051029564432,
// "posY": 118.50042461950386,
// "rect": {
// "x": 34.04,
// "y": 97,
// "width": 43,
// "height": 43
// }
// },
// {
// "id": "1676548150769",
// "index": 1,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 579.5,
// "posY": 369.5,
// "rect": {
// "x": 59.03,
// "y": 343,
// "width": 53,
// "height": 53
// }
// },
// {
// "id": "1676548154001",
// "index": 2,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 804.5,
// "posY": 458.5,
// "rect": {
// "x": 265.03,
// "y": 413,
// "width": 91,
// "height": 91
// }
// },
// {
// "id": "1676548166436",
// "index": 3,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 808.5,
// "posY": 47.5,
// "rect": {
// "x": 266.03,
// "y": -1,
// "width": 97,
// "height": 97
// }
// },
// {
// "id": "1676548168636",
// "index": 4,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 664.5,
// "posY": 458.5,
// "rect": {
// "x": 125.03,
// "y": 413,
// "width": 91,
// "height": 91
// }
// }
// ],
// "itemCombineGroup": [],
// "typeArr": []
// }
export
const
defaultData
=
{
"
lineType
"
:
"
1
"
,
"
circleSize
"
:
"
1
"
,
"
helpTime
"
:
10
,
"
book_id
"
:
"
1
"
,
"
page_id
"
:
"
1
"
,
"
part_name
"
:
"
1
"
,
"
bgItem
"
:
{
"
url
"
:
"
http://staging-teach.cdn.ireadabc.com/5c84b987ea2291c8d6013fffd39dda32.png
"
,
"
rect
"
:
{
"
x
"
:
493.97
,
"
y
"
:
0
,
"
width
"
:
363.05
,
"
height
"
:
511
}
bgItem
:
{
url
:
"
http://staging-teach.cdn.ireadabc.com/b6c249637c2892d75121dbb76717508e.png
"
,
rect
:
{
x
:
316.90215716486904
,
y
:
0
,
width
:
236.19568567026195
,
height
:
333
,
},
"
hotZoneItemArr
"
:
[
{
"
id
"
:
"
1676548040151
"
,
"
index
"
:
0
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
1.05546875
,
"
imgScale
"
:
1
,
"
imgSizeW
"
:
0
,
"
imgSizeH
"
:
0
,
"
mapScale
"
:
1.05546875
,
"
dragDot
"
:
{
"
x
"
:
675.5
,
"
y
"
:
255.5
},
"
gIdx
"
:
"
3
"
,
"
posX
"
:
549.5051029564432
,
"
posY
"
:
118.50042461950386
,
"
rect
"
:
{
"
x
"
:
34.04
,
"
y
"
:
97
,
"
width
"
:
43
,
"
height
"
:
43
}
},
{
"
id
"
:
"
1676548150769
"
,
"
index
"
:
1
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
1.05546875
,
"
imgScale
"
:
1
,
"
imgSizeW
"
:
0
,
"
imgSizeH
"
:
0
,
"
mapScale
"
:
1.05546875
,
"
dragDot
"
:
{
"
x
"
:
675.5
,
"
y
"
:
255.5
},
"
gIdx
"
:
"
3
"
,
"
posX
"
:
579.5
,
"
posY
"
:
369.5
,
"
rect
"
:
{
"
x
"
:
59.03
,
"
y
"
:
343
,
"
width
"
:
53
,
"
height
"
:
53
}
},
hotZoneItemArr
:
[
{
"
id
"
:
"
1676548154001
"
,
"
index
"
:
2
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
1.05546875
,
"
imgScale
"
:
1
,
"
imgSizeW
"
:
0
,
"
imgSizeH
"
:
0
,
"
mapScale
"
:
1.05546875
,
"
dragDot
"
:
{
"
x
"
:
675.5
,
"
y
"
:
255.5
},
"
gIdx
"
:
"
3
"
,
"
posX
"
:
804.5
,
"
posY
"
:
458.5
,
"
rect
"
:
{
"
x
"
:
265.03
,
"
y
"
:
413
,
"
width
"
:
91
,
"
height
"
:
91
}
},
{
"
id
"
:
"
1676548166436
"
,
"
index
"
:
3
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
1.05546875
,
"
imgScale
"
:
1
,
"
imgSizeW
"
:
0
,
"
imgSizeH
"
:
0
,
"
mapScale
"
:
1.05546875
,
"
dragDot
"
:
{
"
x
"
:
675.5
,
"
y
"
:
255.5
},
"
gIdx
"
:
"
3
"
,
"
posX
"
:
808.5
,
"
posY
"
:
47.5
,
"
rect
"
:
{
"
x
"
:
266.03
,
"
y
"
:
-
1
,
"
width
"
:
97
,
"
height
"
:
97
}
index
:
0
,
itemType
:
"
rect
"
,
fontSize
:
50
,
fontName
:
"
BRLNSR_1
"
,
fontColor
:
"
#8f3758
"
,
fontScale
:
0.6796875
,
imgScale
:
1
,
mapScale
:
0.6796875
,
rect
:
{
x
:
11.6
,
y
:
234
,
width
:
93
,
height
:
93
},
},
{
"
id
"
:
"
1676548168636
"
,
"
index
"
:
4
,
"
itemType
"
:
"
rect
"
,
"
fontScale
"
:
1.05546875
,
"
imgScale
"
:
1
,
"
imgSizeW
"
:
0
,
"
imgSizeH
"
:
0
,
"
mapScale
"
:
1.05546875
,
"
dragDot
"
:
{
"
x
"
:
675.5
,
"
y
"
:
255.5
index
:
1
,
itemType
:
"
rect
"
,
fontSize
:
50
,
fontName
:
"
BRLNSR_1
"
,
fontColor
:
"
#8f3758
"
,
fontScale
:
0.6796875
,
imgScale
:
1
,
mapScale
:
0.6796875
,
rect
:
{
x
:
162.1
,
y
:
26.5
,
width
:
68
,
height
:
68
},
},
"
gIdx
"
:
"
3
"
,
"
posX
"
:
664.5
,
"
posY
"
:
458.5
,
"
rect
"
:
{
"
x
"
:
125.03
,
"
y
"
:
413
,
"
width
"
:
91
,
"
height
"
:
91
}
}
],
"
itemCombineGroup
"
:
[],
"
typeArr
"
:
[]
}
\ No newline at end of file
itemCombineGroup
:
[],
};
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
95f61d6f
...
...
@@ -2,7 +2,7 @@
<h5
style=
"margin-left: 2.5%;"
>
preview:
</h5>
<div
class=
"preview-box"
[
style
.
height
]="
isRotate
?
'
95vw
'
:
'
35vw
'"
#
wrap
>
<div
class=
"preview-box"
#
wrap
>
<canvas
id=
"canvas"
#
canvas
></canvas>
</div>
...
...
@@ -32,144 +32,15 @@
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<div
style=
"margin-top: -20px; margin-bottom: 5px; width: 100%;"
>
<div
*
ngIf=
"customTypeGroupArr"
>
<nz-radio-group
[
ngModel
]="
it
.
gIdx
"
(
ngModelChange
)="
customRadioChange
($
event
,
it
)"
style=
"display: flex; align-items: center; justify-content: center; flex-wrap: wrap;"
>
<div
*
ngFor=
"let group of customTypeGroupArr; let gIdx = index"
style=
"display: flex; "
>
<label
nz-radio
nzValue=
"{{gIdx}}"
>
{{group.name}}
</label>
</div>
</nz-radio-group>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<div
style=
"margin-top: -20px; margin-bottom: 5px"
>
<nz-radio-group
[
ngModel
]="
it
.
itemType
"
(
ngModelChange
)="
radioChange
($
event
,
it
)"
>
<label
*
ngIf=
"isHasRect"
nz-radio
nzValue=
"rect"
>
矩形
</label>
<label
*
ngIf=
"isHasPic"
nz-radio
nzValue=
"pic"
>
图片
</label>
<label
*
ngIf=
"isHasText"
nz-radio
nzValue=
"text"
>
文本
</label>
</nz-radio-group>
</div> -->
</div>
<div
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[it.gIdx]"
>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].pic"
>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
</app-upload-image-with-preview>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].text"
style=
"margin-top: 5px"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].anima"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].animaSmall"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaSmallBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画(小)
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].audio"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.action"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-custom-action
style=
"margin: auto"
[
item
]="
it
?
it
['
actionData_
'
+
it
.
gIdx
]
:
{}"
[
type
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
type
"
[
option
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
option
"
(
save
)="
onSaveCustomAction
($
event
,
it
)"
>
>
</app-custom-action>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.isShowPos"
style=
"display: flex; align-items: center; justify-content: center; margin-top: 5px;"
>
x:
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
posX
"
style=
"width: 80px; margin-right: 15px;"
(
blur
)="
saveItemPos
(
it
)"
>
y:
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
posY
"
style=
"width: 80px"
(
blur
)="
saveItemPos
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.select"
align=
"center"
>
<nz-select
[(
ngModel
)]="
it
.
selectType
"
nzAllowClear
nzPlaceHolder=
"Choose"
style=
"width: 70%; margin-top: 5px;"
>
<nz-option
*
ngFor=
"let s of customTypeGroupArr[it.gIdx]?.select"
[
nzValue
]="
s
.
value
"
[
nzLabel
]="
s
.
label
"
>
</nz-option>
</nz-select>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.checkbox"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<span
style=
"margin-right: 20px;"
>
{{customTypeGroupArr[it.gIdx].checkbox.title + ':'}}
</span>
<div
*
ngFor=
"let cItem of it?.checkbox?.list"
>
<label
style=
""
nz-checkbox
[(
ngModel
)]="
cItem
.
value
"
(
ngModelChange
)="
checkboxChange
(
it
.
checkbox
,
it
)"
>
{{cItem.label}}
</label>
</div>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.dropdown"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<span
style=
"margin-right: 20px;"
>
{{customTypeGroupArr[it.gIdx].dropdown.title + ':'}}
</span>
<a
nz-dropdown
[
nzDropdownMenu
]="
menu
"
>
{{it.dropDownItem ? it.dropDownItem.label : 'select type'}}
<i
nz-icon
nzType=
"down"
></i>
</a>
<nz-dropdown-menu
#
menu=
"nzDropdownMenu"
>
<ul
nz-menu
nzSelectable
>
<li
*
ngFor=
"let cItem of customTypeGroupArr[it.gIdx].dropdown.list"
(
click
)="
dropdownClick
(
cItem
,
it
)"
nz-menu-item
>
{{cItem.label}}
</li>
</ul>
</nz-dropdown-menu>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.label"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<span
style=
"width: 30%;"
>
{{customTypeGroupArr[it.gIdx].label + ':'}}
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
labelText
"
(
blur
)="
saveText
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.mathLabel"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<span
style=
"width: 30%;"
>
{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}
</span>
<app-formula-input
[(
ngfModel
)]="
it
.
mathLabel
"
></app-formula-input>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.multRect"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<app-mult-rect
[
rectArr
]="
it
.
multRect
||
[]"
(
save
)="
onMultRectSave
($
event
,
it
)"
>
</app-mult-rect>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.isCopy"
align=
"center"
style=
"margin-top: 5px; display: flex; align-items: center; justify-content: center;"
>
<button
nz-button
(
click
)="
copyItem
(
it
)"
>
<i
nz-icon
nzType=
"copy"
nzTheme=
"outline"
></i>
复制粘贴
</button>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div
*
ngIf=
"it.itemType == 'pic'"
>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
...
...
@@ -181,26 +52,13 @@
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
<div *ngIf="isHasAudio"
style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
<div
style=
"width: 100%; margin-top: 5px;"
>
<app-audio-recorder
style="margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
<div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
</div> -->
</div>
</div>
...
...
@@ -225,29 +83,12 @@
<div
class=
"save-box"
>
<button
style=
"margin-left: 200px"
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
<i
nz-icon
nzType=
"save"
></i>
Save
</button>
<div
*
ngIf=
"isCopyData"
style=
"height: 40px; display: flex; justify-items: center;"
>
<label
style=
"margin-left: 40px"
nz-checkbox
[(
ngModel
)]="
bgItem
.
isShowDebugLine
"
>
显示辅助框
</label>
<button
style=
"margin-left: 20px; margin-top: -5px"
nz-button
(
click
)="
copyHotZoneData
()"
>
复制基础数据
</button>
<div
style=
"margin-left: 10px; margin-top: -5px"
>
<span>
粘贴数据:
</span>
<input
style=
"width: 100px;"
type=
"text"
nz-input
[(
ngModel
)]="
pasteData
"
>
<button
style=
"margin-left: 5px;"
nz-button
[
disabled
]="
pasteData=
=''"
nzType=
"primary"
(
click
)="
importData
()"
>
导入
</button>
</div>
</div>
</div>
...
...
@@ -257,52 +98,3 @@
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
<!--龙骨面板-->
<nz-modal
[(
nzVisible
)]="
animaPanelVisible
"
nzTitle=
"配置资源文件"
(
nzAfterClose
)="
closeAfterPanel
()"
(
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>
<div
class=
"anima-upload-btn"
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames"
>
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.scss
View file @
95f61d6f
...
...
@@ -81,10 +81,6 @@
}
}
.anima-upload-btn
{
padding
:
10px
;
}
h5
{
margin-top
:
1rem
;
}
...
...
@@ -93,8 +89,8 @@ h5 {
@font-face
{
font-family
:
'ahronbd-
1'
;
src
:
url("/assets/font/ahronbd-1.ttf
")
;
font-family
:
'BRLNSR_
1'
;
src
:
url("/assets/font/BRLNSR_1.TTF
")
;
}
...
...
@@ -109,3 +105,106 @@ h5 {
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
95f61d6f
import
{
ApplicationRef
,
ChangeDetectorRef
,
Component
,
ElementRef
,
EventEmitter
,
...
...
@@ -13,12 +11,11 @@ import {
ViewChild
}
from
'
@angular/core
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
,
retryWhen
}
from
'
rxjs/operators
'
;
import
{
DragItem
,
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
HotZoneMultRect
,
Label
,
MySprite
,
removeItemFromArr
,
ShapeCircle
,
ShapeRect
,
ShapeRectNew
}
from
'
./Unit
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
}
from
'
./Unit
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
getMinScale
}
from
'
../../play/Unit
'
;
import
{
tar
}
from
'
compressing
'
;
import
{
NzMessageService
}
from
'
ng-zorro-antd
'
;
import
{
getMinScale
}
from
"
../../play/Unit
"
;
import
{
tar
}
from
"
compressing
"
;
@
Component
({
...
...
@@ -28,14 +25,18 @@ import {NzMessageService} from 'ng-zorro-antd';
})
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
Input
()
imgItemArr
=
null
;
@
Input
()
hotZoneItemArr
=
null
;
@
Input
()
hotZoneArr
=
null
;
@
Output
()
save
=
new
EventEmitter
();
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
Input
()
isHasRect
=
true
;
@
Input
()
...
...
@@ -43,34 +44,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@
Input
()
isHasText
=
true
;
@
Input
()
isHasAudio
=
true
;
@
Input
()
isHasAnima
=
false
;
@
Input
()
customTypeGroupArr
;
// [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...]
@
Input
()
// hotZoneFontObj;
@
Input
()
isCopyData
=
false
;
@
Input
()
isRotate
=
false
;
hotZoneFontObj
;
// hotZoneFontObj = {
// size: 50,
// name: 'ahronbd-1',
// color: '#8f3758'
// }
hotZoneFontObj
=
{
size
:
50
,
name
:
'
BRLNSR_1
'
,
color
:
'
#8f3758
'
}
@
Input
()
defaultItemType
=
'
text
'
;
@
Input
()
hotZoneImgSize
=
0
;
@
Output
()
save
=
new
EventEmitter
();
@
Input
()
hotZoneImgSize
=
190
;
saveDisabled
=
true
;
...
...
@@ -95,7 +78,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
canvasLeft
;
canvasTop
;
renderArr
;
renderTopArr
;
imgArr
=
[];
oldPos
;
radioValue
;
...
...
@@ -104,45 +86,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
animaPanelVisible
=
false
;
uploadUrl
;
uploadData
;
skeJsonData
=
{};
texJsonData
=
{};
texPngData
=
{};
animaName
=
''
;
curDragonBoneIndex
;
curDragonBoneGIdx
;
pasteData
=
''
;
isSkeJsonLoading
=
false
;
isTexJsonLoading
=
false
;
isTexPngLoading
=
false
;
isAnimaSmall
=
false
;
savePropertyArr
=
[
'
id
'
,
'
gIdx
'
,
'
selectType
'
,
'
labelText
'
,
'
posX
'
,
'
posY
'
,
'
mathLabel
'
,
'
checkbox
'
,
'
dropDownItem
'
]
constructor
(
private
nzMessageService
:
NzMessageService
,
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
window
[
'
air
'
].
getUploadCallback
=
(
url
,
data
)
=>
{
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
};
constructor
()
{
}
_bgItem
=
null
;
...
...
@@ -158,9 +103,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
init
();
}
onResize
(
event
)
{
this
.
winResizeEventStream
.
next
();
}
...
...
@@ -168,14 +110,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
ngOnInit
()
{
this
.
initListener
();
this
.
init
();
//
this.init();
this
.
update
();
this
.
refresh
();
}
ngOnDestroy
()
{
...
...
@@ -191,20 +130,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
this
.
bgItem
.
url
=
e
.
url
;
this
.
init
();
// this.refreshBackground();
this
.
refreshBackground
();
}
onItemImgUploadSuccess
(
e
,
item
)
{
item
.
pic_url
=
e
.
url
;
this
.
loadHotZonePic
(
item
,
item
.
pic
,
e
.
url
);
this
.
refresh
();
this
.
loadHotZonePic
(
item
.
pic
,
e
.
url
);
}
onItemAudioUploadSuccess
(
e
,
item
)
{
item
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
...
...
@@ -215,12 +150,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
renderArr
.
push
(
this
.
bg
);
}
if
(
!
this
.
bgItem
.
url
)
{
this
.
bgItem
.
url
=
'
http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg
'
;
}
const
bg
=
this
.
bg
;
//
if (this.bgItem.url) {
if
(
this
.
bgItem
.
url
)
{
bg
.
load
(
this
.
bgItem
.
url
).
then
(()
=>
{
const
rate1
=
this
.
canvasWidth
/
bg
.
width
;
...
...
@@ -229,47 +160,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
rate
=
Math
.
min
(
rate1
,
rate2
);
bg
.
setScaleXY
(
rate
);
bg
.
x
=
this
.
canvasWidth
/
2
;
bg
.
y
=
this
.
canvasHeight
/
2
;
bg
.
removeChildren
();
const
bgBorder
=
new
ShapeRectNew
(
this
.
ctx
);
bgBorder
.
setSize
(
bg
.
width
,
bg
.
height
,
0
);
bgBorder
.
fillColor
=
'
#ff0000
'
;
bgBorder
.
fill
=
false
;
bgBorder
.
stroke
=
true
;
bgBorder
.
x
=
-
bg
.
width
/
2
;
bgBorder
.
y
=
-
bg
.
height
/
2
;
bgBorder
.
lineWidth
=
0.5
;
bg
.
addChild
(
bgBorder
);
if
(
callBack
)
{
callBack
();
}
this
.
refresh
();
});
//
}
}
}
addBtnClick
(
data
=
null
)
{
addBtnClick
()
{
// this.imgArr.push({});
// this.hotZoneArr.push({});
const
item
=
this
.
getHotZoneItem
(
data
);
const
item
=
this
.
getHotZoneItem
();
this
.
hotZoneArr
.
push
(
item
);
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
this
.
refreshHotZoneId
();
...
...
@@ -280,8 +191,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
item
=
this
.
hotZoneArr
.
splice
(
index
,
1
)[
0
];
removeItemFromArr
(
this
.
renderArr
,
item
.
pic
);
removeItemFromArr
(
this
.
renderArr
,
item
.
textLabel
);
removeItemFromArr
(
this
.
renderArr
,
item
.
drag
);
removeItemFromArr
(
this
.
renderArr
,
item
.
centerDot
);
this
.
refreshHotZoneId
();
...
...
@@ -290,7 +199,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onImgUploadSuccessByImg
(
e
,
img
)
{
img
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
img
);
this
.
refresh
();
}
refreshImage
(
img
)
{
...
...
@@ -313,7 +221,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
this
.
refresh
();
}
...
...
@@ -330,6 +237,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
getHotZoneItem
(
saveData
=
null
)
{
const
itemW
=
200
;
const
itemH
=
200
;
const
item
=
new
HotZoneItem
(
this
.
ctx
);
...
...
@@ -337,18 +245,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
anchorX
=
0.5
;
item
.
anchorY
=
0.5
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
itemType
=
this
.
getDefaultItemType
();
item
.
gIdx
=
'
0
'
;
item
[
'
id
'
]
=
this
.
createItemId
()
// new Date().getTime().toString();
item
[
'
data
'
]
=
saveData
;
console
.
log
(
'
item.x:
'
,
item
.
x
);
item
.
itemType
=
this
.
defaultItemType
;
if
(
saveData
)
{
...
...
@@ -357,300 +257,41 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
item
.
gIdx
=
saveData
.
gIdx
;
item
[
'
id
'
]
=
saveData
.
id
;
item
[
'
skeJsonData
'
]
=
saveData
.
skeJsonData
;
item
[
'
texJsonData
'
]
=
saveData
.
texJsonData
;
item
[
'
texPngData
'
]
=
saveData
.
texPngData
;
item
[
'
actionData_
'
+
item
.
gIdx
]
=
saveData
[
'
actionData_
'
+
item
.
gIdx
];
this
.
savePropertyArr
.
forEach
((
key
)
=>
{
if
(
saveData
[
key
])
{
item
[
key
]
=
saveData
[
key
];
}
})
}
console
.
log
(
'
item.x:~~
'
,
item
.
x
);
item
.
showLineDash
();
// const pic = new HotZoneImg(this.ctx);
this
.
setItemPic
(
item
,
saveData
);
this
.
setItemLabel
(
item
,
saveData
);
this
.
setItemAnima
(
item
,
saveData
);
this
.
setItemDrag
(
item
,
saveData
);
this
.
setItemCenterDot
(
item
,
saveData
);
this
.
setItemMultRect
(
item
,
saveData
);
return
item
;
}
setItemPic
(
item
,
saveData
)
{
console
.
log
(
'
in setItemPic
'
,
saveData
);
const
pic
=
new
EditorItem
(
this
.
ctx
);
const
pic
=
new
HotZoneImg
(
this
.
ctx
);
pic
.
visible
=
false
;
item
[
'
pic
'
]
=
pic
;
if
(
saveData
)
{
let
picUrl
=
saveData
.
pic_url
;
const
actionData
=
saveData
[
'
actionData_
'
+
item
.
gIdx
];
if
(
actionData
&&
actionData
.
type
==
'
pic
'
)
{
picUrl
=
actionData
.
pic_url
;
}
console
.
log
(
'
saveData:
'
,
saveData
);
console
.
log
(
'
picUrl:
'
,
picUrl
);
if
(
picUrl
)
{
this
.
loadHotZonePic
(
item
,
pic
,
picUrl
,
saveData
.
imgScale
);
}
if
(
saveData
&&
saveData
.
pic_url
)
{
this
.
loadHotZonePic
(
pic
,
saveData
.
pic_url
);
}
pic
.
x
=
item
.
x
;
pic
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
pic
);
}
setItemDrag
(
item
,
saveData
)
{
console
.
log
(
'
in setItemDrag
'
,
saveData
);
const
dragItem
=
new
DragItem
(
this
.
ctx
);
dragItem
.
init
();
dragItem
.
item
=
item
;
item
[
'
drag
'
]
=
dragItem
;
dragItem
.
visible
=
false
;
dragItem
.
x
=
item
.
x
;
dragItem
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
dragItem
);
if
(
saveData
)
{
if
(
saveData
.
dragDot
)
{
dragItem
.
x
=
saveData
.
dragDot
.
x
/
saveData
.
mapScale
*
this
.
mapScale
;
dragItem
.
y
=
saveData
.
dragDot
.
y
/
saveData
.
mapScale
*
this
.
mapScale
;
}
}
}
setItemAnima
(
item
,
saveData
)
{
console
.
log
(
'
in setItemAnima
'
,
saveData
);
// const pic = new EditorItem(this.ctx);
// pic.visible = false;
// item['pic'] = pic;
// if (saveData) {
// let picUrl = saveData.pic_url;
// const actionData = saveData['actionData_' + item.gIdx];
// if (actionData && actionData.type == 'pic') {
// picUrl = actionData.pic_url;
// }
// console.log('saveData: ', saveData);
// console.log('picUrl: ', picUrl);
// if (picUrl) {
// this.loadHotZonePic(pic, picUrl, saveData.imgScale);
// }
// }
// pic.x = item.x;
// pic.y = item.y;
// this.renderArr.push(pic);
}
setItemCenterDot
(
item
,
saveData
)
{
console
.
log
(
'
in setItemDrag
'
,
saveData
);
const
circle
=
new
ShapeCircle
(
this
.
ctx
);
circle
.
setRadius
(
6
);
// circle.fillColor = '#9834ff'
item
[
'
centerDot
'
]
=
circle
;
circle
.
visible
=
false
;
circle
.
x
=
item
.
x
;
circle
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
circle
);
if
(
saveData
)
{
if
(
saveData
.
dragDot
)
{
circle
.
x
=
saveData
.
dragDot
.
x
/
saveData
.
mapScale
*
this
.
mapScale
;
circle
.
y
=
saveData
.
dragDot
.
y
/
saveData
.
mapScale
*
this
.
mapScale
;
}
}
}
setItemMultRect
(
item
,
saveData
)
{
console
.
log
(
"
in setItemMultRect
"
)
if
(
saveData
&&
saveData
.
multRect
)
{
this
.
setItemMultRectByData
(
item
,
saveData
.
multRect
);
console
.
log
(
"
multRect ~
"
,
saveData
.
multRect
);
}
}
cleanMultRect
(
multRectArr
)
{
for
(
let
i
=
0
;
i
<
multRectArr
.
length
;
i
++
)
{
removeItemFromArr
(
this
.
renderTopArr
,
multRectArr
[
i
]);
}
}
setItemMultRectByData
(
item
,
multRectDataArr
)
{
if
(
item
.
multRectArr
)
{
this
.
cleanMultRect
(
item
.
multRectArr
);
}
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
else
{
curBgRect
=
{
x
:
0
,
y
:
0
,
width
:
this
.
canvasWidth
,
height
:
this
.
canvasHeight
};
}
let
oldBgRect
=
this
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
const
arr
=
[];
for
(
let
i
=
0
;
i
<
multRectDataArr
.
length
;
i
++
)
{
const
multRectData
=
multRectDataArr
[
i
];
const
multRectItem
=
new
HotZoneMultRect
(
this
.
ctx
);
multRectItem
.
showLineDash
();
multRectItem
.
anchorX
=
0.5
;
multRectItem
.
anchorY
=
0.5
;
multRectItem
.
rectEdgeColor
=
multRectData
.
color
;
multRectItem
.
showLabel
(
"
M-
"
+
(
i
+
1
));
multRectItem
.
item
=
item
;
multRectItem
.
visible
=
true
;
if
(
!
multRectData
.
rect
)
{
//无数据小矩形
multRectItem
.
setSize
(
multRectData
.
width
,
multRectData
.
height
);
multRectItem
.
x
=
item
.
x
+
multRectItem
.
width
*
i
*
0.3
;
multRectItem
.
y
=
item
.
y
+
multRectItem
.
width
*
i
*
0.3
;
}
else
{
//有数据小矩形
console
.
log
(
'
multRectData.rect:
'
,
multRectData
.
rect
);
const
saveRect
=
multRectData
.
rect
;
saveRect
.
x
*=
rate
;
saveRect
.
y
*=
rate
;
saveRect
.
width
*=
rate
;
saveRect
.
height
*=
rate
;
saveRect
.
x
+=
curBgRect
.
x
;
saveRect
.
y
+=
curBgRect
.
y
;
multRectItem
.
setSize
(
saveRect
.
width
,
saveRect
.
height
);
multRectItem
.
scaleX
=
saveRect
.
width
/
multRectItem
.
width
;
multRectItem
.
scaleY
=
saveRect
.
height
/
multRectItem
.
height
;
multRectItem
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
multRectItem
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
this
.
renderTopArr
.
push
(
multRectItem
);
arr
.
push
(
multRectItem
);
}
item
.
multRectArr
=
arr
;
}
setItemLabel
(
item
,
saveData
)
{
const
textLabel
=
new
HotZoneLabel
(
this
.
ctx
);
if
(
this
.
hotZoneFontObj
)
{
textLabel
.
fontSize
=
this
.
hotZoneFontObj
.
size
;
textLabel
.
fontName
=
this
.
hotZoneFontObj
.
name
;
textLabel
.
fontColor
=
this
.
hotZoneFontObj
.
color
;
}
textLabel
.
textAlign
=
'
center
'
;
// textLabel.setOutline();
// console.log('saveData:', saveData);
item
[
'
textLabel
'
]
=
textLabel
;
textLabel
.
setScaleXY
(
this
.
mapScale
);
if
(
saveData
)
{
if
(
saveData
.
text
&&
this
.
hotZoneFontObj
)
{
textLabel
.
text
=
saveData
.
text
}
this
.
setActionFont
(
textLabel
,
saveData
[
'
actionData_
'
+
item
.
gIdx
]);
if
(
saveData
&&
saveData
.
text
)
{
textLabel
.
text
=
saveData
.
text
;
textLabel
.
refreshSize
();
}
textLabel
.
x
=
item
.
x
;
textLabel
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
textLabel
);
}
setActionFont
(
textLabel
,
actionData
)
{
if
(
actionData
&&
actionData
.
type
==
'
text
'
)
{
textLabel
.
text
=
actionData
.
text
;
for
(
let
i
=
0
;
i
<
actionData
.
changeOption
.
length
;
i
++
)
{
const
op
=
actionData
.
changeOption
[
i
];
textLabel
[
op
[
0
]]
=
op
[
1
];
}
}
return
item
;
}
getDefaultItemType
()
{
if
(
this
.
customTypeGroupArr
)
{
const
group
=
this
.
customTypeGroupArr
[
0
];
if
(
group
.
rect
)
{
return
'
rect
'
;
}
if
(
group
.
pic
)
{
return
'
pic
'
;
}
if
(
group
.
text
)
{
return
'
text
'
;
}
}
else
{
return
this
.
defaultItemType
;
}
}
getPicItem
(
img
,
saveData
=
null
)
{
...
...
@@ -686,11 +327,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
else
{
//
item.showLineDash();
item
.
showLineDash
();
}
item
.
showLineDash
();
console
.
log
(
'
aaa
'
);
});
return
item
;
}
...
...
@@ -698,7 +337,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onAudioUploadSuccessByImg
(
e
,
img
)
{
img
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
deleteItem
(
e
,
i
)
{
...
...
@@ -707,145 +345,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
refreshHotZoneId
();
this
.
refresh
();
}
// radioChange(e, item) {
// item.itemType = e;
// this.refreshItem(item);
// this.refresh();
// // console.log(' in radioChange e: ', e);
// }
customRadioChange
(
e
,
item
)
{
console
.
log
(
'
in customRadioChange
'
,
e
);
item
.
gIdx
=
-
1
;
setTimeout
(()
=>
{
item
.
gIdx
=
e
;
this
.
refreshCustomItem
(
item
);
this
.
refresh
();
},
1
);
// const curGroup = this.customTypeGroupArr[e];
}
refreshCustomItem
(
item
)
{
this
.
hideHotZoneItem
(
item
);
const
group
=
this
.
customTypeGroupArr
[
item
.
gIdx
];
if
(
!
group
)
{
return
;
}
if
(
group
.
text
)
{
this
.
showItemLabel
(
item
);
}
if
(
group
.
rect
)
{
this
.
showItemRect
(
item
,
!
group
.
isFixed
);
}
if
(
group
.
pic
)
{
this
.
showItemPic
(
item
);
}
if
(
group
.
centerDot
)
{
console
.
log
(
'
item: ~~~~
'
,
item
)
this
.
showItemCenterDot
(
item
);
}
if
(
group
.
action
)
{
if
(
group
.
action
.
type
==
'
pic
'
)
{
this
.
showItemPic
(
item
);
}
if
(
group
.
action
.
type
==
'
text
'
)
{
this
.
showItemLabel
(
item
);
}
if
(
group
.
action
.
type
==
'
anima
'
)
{
this
.
showItemRect
(
item
);
}
}
if
(
group
.
checkbox
)
{
if
(
!
item
.
checkbox
)
{
item
.
checkbox
=
JSON
.
parse
(
JSON
.
stringify
(
group
.
checkbox
))
;
}
}
if
(
group
.
multRect
)
{
this
.
showItemMultRect
();
}
item
.
drag
.
visible
=
group
.
drag
;
item
.
setAnimaStyle
(
group
.
animaSmall
)
}
showItemMultRect
()
{
}
showItemDrag
(
item
)
{
item
.
drag
.
visible
=
true
;
// item.dragBody.visible = true;
// item.itemType = 'pic';
// this.showArrowTop(item)
}
showItemCenterDot
(
item
)
{
item
.
centerDot
.
visible
=
true
;
}
showItemPic
(
item
)
{
item
.
pic
.
visible
=
true
;
item
.
itemType
=
'
pic
'
;
this
.
showArrowTop
(
item
)
}
showItemLabel
(
item
)
{
item
.
textLabel
.
visible
=
true
;
item
.
itemType
=
'
text
'
;
this
.
showArrowTop
(
item
)
}
showItemRect
(
item
,
isShowArrowTop
=
true
)
{
item
.
visible
=
true
;
item
.
itemType
=
'
rect
'
;
this
.
showArrowTop
(
item
,
isShowArrowTop
)
}
radioChange
(
e
,
item
)
{
item
.
itemType
=
e
;
showArrowTop
(
item
,
isShowArrowTop
=
false
)
{
if
(
isShowArrowTop
)
{
item
.
arrowTop
.
visible
=
true
;
item
.
arrowRight
.
visible
=
true
;
}
else
{
item
.
arrowTop
.
visible
=
false
;
item
.
arrowRight
.
visible
=
false
;
}
}
this
.
refreshItem
(
item
);
hideHotZoneItem
(
item
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
item
.
centerDot
.
visible
=
false
;
// console.log(' in radioChange e: ', e);
}
refreshItem
(
item
)
{
//弃用
switch
(
item
.
itemType
)
{
case
'
rect
'
:
this
.
setRectState
(
item
);
...
...
@@ -857,36 +368,33 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
setTextState
(
item
);
break
;
default
:
this
.
setNoneState
(
item
);
}
}
init
()
{
console
.
log
(
'
init
'
);
this
.
initData
();
this
.
initCtx
();
this
.
initItem
();
}
initItem
()
{
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
if
(
!
this
.
bgItem
)
{
this
.
bgItem
=
{};
}
else
{
const
oldId
=
this
.
initId
;
this
.
refreshBackground
(()
=>
{
if
(
oldId
!=
this
.
initId
)
{
return
;
}
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
console
.
log
(
'
in refreshBackground
'
)
if
(
!
this
.
hotZoneItemArr
)
{
this
.
hotZoneItemArr
=
[];
}
else
{
...
...
@@ -896,7 +404,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
});
}
this
.
refresh
();
}
initHotZoneArr
()
{
...
...
@@ -920,7 +427,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
=
[];
const
arr
=
this
.
hotZoneItemArr
.
concat
();
console
.
log
(
'
this.hotZoneItemArr:
'
,
this
.
hotZoneItemArr
);
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
...
...
@@ -943,15 +449,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
pic_url
=
data
.
pic_url
;
item
.
text
=
data
.
text
;
item
.
itemType
=
data
.
itemType
;
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
console
.
log
(
'
1 item:
'
,
item
);
console
.
log
(
'
item:
'
,
item
);
this
.
hotZoneArr
.
push
(
item
);
}
...
...
@@ -962,22 +462,59 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
initId
initData
()
{
console
.
log
(
'
in initData
'
)
initImgArr
()
{
console
.
log
(
'
this.imgItemArr:
'
,
this
.
imgItemArr
);
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
else
{
curBgRect
=
{
x
:
0
,
y
:
0
,
width
:
this
.
canvasWidth
,
height
:
this
.
canvasHeight
};
}
let
oldBgRect
=
this
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
console
.
log
(
'
rate:
'
,
rate
);
this
.
imgArr
=
[];
const
arr
=
this
.
imgItemArr
.
concat
();
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
const
img
=
{
pic_url
:
data
.
pic_url
};
data
.
rect
.
x
*=
rate
;
data
.
rect
.
y
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
data
.
rect
.
y
+=
curBgRect
.
y
;
img
[
'
picItem
'
]
=
this
.
getPicItem
(
img
,
data
);
img
[
'
audio_url
'
]
=
arr
[
i
].
audio_url
;
this
.
imgArr
.
push
(
img
);
}
this
.
refreshImageId
();
}
initData
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
mapScale
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
this
.
renderArr
=
[];
this
.
renderTopArr
=
[];
this
.
bg
=
null
;
this
.
imgArr
=
[];
this
.
hotZoneArr
=
[];
this
.
initId
=
new
Date
().
getTime
();
}
initCtx
()
{
...
...
@@ -991,44 +528,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
// 先检测拖拽点
for
(
let
i
=
this
.
hotZoneArr
.
length
-
1
;
i
>=
0
;
i
--
)
{
const
item
=
this
.
hotZoneArr
[
i
];
if
(
item
&&
item
.
drag
&&
item
.
drag
.
visible
)
{
if
(
this
.
checkClickTarget
(
item
.
drag
))
{
this
.
clickedDragPoint
(
item
.
drag
);
return
;
}
}
}
// 检测多矩形
for
(
let
i
=
this
.
hotZoneArr
.
length
-
1
;
i
>=
0
;
i
--
)
{
const
item
=
this
.
hotZoneArr
[
i
];
if
(
item
&&
item
.
multRectArr
)
{
for
(
let
j
=
item
.
multRectArr
.
length
-
1
;
j
>=
0
;
j
--
)
{
if
(
this
.
checkClickTarget
(
item
.
multRectArr
[
j
]))
{
this
.
clickedMultRect
(
item
.
multRectArr
[
j
]);
return
;
}
}
}
}
for
(
let
i
=
this
.
hotZoneArr
.
length
-
1
;
i
>=
0
;
i
--
)
{
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
const
item
=
this
.
hotZoneArr
[
i
];
console
.
log
(
'
mapDown item:
'
,
item
);
let
callback
;
let
target
;
switch
(
item
.
itemType
)
{
...
...
@@ -1046,7 +548,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break
;
}
if
(
t
arget
&&
t
his
.
checkClickTarget
(
target
))
{
if
(
this
.
checkClickTarget
(
target
))
{
callback
(
target
);
return
;
}
...
...
@@ -1076,18 +578,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
addY
=
this
.
my
-
this
.
oldPos
.
y
;
this
.
curItem
.
x
+=
addX
;
this
.
curItem
.
y
+=
addY
;
this
.
curItem
.
posX
=
this
.
curItem
.
x
;
this
.
curItem
.
posY
=
this
.
curItem
.
y
;
}
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
// this.saveDisabled = fals
e;
this
.
saveDisabled
=
tru
e
;
}
mapUp
(
event
=
null
)
{
mapUp
(
event
)
{
this
.
curItem
=
null
;
this
.
changeSizeFlag
=
false
;
this
.
changeTopSizeFlag
=
false
;
...
...
@@ -1186,13 +685,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeCurItem
(
item
)
{
console
.
log
(
'
in changeCurItem
'
,
item
)
this
.
hideAllLineDash
();
this
.
curItem
=
item
;
this
.
curItem
.
showLineDash
();
}
hideAllLineDash
()
{
...
...
@@ -1215,7 +711,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
for
(
let
i
=
0
;
i
<
this
.
renderArr
.
length
;
i
++
)
{
this
.
renderArr
[
i
].
update
(
this
);
}
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
...
...
@@ -1224,20 +722,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// }
// }
for
(
let
i
=
0
;
i
<
this
.
renderArr
.
length
;
i
++
)
{
this
.
renderArr
[
i
].
update
(
this
);
}
this
.
updateArr
(
this
.
hotZoneArr
);
this
.
updateArr
(
this
.
renderTopArr
);
this
.
updatePos
();
this
.
updatePos
()
TWEEN
.
update
();
...
...
@@ -1347,9 +833,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
checkClickTarget
(
target
)
{
if
(
!
target
||
!
target
.
visible
)
{
return
;
}
const
rect
=
target
.
getBoundingBox
();
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
return
true
;
...
...
@@ -1368,21 +852,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick
()
{
const
sendData
=
this
.
getSendData
();
this
.
save
.
emit
(
sendData
);
}
getSendData
()
{
const
bgItem
=
this
.
bgItem
;
if
(
this
.
bg
)
{
const
rect
=
this
.
bg
.
getBoundingBox
();
bgItem
[
'
rect
'
]
=
rect
;
rect
.
x
=
Math
.
round
(
rect
.
x
*
100
)
/
100
;
rect
.
y
=
Math
.
round
(
rect
.
y
*
100
)
/
100
;
rect
.
width
=
Math
.
round
(
rect
.
width
*
100
)
/
100
;
rect
.
height
=
Math
.
round
(
rect
.
height
*
100
)
/
100
;
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
}
else
{
bgItem
[
'
rect
'
]
=
{
x
:
0
,
...
...
@@ -1398,67 +870,19 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
id
:
hotZoneArr
[
i
].
id
,
index
:
hotZoneArr
[
i
].
index
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
text
:
hotZoneArr
[
i
].
text
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
itemType
:
hotZoneArr
[
i
].
itemType
,
fontSize
:
this
.
hotZoneFontObj
.
size
,
fontName
:
this
.
hotZoneFontObj
.
name
,
fontColor
:
this
.
hotZoneFontObj
.
color
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
imgScale
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
scaleX
:
1
,
imgSizeW
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
width
:
0
,
imgSizeH
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
height
:
0
,
mapScale
:
this
.
mapScale
,
skeJsonData
:
hotZoneArr
[
i
].
skeJsonData
,
texJsonData
:
hotZoneArr
[
i
].
texJsonData
,
texPngData
:
hotZoneArr
[
i
].
texPngData
,
dragDot
:
hotZoneArr
[
i
].
drag
.
getPosition
(),
gIdx
:
hotZoneArr
[
i
].
gIdx
,
mapScale
:
this
.
mapScale
};
this
.
savePropertyArr
.
forEach
((
key
)
=>
{
if
(
hotZoneArr
[
i
][
key
])
{
hotZoneItem
[
key
]
=
hotZoneArr
[
i
][
key
];
}
})
if
(
hotZoneArr
[
i
].
multRectArr
)
{
const
tempArr
=
[];
hotZoneArr
[
i
].
multRectArr
.
forEach
(
element
=>
{
const
rectData
=
element
.
getBoundingBox
();
rectData
.
x
=
Math
.
round
((
rectData
.
x
-
bgItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
rectData
.
y
=
Math
.
round
((
rectData
.
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
rectData
.
width
=
Math
.
round
((
rectData
.
width
)
*
100
)
/
100
;
rectData
.
height
=
Math
.
round
((
rectData
.
height
)
*
100
)
/
100
;
const
oneData
=
{
rect
:
rectData
,
color
:
element
.
rectEdgeColor
}
tempArr
.
push
(
oneData
);
});
hotZoneItem
[
'
multRect
'
]
=
tempArr
;
}
hotZoneItem
[
'
actionData_
'
+
hotZoneItem
.
gIdx
]
=
hotZoneArr
[
i
][
'
actionData_
'
+
hotZoneArr
[
i
].
gIdx
]
if
(
this
.
hotZoneFontObj
)
{
hotZoneItem
[
'
fontSize
'
]
=
this
.
hotZoneFontObj
.
size
;
hotZoneItem
[
'
fontName
'
]
=
this
.
hotZoneFontObj
.
name
;
hotZoneItem
[
'
ontColor
'
]
=
this
.
hotZoneFontObj
.
color
;
}
if
(
hotZoneArr
[
i
].
itemType
==
'
pic
'
)
{
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
pic
.
getBoundingBox
();
}
else
if
(
hotZoneArr
[
i
].
itemType
==
'
text
'
)
{
hotZoneArr
[
i
].
textLabel
.
refreshSize
();
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
textLabel
.
getLabelRect
();
// hotZoneItem['rect'].width = hotZoneItem['rect'].width / hotZoneArr[i].textLabel.scaleX;
// hotZoneItem['rect'].height = hotZoneArr[i].textLabel.height * hotZoneArr[i].textLabel.scaleY;
}
else
{
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
'
].
y
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
...
...
@@ -1470,361 +894,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console
.
log
(
'
hotZoneItemArr:
'
,
hotZoneItemArr
);
return
{
bgItem
,
hotZoneItemArr
};
}
saveText
(
item
)
{
if
(
item
.
itemType
==
'
text
'
)
{
item
.
textLabel
.
text
=
item
.
text
;
}
}
saveItemPos
(
item
)
{
console
.
log
(
'
item.posX:
'
,
item
.
posX
)
console
.
log
(
'
item.posY:
'
,
item
.
posY
)
item
.
x
=
Number
(
item
.
posX
||
0
)
item
.
y
=
Number
(
item
.
posY
||
0
)
this
.
changeCurItem
(
item
);
this
.
curItem
.
x
=
Number
(
item
.
posX
||
0
);
this
.
curItem
.
y
=
Number
(
item
.
posY
||
0
);
this
.
mapUp
();
}
onSaveCustomAction
(
e
,
item
)
{
const
data
=
e
;
item
[
'
actionData_
'
+
item
.
gIdx
]
=
data
;
if
(
data
.
type
==
'
pic
'
)
{
let
picUrl
=
data
.
pic_url
;
if
(
picUrl
)
{
this
.
loadHotZonePic
(
item
,
item
.
pic
,
picUrl
);
}
}
if
(
data
.
type
==
'
text
'
)
{
this
.
setActionFont
(
item
.
textLabel
,
data
);
item
.
textLabel
.
refreshSize
();
}
// if (data.type == 'anima') {
// this.setActionAnima(item.anima, data);
// }
// this.loadHotZonePic(item.pic, e.url);
this
.
refresh
()
}
setActionAnima
()
{
}
setAnimaBtnClick
(
index
)
{
console
.
log
(
'
aaaa
'
)
this
.
isAnimaSmall
=
false
;
this
.
setCurDragonBone
(
index
);
// this.curDragonBoneIndex = index;
// this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
// const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index];
// this.skeJsonData = skeJsonData || {};
// this.texJsonData = texJsonData || {};
// this.texPngData = texPngData || {};
// this.animaPanelVisible = true;
// this.refresh();
}
setAnimaSmallBtnClick
(
index
)
{
console
.
log
(
'
bbb
'
)
this
.
isAnimaSmall
=
true
;
this
.
setCurDragonBone
(
index
);
}
setCurDragonBone
(
index
)
{
this
.
curDragonBoneIndex
=
index
;
this
.
curDragonBoneGIdx
=
Number
(
this
.
hotZoneArr
[
index
].
gIdx
);
const
{
skeJsonData
,
texJsonData
,
texPngData
}
=
this
.
hotZoneArr
[
index
];
this
.
skeJsonData
=
skeJsonData
||
{};
this
.
texJsonData
=
texJsonData
||
{};
this
.
texPngData
=
texPngData
||
{};
this
.
animaPanelVisible
=
true
;
this
.
refresh
();
}
setItemSizeByAnima
(
jsonData
,
item
)
{
console
.
log
(
'
json:
'
,
jsonData
);
const
request
=
new
XMLHttpRequest
();
//通过url获取文件,第二个选项是文件所在的具体地址
request
.
open
(
'
GET
'
,
jsonData
.
url
,
true
);
request
.
send
(
null
);
request
.
onreadystatechange
=
()
=>
{
if
(
request
.
readyState
===
4
&&
request
.
status
===
200
)
{
var
type
=
request
.
getResponseHeader
(
'
Content-Type
'
);
if
(
type
.
indexOf
(
"
text
"
)
!==
1
)
{
//返回一个文件内容的对象
const
data
=
JSON
.
parse
(
request
.
responseText
);
console
.
log
(
'
request.responseText;
'
,
data
)
const
animaSize
=
data
.
armature
[
0
].
canvas
;
item
.
width
=
animaSize
.
width
;
item
.
height
=
animaSize
.
height
;
// return request.responseText;
}
}
}
}
animaPanelCancel
()
{
this
.
animaPanelVisible
=
false
;
this
.
refresh
();
}
animaPanelOk
()
{
this
.
setItemDragonBoneData
(
this
.
hotZoneArr
[
this
.
curDragonBoneIndex
]);
console
.
log
(
'
this.hotZoneArr:
'
,
this
.
hotZoneArr
);
this
.
animaPanelVisible
=
false
;
if
(
this
.
isAnimaSmall
)
{
this
.
setItemSizeByAnima
(
this
.
skeJsonData
,
this
.
hotZoneArr
[
this
.
curDragonBoneIndex
]);
}
this
.
refresh
();
}
setItemDragonBoneData
(
item
)
{
item
[
'
skeJsonData
'
]
=
this
.
skeJsonData
;
item
[
'
texJsonData
'
]
=
this
.
texJsonData
;
item
[
'
texPngData
'
]
=
this
.
texPngData
;
}
skeJsonHandleChange
(
e
)
{
console
.
log
(
'
e:
'
,
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
)
{
console
.
log
(
'
e:
'
,
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
)
{
console
.
log
(
'
e:
'
,
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
;
}
}
copyItem
(
it
)
{
const
{
hotZoneItemArr
}
=
this
.
getSendData
();
let
itemData
;
hotZoneItemArr
.
forEach
((
data
)
=>
{
if
(
data
.
id
==
it
.
id
)
{
itemData
=
JSON
.
parse
(
JSON
.
stringify
(
data
)
);
}
})
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
else
{
curBgRect
=
{
x
:
0
,
y
:
0
,
width
:
this
.
canvasWidth
,
height
:
this
.
canvasHeight
};
}
let
oldBgRect
=
this
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
console
.
log
(
'
rate:
'
,
rate
);
const
data
=
itemData
data
.
rect
.
x
*=
rate
;
data
.
rect
.
y
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
data
.
rect
.
y
+=
curBgRect
.
y
;
const
item
=
this
.
getHotZoneItem
(
data
);
item
.
audio_url
=
data
.
audio_url
;
item
.
pic_url
=
data
.
pic_url
;
item
.
text
=
data
.
text
;
item
.
itemType
=
data
.
itemType
;
this
.
hotZoneArr
.
push
(
item
);
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
this
.
refreshHotZoneId
();
item
[
'
id
'
]
=
this
.
createItemId
();
}
createItemId
()
{
return
new
Date
().
getTime
().
toString
();
}
copyHotZoneData
()
{
const
{
bgItem
,
hotZoneItemArr
}
=
this
.
getSendData
();
// const hotZoneItemArrNew = [];
// const tmpArr = JSON.parse(JSON.stringify(hotZoneItemArr));
// tmpArr.forEach((item) => {
// if (item.gIdx === '0') {
// hotZoneItemArr.push(item);
// }
// })
const
jsonData
=
{
bgItem
,
hotZoneItemArr
,
isHasRect
:
this
.
isHasRect
,
isHasPic
:
this
.
isHasPic
,
isHasText
:
this
.
isHasText
,
isHasAudio
:
this
.
isHasAudio
,
isHasAnima
:
this
.
isHasAnima
,
hotZoneFontObj
:
this
.
hotZoneFontObj
,
defaultItemType
:
this
.
defaultItemType
,
hotZoneImgSize
:
this
.
hotZoneImgSize
,
};
const
oInput
=
document
.
createElement
(
'
input
'
);
oInput
.
value
=
JSON
.
stringify
(
jsonData
);
document
.
body
.
appendChild
(
oInput
);
oInput
.
select
();
// 选择对象
document
.
execCommand
(
'
Copy
'
);
// 执行浏览器复制命令
document
.
body
.
removeChild
(
oInput
);
this
.
nzMessageService
.
success
(
'
复制成功
'
);
// alert('复制成功');
}
importData
()
{
if
(
!
this
.
pasteData
)
{
return
;
}
try
{
const
data
=
JSON
.
parse
(
this
.
pasteData
);
console
.
log
(
'
data:
'
,
data
);
const
{
bgItem
,
hotZoneItemArr
,
isHasRect
,
isHasPic
,
isHasText
,
isHasAudio
,
isHasAnima
,
hotZoneFontObj
,
defaultItemType
,
hotZoneImgSize
,
}
=
data
;
this
.
hotZoneItemArr
=
hotZoneItemArr
;
this
.
isHasRect
=
isHasRect
;
this
.
isHasPic
=
isHasPic
;
this
.
isHasText
=
isHasText
;
this
.
isHasAudio
=
isHasAudio
;
this
.
isHasAnima
=
isHasAnima
;
this
.
hotZoneFontObj
=
hotZoneFontObj
;
this
.
defaultItemType
=
defaultItemType
;
this
.
hotZoneImgSize
=
hotZoneImgSize
;
this
.
bgItem
=
bgItem
;
this
.
pasteData
=
''
;
}
catch
(
e
)
{
console
.
log
(
'
err:
'
,
e
);
this
.
nzMessageService
.
error
(
'
导入失败
'
);
}
this
.
save
.
emit
({
bgItem
,
hotZoneItemArr
});
}
private
updatePos
()
{
...
...
@@ -1847,19 +917,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break
;
}
if
(
x
!=
undefined
&&
y
!=
undefined
)
{
item
.
x
=
x
;
item
.
y
=
y
;
item
.
pic
.
x
=
x
;
item
.
pic
.
y
=
y
;
item
.
textLabel
.
x
=
x
;
item
.
textLabel
.
y
=
y
;
item
.
centerDot
.
x
=
x
;
item
.
centerDot
.
y
=
y
;
}
});
}
...
...
@@ -1881,12 +944,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
textLabel
.
visible
=
true
;
}
private
setNoneState
(
item
:
any
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
}
private
clickedHotZoneRect
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
...
...
@@ -1905,17 +962,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private
clickedHotZonePic
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrow
))
{
this
.
changeItemSize
(
item
);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
// this.changeItemTopSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
// this.changeItemRightSize(item);
}
else
{
this
.
changeCurItem
(
item
);
}
this
.
curItem
=
item
;
}
}
...
...
@@ -1926,91 +972,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
private
clickedMultRect
(
multRect
:
any
)
{
if
(
this
.
checkClickTarget
(
multRect
))
{
if
(
multRect
.
lineDashFlag
&&
this
.
checkClickTarget
(
multRect
.
arrow
))
{
this
.
changeItemSize
(
multRect
);
}
else
if
(
multRect
.
lineDashFlag
&&
this
.
checkClickTarget
(
multRect
.
arrowTop
))
{
this
.
changeItemTopSize
(
multRect
);
}
else
if
(
multRect
.
lineDashFlag
&&
this
.
checkClickTarget
(
multRect
.
arrowRight
))
{
this
.
changeItemRightSize
(
multRect
);
}
else
{
this
.
changeCurItem
(
multRect
);
}
return
;
}
}
clickedDragPoint
(
item
)
{
this
.
curItem
=
item
;
}
checkboxChange
(
checkbox
,
hzItem
)
{
console
.
log
(
'
checkbox:
'
,
checkbox
);
hzItem
.
checkbox
=
checkbox
;
console
.
log
(
'
hzItem:
'
,
hzItem
);
}
dropdownClick
(
data
,
item
)
{
item
.
dropDownItem
=
data
;
console
.
log
(
"
data:
"
,
data
);
console
.
log
(
"
item:
"
,
item
);
}
private
loadHotZonePic
(
item
,
pic
:
HotZoneImg
,
url
,
scale
=
null
)
{
let
baseLen
;
if
(
this
.
hotZoneImgSize
)
{
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
saveText
(
item
)
{
item
.
textLabel
.
text
=
item
.
text
;
}
private
loadHotZonePic
(
pic
:
HotZoneImg
,
url
)
{
const
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
pic
.
load
(
url
).
then
(()
=>
{
if
(
!
scale
)
{
if
(
baseLen
)
{
scale
=
getMinScale
(
pic
,
baseLen
);
}
else
{
scale
=
this
.
bg
.
scaleX
;
}
pic
.
setScaleXY
(
scale
);
}
else
{
const
w
=
item
.
width
*
item
.
scaleX
;
const
h
=
item
.
height
*
item
.
scaleY
;
pic
.
setScaleXY
(
getMinScale
(
pic
,
w
,
h
));
}
const
s
=
getMinScale
(
pic
,
baseLen
);
pic
.
setScaleXY
(
s
);
});
}
closeAfterPanel
()
{
this
.
refresh
();
}
onMultRectSave
(
e
,
item
)
{
console
.
log
(
'
in onMultRectSave:
'
,
e
);
item
.
multRect
=
e
;
this
.
setItemMultRectByData
(
item
,
item
.
multRect
);
}
/**
* 刷新 渲染页面
*/
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
}
form_angular/src/app/form/form.component.html
View file @
95f61d6f
...
...
@@ -25,7 +25,6 @@
<app-custom-hot-zone
[
bgItem
]="
item
.
bgItem
"
[
hotZoneItemArr
]="
item
.
hotZoneItemArr
"
[
customTypeGroupArr
]="
customTypeGroupArr
"
(
save
)="
saveHotZone
(
item
,
$
event
)"
>
</app-custom-hot-zone>
...
...
form_angular/src/app/form/form.component.ts
View file @
95f61d6f
...
...
@@ -26,64 +26,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
// 储存对象
item
;
customTypeGroupArr
=
[
{
name
:
'
连接点
'
,
rect
:
true
,
// isShowPos: true,
isCopy
:
true
,
isShowPos
:
true
,
centerDot
:
true
,
// label: '答案',
},
{
name
:
'
书写区
'
,
rect
:
true
,
isShowPos
:
true
,
isCopy
:
true
,
anima
:
true
,
},
{
name
:
'
画圈区
'
,
rect
:
true
,
isShowPos
:
true
,
isCopy
:
true
,
// anima: true,
},
{
name
:
'
音频区
'
,
rect
:
true
,
audio
:
true
,
isCopy
:
true
,
},
{
name
:
'
标记区
'
,
rect
:
true
,
isShowPos
:
true
,
isCopy
:
true
,
anima
:
true
,
},
{
name
:
'
涂色区
'
,
anima
:
true
,
// pic: true,
// isShowPos: true,
isCopy
:
true
,
},
{
name
:
'
书写图片
'
,
pic
:
true
,
// isShowPos: true,
isCopy
:
true
,
},
{
name
:
'
装饰图片
'
,
pic
:
true
,
// isShowPos: true,
isCopy
:
true
,
},
];
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
...
...
@@ -119,7 +61,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
const
{
bgItem
,
hotZoneItemArr
}
=
e
;
group
.
bgItem
=
bgItem
;
group
.
hotZoneItemArr
=
hotZoneItemArr
;
this
.
item
.
itemCombineGroup
=
[];
this
.
save
();
}
...
...
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