Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JJ39
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
JJ39
Commits
c5ea2600
Commit
c5ea2600
authored
Jan 12, 2023
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 添加拖拽
parent
ea7c40a1
Changes
15
Hide whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
1587 additions
and
1116 deletions
+1587
-1116
audio-recorder.component.html
...c/app/common/audio-recorder/audio-recorder.component.html
+1
-1
audio-recorder.component.ts
...src/app/common/audio-recorder/audio-recorder.component.ts
+33
-0
Unit.ts
form_angular/src/app/common/custom-hot-zone/Unit.ts
+184
-791
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+197
-21
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+6
-105
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+925
-134
upload-dragon-bone.component.html
...mmon/upload-dragon-bone/upload-dragon-bone.component.html
+2
-2
upload-dragon-bone.component.ts
...common/upload-dragon-bone/upload-dragon-bone.component.ts
+39
-0
upload-image-with-preview.component.html
...age-with-preview/upload-image-with-preview.component.html
+4
-2
upload-image-with-preview.component.ts
...image-with-preview/upload-image-with-preview.component.ts
+35
-0
upload-video.component.html
...r/src/app/common/upload-video/upload-video.component.html
+47
-56
upload-video.component.ts
...lar/src/app/common/upload-video/upload-video.component.ts
+50
-0
form.component.html
form_angular/src/app/form/form.component.html
+2
-4
form.component.ts
form_angular/src/app/form/form.component.ts
+15
-0
drag-test.html
form_angular/src/drag-test.html
+47
-0
No files found.
form_angular/src/app/common/audio-recorder/audio-recorder.component.html
View file @
c5ea2600
<div
class=
"d-flex"
>
<div
class=
"d-flex"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<div
class=
"p-btn-record d-flex"
>
<div
class=
"p-btn-record d-flex"
>
<div
class=
"btn-clear"
style=
"cursor: pointer"
(
click
)="
onBtnClearAudio
()"
*
ngIf=
"withRmBtn && (audioUrl || audioBlob)"
>
<div
class=
"btn-clear"
style=
"cursor: pointer"
(
click
)="
onBtnClearAudio
()"
*
ngIf=
"withRmBtn && (audioUrl || audioBlob)"
>
<fa-icon
icon=
"times"
></fa-icon>
<fa-icon
icon=
"times"
></fa-icon>
...
...
form_angular/src/app/common/audio-recorder/audio-recorder.component.ts
View file @
c5ea2600
...
@@ -276,6 +276,39 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -276,6 +276,39 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this
.
progress
=
Math
.
floor
(
p
*
100
);
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
}
linkInputed
(
url
,
name
)
{
url
=
url
.
substring
(
0
,
url
.
lastIndexOf
(
"
.
"
))
+
"
_l.mp3
"
;
this
.
audioUrl
=
url
;
this
.
audioUploaded
.
emit
({
url
});
this
.
audioName
.
emit
(
name
);
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
url
,
name
}
=
JSON
.
parse
(
dt
);
if
(
url
.
indexOf
(
"
teach
"
)
<
0
||
url
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.mp3
"
];
if
(
!
white
.
includes
(
url
.
substr
(
url
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
url
,
name
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线音频传递参数不合法,应该是{url:'', name:''}
"
);
}
}
}
}
enum
Type
{
enum
Type
{
...
...
form_angular/src/app/common/custom-hot-zone/Unit.ts
View file @
c5ea2600
...
@@ -329,6 +329,7 @@ export class MySprite extends Sprite {
...
@@ -329,6 +329,7 @@ export class MySprite extends Sprite {
this
.
scaleX
=
this
.
scaleY
=
value
;
this
.
scaleX
=
this
.
scaleY
=
value
;
}
}
getBoundingBox
()
{
getBoundingBox
()
{
const
getParentData
=
(
item
)
=>
{
const
getParentData
=
(
item
)
=>
{
...
@@ -1956,6 +1957,10 @@ export class HotZoneItem extends MySprite {
...
@@ -1956,6 +1957,10 @@ export class HotZoneItem extends MySprite {
audio_url
;
audio_url
;
pic_url
;
pic_url
;
text
;
text
;
gIdx
;
isAnimaStyle
=
false
;
private
_itemType
;
private
_itemType
;
private
shapeRect
:
ShapeRect
;
private
shapeRect
:
ShapeRect
;
...
@@ -2056,7 +2061,10 @@ export class HotZoneItem extends MySprite {
...
@@ -2056,7 +2061,10 @@ export class HotZoneItem extends MySprite {
this
.
hideLabel
();
this
.
hideLabel
();
}
}
setAnimaStyle
(
isAnimaStyle
)
{
this
.
isAnimaStyle
=
isAnimaStyle
;
console
.
log
(
'
in setAnimaStyle
'
)
}
drawArrow
()
{
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
if
(
!
this
.
arrow
)
{
return
;
}
...
@@ -2068,13 +2076,16 @@ export class HotZoneItem extends MySprite {
...
@@ -2068,13 +2076,16 @@ export class HotZoneItem extends MySprite {
this
.
arrow
.
update
();
this
.
arrow
.
update
();
this
.
arrowTop
.
x
=
rect
.
x
+
rect
.
width
/
2
;
if
(
!
this
.
isAnimaStyle
)
{
this
.
arrowTop
.
y
=
rect
.
y
;
this
.
arrowTop
.
x
=
rect
.
x
+
rect
.
width
/
2
;
this
.
arrowTop
.
update
();
this
.
arrowTop
.
y
=
rect
.
y
;
this
.
arrowTop
.
update
();
this
.
arrowRight
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrowRight
.
y
=
rect
.
y
+
rect
.
height
/
2
;
this
.
arrowRight
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrowRight
.
update
();
this
.
arrowRight
.
y
=
rect
.
y
+
rect
.
height
/
2
;
this
.
arrowRight
.
update
();
}
}
}
drawFrame
()
{
drawFrame
()
{
...
@@ -2197,10 +2208,155 @@ export class HotZoneLabel extends Label {
...
@@ -2197,10 +2208,155 @@ export class HotZoneLabel extends Label {
this
.
drawFrame
();
this
.
drawFrame
();
}
}
getLabelRect
()
{
const
rect
=
this
.
getBoundingBox
();
const
width
=
rect
.
width
/
this
.
scaleX
;
const
height
=
this
.
height
*
this
.
scaleY
;
const
x
=
this
.
x
-
width
/
2
;
const
y
=
this
.
y
-
height
/
2
;
return
{
width
,
height
,
x
,
y
};
}
}
}
export
class
HotZoneAction
extends
MySprite
{
}
export
class
DragItem
extends
MySprite
{
lineDashFlag
=
true
;
item
;
init
()
{
this
.
anchorX
=
0.5
;
this
.
anchorY
=
0.5
;
this
.
initCenterCircle
();
}
setSize
(
w
,
h
)
{
this
.
anchorX
=
0.5
;
this
.
anchorY
=
0.5
;
this
.
width
=
w
;
this
.
height
=
h
;
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
// rect.setSize(w, h);
// rect.fillColor = '#000000';
// rect.alpha = 0.1;
// this.addChild(rect);
}
initCenterCircle
()
{
const
circle
=
new
ShapeCircle
(
this
.
ctx
);
circle
.
setRadius
(
10
);
circle
.
fillColor
=
'
#ffa568
'
this
.
addChild
(
circle
);
this
.
width
=
circle
.
width
;
this
.
height
=
circle
.
height
;
}
getPosition
()
{
return
{
x
:
this
.
x
,
y
:
this
.
y
};
}
drawLine
()
{
if
(
!
this
.
item
)
{
return
;
}
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
//+ w / 2;
const
y
=
rect
.
y
//+ h / 2;
this
.
ctx
.
setLineDash
([
4
,
4
]);
this
.
ctx
.
lineWidth
=
1
;
this
.
ctx
.
strokeStyle
=
'
#ffa568
'
;
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
this
.
item
.
x
,
this
.
item
.
y
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
//+ w / 2;
const
y
=
rect
.
y
//+ h / 2;
this
.
ctx
.
setLineDash
([
4
,
4
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#ffa568
'
;
// this.ctx.fillStyle = '#ffffff';
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
if
(
this
.
lineDashFlag
)
{
this
.
drawLine
();
// this.drawFrame();
// this.drawArrow();
}
}
}
export
class
EditorItem
extends
MySprite
{
export
class
EditorItem
extends
MySprite
{
...
@@ -2208,6 +2364,8 @@ export class EditorItem extends MySprite {
...
@@ -2208,6 +2364,8 @@ export class EditorItem extends MySprite {
arrow
:
MySprite
;
arrow
:
MySprite
;
label
:
Label
;
label
:
Label
;
text
;
text
;
arrowTop
;
arrowRight
;
showLabel
(
text
=
null
)
{
showLabel
(
text
=
null
)
{
...
@@ -2246,6 +2404,13 @@ export class EditorItem extends MySprite {
...
@@ -2246,6 +2404,13 @@ export class EditorItem extends MySprite {
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
setScaleXY
(
0.06
);
this
.
arrow
.
setScaleXY
(
0.06
);
// this.arrowTop = new MySprite(this.ctx);
// this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
// this.arrowTop.setScaleXY(0.06);
//
// this.arrowRight = new MySprite(this.ctx);
// this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
// this.arrowRight.setScaleXY(0.06);
}
}
this
.
showLabel
();
this
.
showLabel
();
...
@@ -2262,16 +2427,25 @@ export class EditorItem extends MySprite {
...
@@ -2262,16 +2427,25 @@ export class EditorItem extends MySprite {
this
.
hideLabel
();
this
.
hideLabel
();
}
}
refreshLabelScale
()
{}
drawArrow
()
{
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
if
(
!
this
.
arrow
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
const
rect
=
this
.
getBoundingBox
();
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
update
();
this
.
arrow
.
update
();
// this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y;
// this.arrowTop.update();
//
// this.arrowRight.x = rect.x + rect.width;
// this.arrowRight.y = rect.y + rect.height / 2;
// this.arrowRight.update();
}
}
drawFrame
()
{
drawFrame
()
{
...
@@ -2325,784 +2499,3 @@ export class EditorItem extends MySprite {
...
@@ -2325,784 +2499,3 @@ export class EditorItem extends MySprite {
}
}
//
//
// import TWEEN from '@tweenjs/tween.js';
//
//
// class Sprite {
// x = 0;
// y = 0;
// color = '';
// radius = 0;
// alive = false;
// margin = 0;
// angle = 0;
// ctx;
//
// constructor(ctx) {
// this.ctx = ctx;
// }
// update($event) {
// this.draw();
// }
// draw() {
//
// }
//
// }
//
//
//
//
//
// export class MySprite extends Sprite {
//
// width = 0;
// height = 0;
// _anchorX = 0;
// _anchorY = 0;
// _offX = 0;
// _offY = 0;
// scaleX = 1;
// scaleY = 1;
// alpha = 1;
// rotation = 0;
// visible = true;
//
// children = [this];
//
// img;
// _z = 0;
//
//
// init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
//
// if (imgObj) {
//
// this.img = imgObj;
//
// this.width = this.img.width;
// this.height = this.img.height;
// }
//
// this.anchorX = anchorX;
// this.anchorY = anchorY;
// }
//
//
//
// update($event = null) {
// if (this.visible) {
// this.draw();
// }
// }
// draw() {
//
// this.ctx.save();
//
// this.drawInit();
//
// this.updateChildren();
//
// this.ctx.restore();
// }
//
// drawInit() {
//
// this.ctx.translate(this.x, this.y);
//
// this.ctx.rotate(this.rotation * Math.PI / 180);
//
// this.ctx.scale(this.scaleX, this.scaleY);
//
// this.ctx.globalAlpha = this.alpha;
//
// }
//
// drawSelf() {
// if (this.img) {
// this.ctx.drawImage(this.img, this._offX, this._offY);
// }
// }
//
// updateChildren() {
//
// if (this.children.length <= 0) { return; }
//
// for (let i = 0; i < this.children.length; i++) {
//
// if (this.children[i] === this) {
//
// this.drawSelf();
// } else {
//
// this.children[i].update();
// }
// }
// }
//
//
// load(url, anchorX = 0.5, anchorY = 0.5) {
//
// return new Promise((resolve, reject) => {
// const img = new Image();
// img.onload = () => resolve(img);
// img.onerror = reject;
// img.src = url;
// }).then(img => {
//
// this.init(img, anchorX, anchorY);
// return img;
// });
// }
//
// addChild(child, z = 1) {
// if (this.children.indexOf(child) === -1) {
// this.children.push(child);
// child._z = z;
// child.parent = this;
// }
//
// this.children.sort((a, b) => {
// return a._z - b._z;
// });
//
// }
// removeChild(child) {
// const index = this.children.indexOf(child);
// if (index !== -1) {
// this.children.splice(index, 1);
// }
// }
//
// set anchorX(value) {
// this._anchorX = value;
// this.refreshAnchorOff();
// }
// get anchorX() {
// return this._anchorX;
// }
// set anchorY(value) {
// this._anchorY = value;
// this.refreshAnchorOff();
// }
// get anchorY() {
// return this._anchorY;
// }
// refreshAnchorOff() {
// this._offX = -this.width * this.anchorX;
// this._offY = -this.height * this.anchorY;
// }
//
// setScaleXY(value) {
// this.scaleX = this.scaleY = value;
// }
//
// getBoundingBox() {
//
// const x = this.x + this._offX * this.scaleX;
// const y = this.y + this._offY * this.scaleY;
// const width = this.width * this.scaleX;
// const height = this.height * this.scaleY;
//
// return {x, y, width, height};
// }
//
// }
//
//
//
//
//
// export class Item extends MySprite {
//
// baseX;
//
// move(targetY, callBack) {
//
// const self = this;
//
// const tween = new TWEEN.Tween(this)
// .to({ y: targetY }, 2500)
// .easing(TWEEN.Easing.Quintic.Out)
// .onComplete(function() {
//
// self.hide(callBack);
// // if (callBack) {
// // callBack();
// // }
// })
// .start();
//
// }
//
// show(callBack = null) {
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 1 }, 800)
// // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
// if (callBack) {
// callBack();
// }
// })
// .start(); // Start the tween immediately.
//
// }
//
// hide(callBack = null) {
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 0 }, 800)
// // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
// if (callBack) {
// callBack();
// }
// })
// .start(); // Start the tween immediately.
// }
//
//
// shake(id) {
//
//
// if (!this.baseX) {
// this.baseX = this.x;
// }
//
// const baseX = this.baseX;
// const baseTime = 50;
// const sequence = [
// {target: {x: baseX + 40 * id}, time: baseTime - 25},
// {target: {x: baseX - 20 * id}, time: baseTime},
// {target: {x: baseX + 10 * id}, time: baseTime},
// {target: {x: baseX - 5 * id}, time: baseTime},
// {target: {x: baseX + 2 * id}, time: baseTime},
// {target: {x: baseX - 1 * id}, time: baseTime},
// {target: {x: baseX}, time: baseTime},
//
// ];
//
//
// const self = this;
//
// function runSequence() {
//
// if (self['shakeTween']) {
// self['shakeTween'].stop();
// }
//
// const tween = new TWEEN.Tween(self);
//
// if (sequence.length > 0) {
// // console.log('sequence.length: ', sequence.length);
// const action = sequence.shift();
// tween.to(action['target'], action['time']);
// tween.onComplete( () => {
// runSequence();
// });
// tween.start();
//
// self['shakeTween'] = tween;
// }
// }
//
// runSequence();
//
// }
//
//
//
// drop(targetY, callBack = null) {
//
// const self = this;
//
// const time = Math.abs(targetY - this.y) * 2.4;
//
// this.alpha = 1;
//
// const tween = new TWEEN.Tween(this)
// .to({ y: targetY }, time)
// .easing(TWEEN.Easing.Cubic.In)
// .onComplete(function() {
//
// // self.hideItem(callBack);
// if (callBack) {
// callBack();
// }
// })
// .start();
//
//
// }
//
//
// }
//
//
// export class EndSpr extends MySprite {
//
// show(s) {
//
// this.scaleX = this.scaleY = 0;
// this.alpha = 0;
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
// .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
//
// })
// .start(); // Start the tween immediately.
//
// }
// }
//
//
//
// export class ShapeRect extends MySprite {
//
// fillColor = '#FF0000';
//
// setSize(w, h) {
// this.width = w;
// this.height = h;
//
// console.log('w:', w);
// console.log('h:', h);
// }
//
// drawShape() {
//
// this.ctx.fillStyle = this.fillColor;
// this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
//
// }
//
//
// drawSelf() {
// super.drawSelf();
// this.drawShape();
// }
// }
//
//
// export class HotZoneItem extends MySprite {
//
//
// lineDashFlag = false;
// arrow: MySprite;
// label: Label;
// title;
//
// arrowTop;
// arrowRight;
//
// audio_url;
// pic_url;
// text;
// private _itemType;
// private shapeRect: ShapeRect;
//
// get itemType() {
// return this._itemType;
// }
// set itemType(value) {
// this._itemType = value;
// }
//
// setSize(w, h) {
// this.width = w;
// this.height = h;
//
//
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
// rect.setSize(w, h);
// rect.fillColor = '#ffffff';
// rect.alpha = 0.2;
// this.addChild(rect);
// }
//
// showLabel(text = null) {
//
//
// if (!this.label) {
// this.label = new Label(this.ctx);
// this.label.anchorY = 0;
// this.label.fontSize = '40px';
// this.label.textAlign = 'center';
// this.addChild(this.label);
// // this.label.scaleX = 1 / this.scaleX;
// // this.label.scaleY = 1 / this.scaleY;
//
// this.refreshLabelScale();
//
// }
//
// if (text) {
// this.label.text = text;
// } else if (this.title) {
// this.label.text = this.title;
// }
// this.label.visible = true;
//
// }
//
// hideLabel() {
// if (!this.label) { return; }
//
// this.label.visible = false;
// }
//
// refreshLabelScale() {
// if (this.scaleX == this.scaleY) {
// this.label.setScaleXY(1);
// }
//
// if (this.scaleX > this.scaleY) {
// this.label.scaleX = this.scaleY / this.scaleX;
// } else {
// this.label.scaleY = this.scaleX / this.scaleY;
// }
// }
//
// showLineDash() {
// this.lineDashFlag = true;
//
// if (this.arrow) {
// this.arrow.visible = true;
// } else {
// this.arrow = new MySprite(this.ctx);
// this.arrow.load('assets/common/arrow.png', 1, 0);
// this.arrow.setScaleXY(0.06);
//
// this.arrowTop = new MySprite(this.ctx);
// this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
// this.arrowTop.setScaleXY(0.06);
//
// this.arrowRight = new MySprite(this.ctx);
// this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
// this.arrowRight.setScaleXY(0.06);
// }
//
// this.showLabel();
// }
//
// hideLineDash() {
//
// this.lineDashFlag = false;
//
// if (this.arrow) {
// this.arrow.visible = false;
// }
//
// this.hideLabel();
// }
//
//
//
// drawArrow() {
// if (!this.arrow) { return; }
//
// const rect = this.getBoundingBox();
// this.arrow.x = rect.x + rect.width;
// this.arrow.y = rect.y;
//
// this.arrow.update();
//
//
// this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y;
// this.arrowTop.update();
//
// this.arrowRight.x = rect.x + rect.width;
// this.arrowRight.y = rect.y + rect.height / 2;
// this.arrowRight.update();
// }
//
// drawFrame() {
//
//
// this.ctx.save();
//
//
// const rect = this.getBoundingBox();
//
// const w = rect.width;
// const h = rect.height;
// const x = rect.x + w / 2;
// const y = rect.y + h / 2;
//
// this.ctx.setLineDash([5, 5]);
// this.ctx.lineWidth = 2;
// this.ctx.strokeStyle = '#1bfff7';
// // this.ctx.fillStyle = '#ffffff';
//
// this.ctx.beginPath();
//
// this.ctx.moveTo( x - w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y - h / 2);
//
// // this.ctx.fill();
// this.ctx.stroke();
//
//
//
//
// this.ctx.restore();
//
// }
//
// draw() {
// super.draw();
//
// if (this.lineDashFlag) {
// this.drawFrame();
// this.drawArrow();
// }
// }
// }
//
//
// export class EditorItem extends MySprite {
//
// lineDashFlag = false;
// arrow: MySprite;
// label:Label;
// text;
//
// showLabel(text = null) {
//
//
// if (!this.label) {
// this.label = new Label(this.ctx);
// this.label.anchorY = 0;
// this.label.fontSize = '50px';
// this.label.textAlign = 'center';
// this.addChild(this.label);
// this.label.setScaleXY(1 / this.scaleX);
// }
//
// if (text) {
// this.label.text = text;
// } else if (this.text) {
// this.label.text = this.text;
// }
// this.label.visible = true;
//
// }
//
// hideLabel() {
// if (!this.label) { return; }
//
// this.label.visible = false;
// }
//
// showLineDash() {
// this.lineDashFlag = true;
//
// if (this.arrow) {
// this.arrow.visible = true;
// } else {
// this.arrow = new MySprite(this.ctx);
// this.arrow.load('assets/common/arrow.png', 1, 0);
// this.arrow.setScaleXY(0.06);
//
// }
//
// this.showLabel();
// }
//
// hideLineDash() {
//
// this.lineDashFlag = false;
//
// if (this.arrow) {
// this.arrow.visible = false;
// }
//
// this.hideLabel();
// }
//
//
//
// drawArrow() {
// if (!this.arrow) { return; }
//
// const rect = this.getBoundingBox();
// this.arrow.x = rect.x + rect.width;
// this.arrow.y = rect.y;
//
// this.arrow.update();
// }
//
// drawFrame() {
//
//
// this.ctx.save();
//
//
// const rect = this.getBoundingBox();
//
// const w = rect.width;
// const h = rect.height;
// const x = rect.x + w / 2;
// const y = rect.y + h / 2;
//
// this.ctx.setLineDash([5, 5]);
// this.ctx.lineWidth = 2;
// this.ctx.strokeStyle = '#1bfff7';
// // this.ctx.fillStyle = '#ffffff';
//
// this.ctx.beginPath();
//
// this.ctx.moveTo( x - w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y - h / 2);
//
// // this.ctx.fill();
// this.ctx.stroke();
//
//
//
//
// this.ctx.restore();
//
// }
//
// draw() {
// super.draw();
//
// if (this.lineDashFlag) {
// this.drawFrame();
// this.drawArrow();
// }
// }
// }
//
//
//
// export class Label extends MySprite {
//
// text:String;
// fontSize:String = '40px';
// fontName:String = 'Verdana';
// textAlign:String = 'left';
//
//
// constructor(ctx) {
// super(ctx);
// this.init();
// }
//
// drawText() {
//
// // console.log('in drawText', this.text);
//
// if (!this.text) { return; }
//
// this.ctx.font = `${this.fontSize} ${this.fontName}`;
// this.ctx.textAlign = this.textAlign;
// this.ctx.textBaseline = 'middle';
// this.ctx.fontWeight = 900;
//
// this.ctx.lineWidth = 5;
// this.ctx.strokeStyle = '#ffffff';
// this.ctx.strokeText(this.text, 0, 0);
//
// this.ctx.fillStyle = '#000000';
// this.ctx.fillText(this.text, 0, 0);
//
//
// }
//
//
// drawSelf() {
// super.drawSelf();
// this.drawText();
// }
//
// }
//
//
//
// export function getPosByAngle(angle, len) {
//
// const radian = angle * Math.PI / 180;
// const x = Math.sin(radian) * len;
// const y = Math.cos(radian) * len;
//
// return {x, y};
//
// }
//
// export function getAngleByPos(px, py, mx, my) {
//
// // const _x = p2x - p1x;
// // const _y = p2y - p1y;
// // const tan = _y / _x;
// //
// // const radina = Math.atan(tan); // 用反三角函数求弧度
// // const angle = Math.floor(180 / (Math.PI / radina)); //
// //
// // console.log('r: ' , angle);
// // return angle;
// //
//
//
//
// const x = Math.abs(px - mx);
// const y = Math.abs(py - my);
// // const x = Math.abs(mx - px);
// // const y = Math.abs(my - py);
// const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
// const cos = y / z;
// const radina = Math.acos(cos); // 用反三角函数求弧度
// let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
//
// if(mx > px && my > py) {// 鼠标在第四象限
// angle = 180 - angle;
// }
//
// if(mx === px && my > py) {// 鼠标在y轴负方向上
// angle = 180;
// }
//
// if(mx > px && my === py) {// 鼠标在x轴正方向上
// angle = 90;
// }
//
// if(mx < px && my > py) {// 鼠标在第三象限
// angle = 180 + angle;
// }
//
// if(mx < px && my === py) {// 鼠标在x轴负方向
// angle = 270;
// }
//
// if(mx < px && my < py) {// 鼠标在第二象限
// angle = 360 - angle;
// }
//
// // console.log('angle: ', angle);
// return angle;
//
// }
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
c5ea2600
...
@@ -32,33 +32,143 @@
...
@@ -32,33 +32,143 @@
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<div
style=
"margin-top: -20px; margin-bottom: 5px; width: 100%;"
>
<div
style=
"margin-top: -20px; margin-bottom: 5px"
>
<div
*
ngIf=
"customTypeGroupArr"
>
<nz-radio-group
[
ngModel
]="
it
.
itemType
"
(
ngModelChange
)="
radioChange
($
event
,
it
)"
>
<nz-radio-group
[
ngModel
]="
it
.
gIdx
"
(
ngModelChange
)="
customRadioChange
($
event
,
it
)"
style=
"display: flex; align-items: center; justify-content: center; flex-wrap: wrap;"
>
<label
*
ngIf=
"isHasRect"
nz-radio
nzValue=
"rect"
>
矩形
</label>
<div
*
ngFor=
"let group of customTypeGroupArr; let gIdx = index"
style=
"display: flex; "
>
<label
*
ngIf=
"isHasPic"
nz-radio
nzValue=
"pic"
>
图片
</label>
<label
nz-radio
nzValue=
"{{gIdx}}"
>
{{group.name}}
</label>
<label
*
ngIf=
"isHasText"
nz-radio
nzValue=
"text"
>
文本
</label>
</div>
</nz-radio-group>
</nz-radio-group>
</div>
<div
*
ngIf=
"it.itemType == 'pic'"
>
</div>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
<!-- <div *ngIf="!customTypeGroupArr">
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
</app-upload-image-with-preview>
</div>
<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
*
ngIf=
"it.itemType == 'text'"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
</div>
<div
style=
"width: 100%; margin-top: 5px;"
>
<div
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[it.gIdx]"
>
<app-audio-recorder
[
audioUrl
]="
it
.
audio_url
"
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].pic"
>
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
<app-upload-image-with-preview
></app-audio-recorder>
[
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: 50px; margin-right: 15px;"
(
blur
)="
saveItemPos
(
it
)"
>
y:
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
posY
"
style=
"width: 50px"
(
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]?.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]?.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>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="it.itemType == 'text'">
<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;">
<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>
</div>
</div>
...
@@ -83,12 +193,29 @@
...
@@ -83,12 +193,29 @@
<div
class=
"save-box"
>
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
<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>
<i
nz-icon
nzType=
"save"
></i>
Save
Save
</button>
</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>
</div>
...
@@ -98,3 +225,52 @@
...
@@ -98,3 +225,52 @@
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
<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 @
c5ea2600
...
@@ -81,6 +81,10 @@
...
@@ -81,6 +81,10 @@
}
}
}
}
.anima-upload-btn
{
padding
:
10px
;
}
h5
{
h5
{
margin-top
:
1rem
;
margin-top
:
1rem
;
}
}
...
@@ -89,8 +93,8 @@ h5 {
...
@@ -89,8 +93,8 @@ h5 {
@font-face
@font-face
{
{
font-family
:
'BRLNSR_
1'
;
font-family
:
'ahronbd-
1'
;
src
:
url("/assets/font/BRLNSR_1.TTF
")
;
src
:
url("/assets/font/ahronbd-1.ttf
")
;
}
}
...
@@ -105,106 +109,3 @@ h5 {
...
@@ -105,106 +109,3 @@ 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 @
c5ea2600
import
{
import
{
ApplicationRef
,
ChangeDetectorRef
,
Component
,
Component
,
ElementRef
,
ElementRef
,
EventEmitter
,
EventEmitter
,
...
@@ -12,10 +14,11 @@ import {
...
@@ -12,10 +14,11 @@ import {
}
from
'
@angular/core
'
;
}
from
'
@angular/core
'
;
import
{
Subject
}
from
'
rxjs
'
;
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
{
DragItem
,
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
,
ShapeRect
,
ShapeRectNew
}
from
'
./Unit
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
getMinScale
}
from
"
../../play/Unit
"
;
import
{
getMinScale
}
from
'
../../play/Unit
'
;
import
{
tar
}
from
"
compressing
"
;
import
{
tar
}
from
'
compressing
'
;
import
{
NzMessageService
}
from
'
ng-zorro-antd
'
;
@
Component
({
@
Component
({
...
@@ -25,18 +28,14 @@ import {tar} from "compressing";
...
@@ -25,18 +28,14 @@ import {tar} from "compressing";
})
})
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
Input
()
imgItemArr
=
null
;
@
Input
()
@
Input
()
hotZoneItemArr
=
null
;
hotZoneItemArr
=
null
;
@
Input
()
@
Input
()
hotZoneArr
=
null
;
hotZoneArr
=
null
;
@
Output
()
save
=
new
EventEmitter
();
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
Input
()
@
Input
()
isHasRect
=
true
;
isHasRect
=
true
;
@
Input
()
@
Input
()
...
@@ -44,16 +43,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -44,16 +43,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@
Input
()
@
Input
()
isHasText
=
true
;
isHasText
=
true
;
@
Input
()
@
Input
()
hotZoneFontObj
=
{
isHasAudio
=
true
;
size
:
50
,
@
Input
()
name
:
'
BRLNSR_1
'
,
isHasAnima
=
false
;
color
:
'
#8f3758
'
@
Input
()
}
customTypeGroupArr
;
// [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...]
@
Input
()
// hotZoneFontObj;
@
Input
()
isCopyData
=
false
;
hotZoneFontObj
;
// hotZoneFontObj = {
// size: 50,
// name: 'ahronbd-1',
// color: '#8f3758'
// }
@
Input
()
@
Input
()
defaultItemType
=
'
text
'
;
defaultItemType
=
'
text
'
;
@
Input
()
@
Input
()
hotZoneImgSize
=
190
;
hotZoneImgSize
=
0
;
@
Output
()
save
=
new
EventEmitter
();
saveDisabled
=
true
;
saveDisabled
=
true
;
...
@@ -86,8 +100,43 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -86,8 +100,43 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSizeFlag
=
false
;
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
animaPanelVisible
=
false
;
constructor
()
{
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
'
,
]
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
;
};
}
}
_bgItem
=
null
;
_bgItem
=
null
;
...
@@ -110,11 +159,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -110,11 +159,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
ngOnInit
()
{
ngOnInit
()
{
this
.
initListener
();
this
.
initListener
();
// this.init();
// this.init();
this
.
update
();
this
.
update
();
this
.
refresh
();
}
}
ngOnDestroy
()
{
ngOnDestroy
()
{
...
@@ -136,10 +188,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -136,10 +188,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onItemImgUploadSuccess
(
e
,
item
)
{
onItemImgUploadSuccess
(
e
,
item
)
{
item
.
pic_url
=
e
.
url
;
item
.
pic_url
=
e
.
url
;
this
.
loadHotZonePic
(
item
.
pic
,
e
.
url
);
this
.
loadHotZonePic
(
item
.
pic
,
e
.
url
);
this
.
refresh
();
}
}
onItemAudioUploadSuccess
(
e
,
item
)
{
onItemAudioUploadSuccess
(
e
,
item
)
{
item
.
audio_url
=
e
.
url
;
item
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
}
...
@@ -150,37 +204,61 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -150,37 +204,61 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
renderArr
.
push
(
this
.
bg
);
this
.
renderArr
.
push
(
this
.
bg
);
}
}
if
(
!
this
.
bgItem
.
url
)
{
this
.
bgItem
.
url
=
'
http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg
'
;
}
const
bg
=
this
.
bg
;
const
bg
=
this
.
bg
;
if
(
this
.
bgItem
.
url
)
{
//
if (this.bgItem.url) {
bg
.
load
(
this
.
bgItem
.
url
).
then
(()
=>
{
bg
.
load
(
this
.
bgItem
.
url
).
then
(()
=>
{
const
rate1
=
this
.
canvasWidth
/
bg
.
width
;
const
rate1
=
this
.
canvasWidth
/
bg
.
width
;
const
rate2
=
this
.
canvasHeight
/
bg
.
height
;
const
rate2
=
this
.
canvasHeight
/
bg
.
height
;
const
rate
=
Math
.
min
(
rate1
,
rate2
);
const
rate
=
Math
.
min
(
rate1
,
rate2
);
bg
.
setScaleXY
(
rate
);
bg
.
setScaleXY
(
rate
);
bg
.
x
=
this
.
canvasWidth
/
2
;
bg
.
y
=
this
.
canvasHeight
/
2
;
bg
.
removeChildren
();
bg
.
x
=
this
.
canvasWidth
/
2
;
const
bgBorder
=
new
ShapeRectNew
(
this
.
ctx
);
bg
.
y
=
this
.
canvasHeight
/
2
;
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
();
if
(
callBack
)
{
}
callBack
();
});
}
}
this
.
refresh
();
});
// }
}
}
addBtnClick
()
{
addBtnClick
(
data
=
null
)
{
// this.imgArr.push({});
// this.imgArr.push({});
// this.hotZoneArr.push({});
// this.hotZoneArr.push({});
const
item
=
this
.
getHotZoneItem
();
const
item
=
this
.
getHotZoneItem
(
data
);
this
.
hotZoneArr
.
push
(
item
);
this
.
hotZoneArr
.
push
(
item
);
this
.
refreshItem
(
item
);
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
...
@@ -191,6 +269,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -191,6 +269,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
item
=
this
.
hotZoneArr
.
splice
(
index
,
1
)[
0
];
const
item
=
this
.
hotZoneArr
.
splice
(
index
,
1
)[
0
];
removeItemFromArr
(
this
.
renderArr
,
item
.
pic
);
removeItemFromArr
(
this
.
renderArr
,
item
.
pic
);
removeItemFromArr
(
this
.
renderArr
,
item
.
textLabel
);
removeItemFromArr
(
this
.
renderArr
,
item
.
textLabel
);
removeItemFromArr
(
this
.
renderArr
,
item
.
drag
);
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
...
@@ -199,6 +278,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -199,6 +278,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onImgUploadSuccessByImg
(
e
,
img
)
{
onImgUploadSuccessByImg
(
e
,
img
)
{
img
.
pic_url
=
e
.
url
;
img
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
img
);
this
.
refreshImage
(
img
);
this
.
refresh
();
}
}
refreshImage
(
img
)
{
refreshImage
(
img
)
{
...
@@ -221,6 +301,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -221,6 +301,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
}
}
this
.
refresh
();
}
}
...
@@ -245,10 +326,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -245,10 +326,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
anchorX
=
0.5
;
item
.
anchorX
=
0.5
;
item
.
anchorY
=
0.5
;
item
.
anchorY
=
0.5
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
itemType
=
this
.
defaultItemType
;
item
.
itemType
=
this
.
getDefaultItemType
();
item
.
gIdx
=
'
0
'
;
item
[
'
id
'
]
=
this
.
createItemId
()
// new Date().getTime().toString();
item
[
'
data
'
]
=
saveData
;
console
.
log
(
'
item.x:
'
,
item
.
x
);
if
(
saveData
)
{
if
(
saveData
)
{
...
@@ -257,41 +346,203 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -257,41 +346,203 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
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
();
item
.
showLineDash
();
const
pic
=
new
HotZoneImg
(
this
.
ctx
);
// const pic = new HotZoneImg(this.ctx);
this
.
setItemPic
(
item
,
saveData
);
this
.
setItemLabel
(
item
,
saveData
);
this
.
setItemAnima
(
item
,
saveData
);
this
.
setItemDrag
(
item
,
saveData
);
return
item
;
}
setItemPic
(
item
,
saveData
)
{
console
.
log
(
'
in setItemPic
'
,
saveData
);
const
pic
=
new
EditorItem
(
this
.
ctx
);
pic
.
visible
=
false
;
pic
.
visible
=
false
;
item
[
'
pic
'
]
=
pic
;
item
[
'
pic
'
]
=
pic
;
if
(
saveData
&&
saveData
.
pic_url
)
{
if
(
saveData
)
{
this
.
loadHotZonePic
(
pic
,
saveData
.
pic_url
);
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
.
x
=
item
.
x
;
pic
.
y
=
item
.
y
;
pic
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
pic
);
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
;
}
}
// console.log('item.itemType: ', item.itemType);
// let w = item.width;
// let h = item.height;
// if (saveData) {
// switch (saveData.itemType) {
// case 'rect':
// w = saveData.rect.width;
// h = saveData.rect.height;
// break;
// case 'pic':
// w = saveData.imgSizeW * saveData.imgScale;
// h = saveData.imgSizeH * saveData.imgScale;;
// break;
// case 'text':
// w = saveData.rect.width;
// h = saveData.rect.height;
// break;
// }
// }
// dragItem.setSize(w, h);
}
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);
}
setItemLabel
(
item
,
saveData
)
{
const
textLabel
=
new
HotZoneLabel
(
this
.
ctx
);
const
textLabel
=
new
HotZoneLabel
(
this
.
ctx
);
textLabel
.
fontSize
=
this
.
hotZoneFontObj
.
size
;
if
(
this
.
hotZoneFontObj
)
{
textLabel
.
fontName
=
this
.
hotZoneFontObj
.
name
;
textLabel
.
fontSize
=
this
.
hotZoneFontObj
.
size
;
textLabel
.
fontColor
=
this
.
hotZoneFontObj
.
color
;
textLabel
.
fontName
=
this
.
hotZoneFontObj
.
name
;
textLabel
.
fontColor
=
this
.
hotZoneFontObj
.
color
;
}
textLabel
.
textAlign
=
'
center
'
;
textLabel
.
textAlign
=
'
center
'
;
// textLabel.setOutline();
// textLabel.setOutline();
// console.log('saveData:', saveData);
item
[
'
textLabel
'
]
=
textLabel
;
item
[
'
textLabel
'
]
=
textLabel
;
textLabel
.
setScaleXY
(
this
.
mapScale
);
textLabel
.
setScaleXY
(
this
.
mapScale
);
if
(
saveData
&&
saveData
.
text
)
{
if
(
saveData
)
{
textLabel
.
text
=
saveData
.
text
;
if
(
saveData
.
text
&&
this
.
hotZoneFontObj
)
{
textLabel
.
text
=
saveData
.
text
}
this
.
setActionFont
(
textLabel
,
saveData
[
'
actionData_
'
+
item
.
gIdx
]);
textLabel
.
refreshSize
();
textLabel
.
refreshSize
();
}
}
textLabel
.
x
=
item
.
x
;
textLabel
.
x
=
item
.
x
;
textLabel
.
y
=
item
.
y
;
textLabel
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
textLabel
);
this
.
renderArr
.
push
(
textLabel
);
}
return
item
;
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
];
}
}
}
}
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
)
{
getPicItem
(
img
,
saveData
=
null
)
{
...
@@ -327,9 +578,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -327,9 +578,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
else
{
}
else
{
item
.
showLineDash
();
//
item.showLineDash();
}
}
item
.
showLineDash
();
console
.
log
(
'
aaa
'
);
});
});
return
item
;
return
item
;
}
}
...
@@ -337,6 +590,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -337,6 +590,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onAudioUploadSuccessByImg
(
e
,
img
)
{
onAudioUploadSuccessByImg
(
e
,
img
)
{
img
.
audio_url
=
e
.
url
;
img
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
}
deleteItem
(
e
,
i
)
{
deleteItem
(
e
,
i
)
{
...
@@ -345,15 +599,111 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -345,15 +599,111 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
this
.
refresh
();
}
}
// radioChange(e, item) {
// item.itemType = e;
radioChange
(
e
,
item
)
{
// this.refreshItem(item);
item
.
itemType
=
e
;
// this.refresh();
// // console.log(' in radioChange e: ', e);
// }
this
.
refreshItem
(
item
);
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];
// console.log(' in radioChange e: ', 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
&&
!
group
.
anima
)
{
this
.
showItemPic
(
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
);
}
}
item
.
drag
.
visible
=
group
.
drag
;
item
.
setAnimaStyle
(
group
.
animaSmall
)
}
showItemDrag
(
item
)
{
item
.
drag
.
visible
=
true
;
// item.dragBody.visible = true;
// item.itemType = 'pic';
// this.showArrowTop(item)
}
showItemPic
(
item
)
{
item
.
pic
.
visible
=
true
;
item
.
itemType
=
'
pic
'
;
this
.
showArrowTop
(
item
,
true
)
}
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
)
}
showArrowTop
(
item
,
isShowArrowTop
=
false
)
{
if
(
isShowArrowTop
)
{
item
.
arrowTop
.
visible
=
true
;
item
.
arrowRight
.
visible
=
true
;
}
else
{
item
.
arrowTop
.
visible
=
false
;
item
.
arrowRight
.
visible
=
false
;
}
}
hideHotZoneItem
(
item
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
}
}
refreshItem
(
item
)
{
refreshItem
(
item
)
{
...
@@ -368,33 +718,30 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -368,33 +718,30 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
setTextState
(
item
);
this
.
setTextState
(
item
);
break
;
break
;
default
:
default
:
this
.
setNoneState
(
item
);
}
}
}
}
init
()
{
init
()
{
console
.
log
(
'
init
'
);
this
.
initData
();
this
.
initData
();
this
.
initCtx
();
this
.
initCtx
();
this
.
initItem
();
this
.
initItem
();
}
}
initItem
()
{
initItem
()
{
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
if
(
!
this
.
bgItem
)
{
if
(
!
this
.
bgItem
)
{
this
.
bgItem
=
{};
this
.
bgItem
=
{};
}
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
{
...
@@ -404,6 +751,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -404,6 +751,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
});
});
}
}
this
.
refresh
();
}
}
initHotZoneArr
()
{
initHotZoneArr
()
{
...
@@ -427,6 +775,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -427,6 +775,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
=
[];
this
.
hotZoneArr
=
[];
const
arr
=
this
.
hotZoneItemArr
.
concat
();
const
arr
=
this
.
hotZoneItemArr
.
concat
();
console
.
log
(
'
this.hotZoneItemArr:
'
,
this
.
hotZoneItemArr
);
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
...
@@ -449,9 +798,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -449,9 +798,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
pic_url
=
data
.
pic_url
;
item
.
pic_url
=
data
.
pic_url
;
item
.
text
=
data
.
text
;
item
.
text
=
data
.
text
;
item
.
itemType
=
data
.
itemType
;
item
.
itemType
=
data
.
itemType
;
this
.
refreshItem
(
item
);
console
.
log
(
'
item:
'
,
item
);
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
console
.
log
(
'
1 item:
'
,
item
);
this
.
hotZoneArr
.
push
(
item
);
this
.
hotZoneArr
.
push
(
item
);
}
}
...
@@ -463,48 +818,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -463,48 +818,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
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
()
{
initData
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
...
@@ -528,9 +841,28 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -528,9 +841,28 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
// 先检测拖拽点
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
];
const
item
=
this
.
hotZoneArr
[
i
];
console
.
log
(
'
mapDown item:
'
,
item
);
let
callback
;
let
callback
;
let
target
;
let
target
;
switch
(
item
.
itemType
)
{
switch
(
item
.
itemType
)
{
...
@@ -548,7 +880,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -548,7 +880,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break
;
break
;
}
}
if
(
this
.
checkClickTarget
(
target
))
{
if
(
t
arget
&&
t
his
.
checkClickTarget
(
target
))
{
callback
(
target
);
callback
(
target
);
return
;
return
;
}
}
...
@@ -578,15 +910,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -578,15 +910,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
addY
=
this
.
my
-
this
.
oldPos
.
y
;
const
addY
=
this
.
my
-
this
.
oldPos
.
y
;
this
.
curItem
.
x
+=
addX
;
this
.
curItem
.
x
+=
addX
;
this
.
curItem
.
y
+=
addY
;
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
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
this
.
saveDisabled
=
tru
e
;
// this.saveDisabled = fals
e;
}
}
mapUp
(
event
)
{
mapUp
(
event
=
null
)
{
this
.
curItem
=
null
;
this
.
curItem
=
null
;
this
.
changeSizeFlag
=
false
;
this
.
changeSizeFlag
=
false
;
this
.
changeTopSizeFlag
=
false
;
this
.
changeTopSizeFlag
=
false
;
...
@@ -685,10 +1020,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -685,10 +1020,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeCurItem
(
item
)
{
changeCurItem
(
item
)
{
console
.
log
(
'
in changeCurItem
'
,
item
)
this
.
hideAllLineDash
();
this
.
hideAllLineDash
();
this
.
curItem
=
item
;
this
.
curItem
=
item
;
this
.
curItem
.
showLineDash
();
this
.
curItem
.
showLineDash
();
}
}
hideAllLineDash
()
{
hideAllLineDash
()
{
...
@@ -711,9 +1049,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -711,9 +1049,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 清除画布内容
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
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++) {
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
// const picItem = this.imgArr[i].picItem;
...
@@ -722,8 +1058,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -722,8 +1058,16 @@ 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
.
hotZoneArr
);
this
.
updatePos
()
this
.
updatePos
();
TWEEN
.
update
();
TWEEN
.
update
();
...
@@ -833,7 +1177,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -833,7 +1177,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
checkClickTarget
(
target
)
{
checkClickTarget
(
target
)
{
if
(
!
target
||
!
target
.
visible
)
{
return
;
}
const
rect
=
target
.
getBoundingBox
();
const
rect
=
target
.
getBoundingBox
();
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
return
true
;
return
true
;
...
@@ -852,9 +1198,21 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -852,9 +1198,21 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick
()
{
saveClick
()
{
const
sendData
=
this
.
getSendData
();
this
.
save
.
emit
(
sendData
);
}
getSendData
()
{
const
bgItem
=
this
.
bgItem
;
const
bgItem
=
this
.
bgItem
;
if
(
this
.
bg
)
{
if
(
this
.
bg
)
{
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
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
;
}
else
{
}
else
{
bgItem
[
'
rect
'
]
=
{
bgItem
[
'
rect
'
]
=
{
x
:
0
,
x
:
0
,
...
@@ -870,19 +1228,52 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -870,19 +1228,52 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
const
hotZoneItem
=
{
id
:
hotZoneArr
[
i
].
id
,
index
:
hotZoneArr
[
i
].
index
,
index
:
hotZoneArr
[
i
].
index
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
text
:
hotZoneArr
[
i
].
text
,
text
:
hotZoneArr
[
i
].
text
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
itemType
:
hotZoneArr
[
i
].
itemType
,
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
,
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
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
,
};
};
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
this
.
savePropertyArr
.
forEach
((
key
)
=>
{
if
(
hotZoneArr
[
i
][
key
])
{
hotZoneItem
[
key
]
=
hotZoneArr
[
i
][
key
];
}
})
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
'
].
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
'
].
y
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
...
@@ -894,7 +1285,360 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -894,7 +1285,360 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console
.
log
(
'
hotZoneItemArr:
'
,
hotZoneItemArr
);
console
.
log
(
'
hotZoneItemArr:
'
,
hotZoneItemArr
);
this
.
save
.
emit
({
bgItem
,
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 = item.posX || 0;
// this.curItem.y = 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
.
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
=
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
(
'
导入失败
'
);
}
}
}
private
updatePos
()
{
private
updatePos
()
{
...
@@ -917,12 +1661,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -917,12 +1661,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break
;
break
;
}
}
item
.
x
=
x
;
if
(
x
!=
undefined
&&
y
!=
undefined
)
{
item
.
y
=
y
;
item
.
x
=
x
;
item
.
pic
.
x
=
x
;
item
.
y
=
y
;
item
.
pic
.
y
=
y
;
item
.
pic
.
x
=
x
;
item
.
textLabel
.
x
=
x
;
item
.
pic
.
y
=
y
;
item
.
textLabel
.
y
=
y
;
item
.
textLabel
.
x
=
x
;
item
.
textLabel
.
y
=
y
;
}
});
});
}
}
...
@@ -944,6 +1691,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -944,6 +1691,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
textLabel
.
visible
=
true
;
item
.
textLabel
.
visible
=
true
;
}
}
private
setNoneState
(
item
:
any
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
}
private
clickedHotZoneRect
(
item
:
any
)
{
private
clickedHotZoneRect
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
if
(
this
.
checkClickTarget
(
item
))
{
...
@@ -962,6 +1715,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -962,6 +1715,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private
clickedHotZonePic
(
item
:
any
)
{
private
clickedHotZonePic
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
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
;
this
.
curItem
=
item
;
}
}
}
}
...
@@ -972,15 +1736,42 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -972,15 +1736,42 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
}
}
saveTex
t
(
item
)
{
clickedDragPoin
t
(
item
)
{
item
.
textLabel
.
text
=
item
.
text
;
this
.
curItem
=
item
;
}
}
private
loadHotZonePic
(
pic
:
HotZoneImg
,
url
)
{
private
loadHotZonePic
(
pic
:
HotZoneImg
,
url
,
scale
=
null
)
{
const
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
let
baseLen
;
if
(
this
.
hotZoneImgSize
)
{
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
}
pic
.
load
(
url
).
then
(()
=>
{
pic
.
load
(
url
).
then
(()
=>
{
const
s
=
getMinScale
(
pic
,
baseLen
);
if
(
!
scale
)
{
pic
.
setScaleXY
(
s
);
if
(
baseLen
)
{
scale
=
getMinScale
(
pic
,
baseLen
);
}
else
{
scale
=
this
.
bg
.
scaleX
;
}
}
pic
.
setScaleXY
(
scale
);
});
});
}
}
closeAfterPanel
()
{
this
.
refresh
();
}
/**
* 刷新 渲染页面
*/
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
}
}
form_angular/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html
View file @
c5ea2600
<div
class=
"position-relative"
>
<div
class=
"position-relative"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
()"
style=
" border-radius: 0.5rem; border: 1px solid #ddd;"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
()"
style=
" border-radius: 0.5rem; border: 1px solid #ddd;"
(
dragover
)="
handle_dragover
($
event
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
{{btnName}}
{{btnName}}
</button>
</button>
...
...
form_angular/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts
View file @
c5ea2600
...
@@ -178,4 +178,43 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
...
@@ -178,4 +178,43 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
ngOnDestroy
()
{
ngOnDestroy
()
{
}
}
linkInputed
(
ske
,
tex
,
png
)
{
this
.
skeJsonData
[
"
url
"
]
=
ske
.
url
;
this
.
skeJsonData
[
"
name
"
]
=
ske
.
name
;
this
.
texJsonData
[
"
url
"
]
=
tex
.
url
;
this
.
texJsonData
[
"
name
"
]
=
tex
.
name
;
this
.
texPngData
[
"
url
"
]
=
png
.
url
;
this
.
texPngData
[
"
name
"
]
=
png
.
name
;
this
.
animaPanelOk
();
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
e
.
preventDefault
();
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
ske
,
tex
,
png
}
=
JSON
.
parse
(
dt
);
if
(
!
ske
||
!
tex
||
!
png
||
ske
.
url
.
indexOf
(
"
teach
"
)
<
0
||
ske
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
ske
.
url
.
indexOf
(
"
.json
"
)
<
0
||
tex
.
url
.
indexOf
(
"
teach
"
)
<
0
||
tex
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
tex
.
url
.
indexOf
(
"
.json
"
)
<
0
||
png
.
url
.
indexOf
(
"
teach
"
)
<
0
||
png
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
png
.
url
.
indexOf
(
"
.png
"
)
<
0
||
!
ske
.
name
||
!
tex
.
name
||
!
png
.
name
)
{
console
.
warn
(
"
handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}
"
);
return
;
}
this
.
linkInputed
(
ske
,
tex
,
png
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}
"
);
}
}
}
}
form_angular/src/app/common/upload-image-with-preview/upload-image-with-preview.component.html
View file @
c5ea2600
<div
class=
"position-relative"
>
<div
class=
"position-relative"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
disableUpload
"
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
disableUpload
"
[
nzShowUploadList
]="
false
"
[
nzShowUploadList
]="
false
"
nzAccept =
"image/*"
nzAccept =
"image/*"
[
nzAction
]="
uploadUrl
"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
>
(
nzChange
)="
handleChange
($
event
)"
>
<!--[nzBeforeUpload]="customUpload">-->
<!--[nzBeforeUpload]="customUpload">-->
<div
class=
"p-box d-flex align-items-center"
>
<div
class=
"p-box d-flex align-items-center"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!picUrl && !uploading"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!picUrl && !uploading"
>
...
...
form_angular/src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts
View file @
c5ea2600
...
@@ -155,4 +155,39 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
...
@@ -155,4 +155,39 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
ngOnDestroy
()
{
ngOnDestroy
()
{
}
}
linkInputed
(
url
)
{
const
file
=
{
response
:
{
url
}
};
const
img
=
new
Image
();
img
.
addEventListener
(
'
load
'
,
()
=>
{
const
height
=
img
.
naturalHeight
;
const
width
=
img
.
naturalWidth
;
file
[
'
height
'
]
=
height
;
file
[
'
width
'
]
=
width
;
img
.
remove
();
this
.
imageUploaded
.
emit
(
file
.
response
);
});
img
.
src
=
url
;
this
.
picUrl
=
url
;
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
||
dt
.
indexOf
(
"
teach
"
)
<
0
||
dt
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.jpg
"
,
"
.jpeg
"
,
"
.png
"
,
"
.bmp
"
,
"
.JPG
"
,
"
.JPEG
"
,
"
.PNG
"
,
"
.BMP
"
];
if
(
!
white
.
includes
(
dt
.
substr
(
dt
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
dt
);
}
}
}
form_angular/src/app/common/upload-video/upload-video.component.html
View file @
c5ea2600
<div
class=
"p-video-box"
>
<div
class=
"p-video-box"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<div
class=
"up-video"
style=
"display: flex;"
>
<div
class=
"up-video"
style=
"display: flex;"
>
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<!--style="margin-right: 1rem">-->
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
uploading
"
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
uploading
"
[
nzShowUploadList
]="
false
"
nzAccept=
".mp4"
[
nzShowUploadList
]="
false
"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
style=
"margin-right: 1rem"
>
nzAccept =
".mp4"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
style=
"margin-right: 1rem"
>
<button
type=
"button"
nz-button
nzType=
"default"
*
ngIf=
"showUploadBtn"
[
disabled
]="
uploading
"
<button
type=
"button"
nz-button
nzType=
"default"
*
ngIf=
"showUploadBtn"
[
disabled
]="
uploading
"
[
nzLoading
]="
uploading
"
>
[
nzLoading
]="
uploading
"
>
<i
nz-icon
nzType=
"plus"
nzTheme=
"outline"
></i>
<i
nz-icon
nzType=
"plus"
nzTheme=
"outline"
></i>
<span>
{{ uploading ? 'Uploading' : 'Select Video' }}
</span>
<span>
{{ uploading ? 'Uploading' : 'Select Video' }}
</span>
<!--<span>Select Video</span>-->
<!--<span>Select Video</span>-->
...
@@ -25,14 +20,14 @@
...
@@ -25,14 +20,14 @@
</nz-upload>
</nz-upload>
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--</button>-->
<!--</button>-->
<!--
<!--
...
@@ -54,41 +49,37 @@
...
@@ -54,41 +49,37 @@
-->
-->
</div>
<div
class=
"p-box d-flex align-items-center p-video-uploader"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!showUploadBtn && !videoUrl && !uploading"
>
<i
nz-icon
nzType=
"upload"
nzTheme=
"outline"
></i>
<div
class=
"m-3"
></div>
<span>
Click here to upload video
</span>
<div
class=
"mt-5 p-progress-bar"
*
ngIf=
"uploading"
>
<div
class=
"p-progress-bg"
[
style
.
width
]="
progress
*
0
.
2
+'
rem
'"
></div>
<div
class=
"p-progress-value"
>
{{progress}}%
</div>
</div>
</div>
</div>
<div
class=
"p-upload-progress-bg dddd "
*
ngIf=
"uploading"
<div
class=
"p-box d-flex align-items-center p-video-uploader"
>
[
ngClass
]="{'
smart-bar
'
:
showUploadBtn
}"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!showUploadBtn && !videoUrl && !uploading"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<i
nz-icon
nzType=
"upload"
nzTheme=
"outline"
></i>
<div
class=
"i-text"
>
<div
class=
"m-3"
></div>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
<span>
Click here to upload video
</span>
Uploading...
<div
class=
"mt-5 p-progress-bar"
*
ngIf=
"uploading"
>
<div
class=
"p-progress-bg"
[
style
.
width
]="
progress
*
0
.
2
+'
rem
'"
></div>
<div
class=
"p-progress-value"
>
{{progress}}%
</div>
</div>
</div>
</div>
</div>
<div
class=
"p-upload-progress-bg dddd "
*
ngIf=
"uploading"
[
ngClass
]="{'
smart-bar
'
:
showUploadBtn
}"
>
<div
class=
"p-upload-check-bg"
*
ngIf=
"checking"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<div
class=
"i-text"
>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
Uploading...
<i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
Checking...
</div>
</div>
<div
class=
"p-upload-check-bg"
*
ngIf=
"checking"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
<i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
Checking...
</div>
</div>
<div
class=
"p-preview"
*
ngIf=
"!uploading && videoUrl "
>
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video
[
src
]="
safeVideoUrl
(
videoUrl
)"
controls
#
videoNode
></video>
</div>
</div>
</div>
</div>
<div
class=
"p-preview"
*
ngIf=
"!uploading && videoUrl "
>
<div
[
style
.
display
]="!
checkVideoExists
?'
none
'
:
''"
>
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<span><i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
checking file to upload
</span>
<video
[
src
]="
safeVideoUrl
(
videoUrl
)"
controls
#
videoNode
></video>
</div>
</div>
</div>
</div>
<div
[
style
.
display
]="!
checkVideoExists
?'
none
'
:
''"
>
\ No newline at end of file
<span><i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
checking file to upload
</span>
</div>
</div>
form_angular/src/app/common/upload-video/upload-video.component.ts
View file @
c5ea2600
...
@@ -225,5 +225,55 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
...
@@ -225,5 +225,55 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
// console.log(Math.floor(p * 100));
// console.log(Math.floor(p * 100));
this
.
progress
=
Math
.
floor
(
p
*
100
);
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
}
linkInputed
(
url
,
name
)
{
const
file
=
{
response
:
{
url
}
};
const
vid
=
document
.
createElement
(
'
video
'
);
vid
.
addEventListener
(
'
loadedmetadata
'
,
()
=>
{
const
height
=
vid
.
videoHeight
;
const
width
=
vid
.
videoWidth
;
let
duration
=
vid
.
duration
;
if
(
duration
)
{
duration
=
duration
*
1000
;
}
file
[
"
height
"
]
=
height
;
file
[
"
width
"
]
=
width
;
file
[
"
duration
"
]
=
duration
;
vid
.
preload
=
'
none
'
;
vid
.
src
=
''
;
vid
.
remove
();
this
.
videoUploaded
.
emit
(
file
.
response
);
});
vid
.
src
=
file
.
response
.
url
;
this
.
videoUrl
=
url
;
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
url
,
name
}
=
JSON
.
parse
(
dt
);
if
(
url
.
indexOf
(
"
teach
"
)
<
0
||
url
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.mp4
"
];
if
(
!
white
.
includes
(
url
.
substr
(
url
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
url
,
name
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线视频传递参数不合法,应该是{url:'', name:''}
"
);
}
}
}
}
form_angular/src/app/form/form.component.html
View file @
c5ea2600
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<div
style=
"padding: 10px;"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<textarea
style=
"width: 955px; height: 300px;"
(
blur
)="
load
()"
#
itemTextarea
>
{{itemStr}}
</textarea>
<button
(
click
)="
copyData
();"
>
Copy
</button>
</div>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<span
style=
"font-size: 20px;"
>
标题:
</span>
<span
style=
"font-size: 20px;"
>
标题:
</span>
...
@@ -19,6 +15,8 @@
...
@@ -19,6 +15,8 @@
></app-audio-recorder>
></app-audio-recorder>
</div>
</div>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
class=
"border"
style=
"width: 950px;"
>
<div
class=
"border"
style=
"width: 950px;"
>
...
...
form_angular/src/app/form/form.component.ts
View file @
c5ea2600
...
@@ -40,4 +40,19 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -40,4 +40,19 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
item
.
audioFileName
=
name
;
this
.
item
.
audioFileName
=
name
;
this
.
save
();
this
.
save
();
}
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
e
.
preventDefault
();
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
// 网络文件 dt 的数据遵循如下格式
// 图片 "http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png";
// 音频(JSON字符串) {url: "http://staging-teach.cdn.ireadabc.com/1c8694612563f4e2da707f1f6a37d066_l.mp3", name: "test.mp3"};
// 视频(JSON字符串) {url: "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4", name: "视频.mp4"};
// 骨骼动画(JSON字符串) {"ske":{"url":"http://staging-teach.cdn.ireadabc.com/3d4a36b83aada60709771fbe15e2b6db.json","name":"飞鸟_ske.json"},"tex":{"url":"http://staging-teach.cdn.ireadabc.com/08a676a5f456634f9c6c90e9efd3c2ea.json","name":"飞鸟_tex.json"},"png":{"url":"http://staging-teach.cdn.ireadabc.com/874393ecf5e0cd42a09f5b34d48854d2.png","name":"飞鸟_tex.png"}};
}
}
}
\ No newline at end of file
form_angular/src/drag-test.html
0 → 100644
View file @
c5ea2600
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
Document
</title>
</head>
<body>
<img
id=
"drag"
style=
"width: 100px; height: 100px; background-color: gold;"
draggable=
"true"
ele-data=
"http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4"
src=
"http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png"
></img>
<div
id=
"target"
ondrop=
"handle_drop(event)"
ondragover=
"handle_dragover(event)"
style=
"position: absolute; top: 10px; right: 10px; width: 80px; height: 80px; background: #00ffff;"
>
</div>
<script>
var
dragEl
=
document
.
getElementById
(
"
drag
"
);
dragEl
.
ondragstart
=
function
(
e
)
{
// 图片
// const dt = "http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png";
// e.dataTransfer.setData("text/plain", dt);
// 音频
const
dt
=
{
url
:
"
http://staging-teach.cdn.ireadabc.com/1c8694612563f4e2da707f1f6a37d066_l.mp3
"
,
name
:
"
test.mp3
"
};
e
.
dataTransfer
.
setData
(
"
text/plain
"
,
JSON
.
stringify
(
dt
));
// 视频
// const dt = {url: "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4", name: "视频.mp4"};
// e.dataTransfer.setData("text/plain", JSON.stringify(dt));
// 骨骼动画
// const dt = {"ske":{"url":"http://staging-teach.cdn.ireadabc.com/3d4a36b83aada60709771fbe15e2b6db.json","name":"飞鸟_ske.json"},"tex":{"url":"http://staging-teach.cdn.ireadabc.com/08a676a5f456634f9c6c90e9efd3c2ea.json","name":"飞鸟_tex.json"},"png":{"url":"http://staging-teach.cdn.ireadabc.com/874393ecf5e0cd42a09f5b34d48854d2.png","name":"飞鸟_tex.png"}};
// e.dataTransfer.setData("text/plain", JSON.stringify(dt))
}
dragEl
.
drop
=
function
(
e
)
{
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
}
var
target
=
document
.
getElementById
(
'
target
'
)
// target.ondragover = handle_dragover
function
handle_dragover
(
e
)
{
e
.
preventDefault
()
}
function
handle_drop
(
e
)
{
}
</script>
</body>
</html>
\ No newline at end of file
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