Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gs_carton
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
gs_carton
Commits
3d6d7515
Commit
3d6d7515
authored
Nov 15, 2024
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 热区功能完成
parent
6a68a275
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
46 additions
and
140 deletions
+46
-140
Unit.ts
src/app/common/custom-hot-zone/Unit.ts
+3
-0
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+28
-136
custom-hot-zone.component.ts
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
+15
-4
No files found.
src/app/common/custom-hot-zone/Unit.ts
View file @
3d6d7515
...
...
@@ -1957,6 +1957,9 @@ export class HotZoneItem extends MySprite {
audio_url
;
pic_url
;
text
;
text_cn
;
start_time
;
end_time
;
gIdx
;
private
_itemType
;
...
...
src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
3d6d7515
...
...
@@ -12,96 +12,38 @@
<h5>
add background:
</h5>
<div
class=
"bg-box"
>
<app-upload-image-with-preview
[
picUrl
]="
bgItem
?.
url
"
(
imageUploaded
)="
onBackgroundUploadSuccess
($
event
)"
>
<app-upload-image-with-preview
[
picUrl
]="
bgItem
?.
url
"
(
imageUploaded
)="
onBackgroundUploadSuccess
($
event
)"
>
</app-upload-image-with-preview>
</div>
</div>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
class=
"img-box"
*
ngFor=
"let it of hotZoneArr; let i = index"
>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
class=
"img-box"
*
ngFor=
"let it of hotZoneArr; let i = index"
>
<div
style=
"margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px"
>
<span
style=
"margin-left: 40%;"
>
item-{{i + 1}}
</span>
<button
style=
"float: right;"
nz-button
nzType=
"danger"
nzSize=
"small"
(
click
)="
deleteBtnClick
(
i
)"
>
<div
style=
"margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px; position: relative;"
>
<button
style=
"position: absolute; right: -15px; top: -15px; z-index: 100;"
nz-button
nzType=
"danger"
nzSize=
"small"
(
click
)="
deleteBtnClick
(
i
)"
>
X
</button>
<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"
>
<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>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
</app-upload-image-with-preview>
<div
style=
"margin-top: 5px"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
placeholder=
"英文"
>
</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].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
style=
"margin-top: 5px"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text_cn
"
(
blur
)="
saveText
(
it
)"
placeholder=
"中文"
>
</div>
<div
style=
"margin-top: 5px"
>
<input
type=
"text"
style=
"width: 100px;"
nz-input
[(
ngModel
)]="
it
.
start_time
"
(
blur
)="
saveText
(
it
)"
placeholder=
"开始时间"
>
-
<input
type=
"text"
style=
"width: 100px;"
nz-input
[(
ngModel
)]="
it
.
end_time
"
(
blur
)="
saveText
(
it
)"
placeholder=
"结束时间"
>
</div>
<div
*
ngIf=
"!customTypeGroupArr"
>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
</app-upload-image-with-preview>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
<div
*
ngIf=
"isHasAudio"
style=
"width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;"
>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
<div
*
ngIf=
"isHasAudio"
style=
"width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;"
>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
</div>
</div>
...
...
@@ -110,8 +52,7 @@
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<div
class=
"bg-box"
>
<button
nz-button
nzType=
"dashed"
(
click
)="
addBtnClick
()"
class=
"add-btn"
>
<button
nz-button
nzType=
"dashed"
(
click
)="
addBtnClick
()"
class=
"add-btn"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
<!--Add Image-->
Add hot zone
...
...
@@ -127,21 +68,22 @@
<div
class=
"save-box"
>
<button
style=
"margin-left: 200px"
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
(
click
)="
saveClick
()"
>
<i
nz-icon
nzType=
"save"
></i>
Save
</button>
<div
style=
"height: 40px; display: flex; justify-items: center;"
>
<div
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"
>
<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>
<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>
<!--<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="pasteHotZoneData()" > 粘贴数据 </button>-->
...
...
@@ -153,55 +95,5 @@
</div>
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
<!--龙骨面板-->
<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>
\ No newline at end of file
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
3d6d7515
...
...
@@ -54,7 +54,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// color: '#8f3758'
// }
@
Input
()
defaultItemType
=
'
text
'
;
// defaultItemType = 'rect';
defaultItemType
=
'
pic
'
;
@
Input
()
hotZoneImgSize
=
190
;
...
...
@@ -251,10 +252,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
this
.
hotZoneArr
[
i
].
index
=
i
;
if
(
this
.
hotZoneArr
[
i
])
{
this
.
hotZoneArr
[
i
].
title
=
'
item-
'
+
(
i
+
1
);
//
if (this.hotZoneArr[i]) {
//
this.hotZoneArr[i].title = 'item-' + (i + 1);
}
//
}
}
}
...
...
@@ -549,6 +550,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
audio_url
=
data
.
audio_url
;
item
.
pic_url
=
data
.
pic_url
;
item
.
text
=
data
.
text
;
item
.
text_cn
=
data
.
text_cn
;
item
.
start_time
=
data
.
start_time
;
item
.
end_time
=
data
.
end_time
;
item
.
itemType
=
data
.
itemType
;
if
(
this
.
customTypeGroupArr
)
{
...
...
@@ -951,6 +955,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
index
:
hotZoneArr
[
i
].
index
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
text
:
hotZoneArr
[
i
].
text
,
text_cn
:
hotZoneArr
[
i
].
text_cn
,
start_time
:
hotZoneArr
[
i
].
start_time
,
end_time
:
hotZoneArr
[
i
].
end_time
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
itemType
:
hotZoneArr
[
i
].
itemType
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
...
...
@@ -991,6 +998,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveText
(
item
)
{
item
.
textLabel
.
text
=
item
.
text
;
item
.
textLabel
.
text_cn
=
item
.
text_cn
;
item
.
textLabel
.
start_time
=
item
.
start_time
;
item
.
textLabel
.
end_time
=
item
.
end_time
;
}
setAnimaBtnClick
(
index
)
{
...
...
@@ -1254,6 +1264,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
scale
=
getMinScale
(
pic
,
baseLen
);
}
pic
.
setScaleXY
(
scale
);
pic
.
visible
=
true
;
});
}
...
...
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