Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
ng-template-generator
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
ng-template-generator
Commits
2aac7778
Commit
2aac7778
authored
Jun 22, 2020
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: custom-hot-zone
parent
3695f7ce
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
2940 additions
and
404 deletions
+2940
-404
Unit.ts
src/app/common/custom-hot-zone/Unit.ts
+2606
-263
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+37
-26
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+7
-0
custom-hot-zone.component.ts
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
+287
-114
tsconfig.app.json
tsconfig.app.json
+3
-1
No files found.
src/app/common/custom-hot-zone/Unit.ts
View file @
2aac7778
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
interface
AirWindow
extends
Window
{
air
:
any
;
curCtx
:
any
;
}
declare
let
window
:
AirWindow
;
class
Sprite
{
class
Sprite
{
x
=
0
;
x
=
0
;
...
@@ -12,8 +17,12 @@ class Sprite {
...
@@ -12,8 +17,12 @@ class Sprite {
angle
=
0
;
angle
=
0
;
ctx
;
ctx
;
constructor
(
ctx
)
{
constructor
(
ctx
=
null
)
{
this
.
ctx
=
ctx
;
if
(
!
ctx
)
{
this
.
ctx
=
window
.
curCtx
;
}
else
{
this
.
ctx
=
ctx
;
}
}
}
update
(
$event
)
{
update
(
$event
)
{
this
.
draw
();
this
.
draw
();
...
@@ -30,25 +39,45 @@ class Sprite {
...
@@ -30,25 +39,45 @@ class Sprite {
export
class
MySprite
extends
Sprite
{
export
class
MySprite
extends
Sprite
{
width
=
0
;
_
width
=
0
;
height
=
0
;
_
height
=
0
;
_anchorX
=
0
;
_anchorX
=
0
;
_anchorY
=
0
;
_anchorY
=
0
;
_offX
=
0
;
_offX
=
0
;
_offY
=
0
;
_offY
=
0
;
scaleX
=
1
;
scaleX
=
1
;
scaleY
=
1
;
scaleY
=
1
;
alpha
=
1
;
_
alpha
=
1
;
rotation
=
0
;
rotation
=
0
;
visible
=
true
;
visible
=
true
;
skewX
=
0
;
skewY
=
0
;
_shadowFlag
=
false
;
_shadowColor
;
_shadowOffsetX
=
0
;
_shadowOffsetY
=
0
;
_shadowBlur
=
5
;
_radius
=
0
;
children
=
[
this
];
children
=
[
this
];
childDepandVisible
=
true
;
childDepandAlpha
=
false
;
img
;
img
;
_z
=
0
;
_z
=
0
;
_showRect
;
_bitmapFlag
=
false
;
_offCanvas
;
_offCtx
;
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
if
(
imgObj
)
{
if
(
imgObj
)
{
...
@@ -56,6 +85,8 @@ export class MySprite extends Sprite {
...
@@ -56,6 +85,8 @@ export class MySprite extends Sprite {
this
.
width
=
this
.
img
.
width
;
this
.
width
=
this
.
img
.
width
;
this
.
height
=
this
.
img
.
height
;
this
.
height
=
this
.
img
.
height
;
}
}
this
.
anchorX
=
anchorX
;
this
.
anchorX
=
anchorX
;
...
@@ -63,11 +94,35 @@ export class MySprite extends Sprite {
...
@@ -63,11 +94,35 @@ export class MySprite extends Sprite {
}
}
setShowRect
(
rect
)
{
this
.
_showRect
=
rect
;
}
setShadow
(
offX
,
offY
,
blur
,
color
=
'
rgba(0, 0, 0, 0.3)
'
)
{
this
.
_shadowFlag
=
true
;
this
.
_shadowColor
=
color
;
this
.
_shadowOffsetX
=
offX
;
this
.
_shadowOffsetY
=
offY
;
this
.
_shadowBlur
=
blur
;
}
setRadius
(
r
)
{
this
.
_radius
=
r
;
}
update
(
$event
=
null
)
{
update
(
$event
=
null
)
{
if
(
this
.
v
isible
)
{
if
(
!
this
.
visible
&&
this
.
childDepandV
isible
)
{
this
.
draw
()
;
return
;
}
}
this
.
draw
();
}
}
draw
()
{
draw
()
{
...
@@ -78,6 +133,8 @@ export class MySprite extends Sprite {
...
@@ -78,6 +133,8 @@ export class MySprite extends Sprite {
this
.
updateChildren
();
this
.
updateChildren
();
this
.
ctx
.
restore
();
this
.
ctx
.
restore
();
}
}
drawInit
()
{
drawInit
()
{
...
@@ -90,26 +147,73 @@ export class MySprite extends Sprite {
...
@@ -90,26 +147,73 @@ export class MySprite extends Sprite {
this
.
ctx
.
globalAlpha
=
this
.
alpha
;
this
.
ctx
.
globalAlpha
=
this
.
alpha
;
this
.
ctx
.
transform
(
1
,
this
.
skewX
,
this
.
skewY
,
1
,
0
,
0
);
//
// if (this._radius) {
//
// const r = this._radius;
// const w = this.width;
// const h = this.height;
//
// this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
// this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
// this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
// this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
// this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
// this.ctx.clip();
// }
}
}
drawSelf
()
{
drawSelf
()
{
if
(
this
.
_shadowFlag
)
{
this
.
ctx
.
shadowOffsetX
=
this
.
_shadowOffsetX
;
this
.
ctx
.
shadowOffsetY
=
this
.
_shadowOffsetY
;
this
.
ctx
.
shadowBlur
=
this
.
_shadowBlur
;
this
.
ctx
.
shadowColor
=
this
.
_shadowColor
;
}
else
{
this
.
ctx
.
shadowOffsetX
=
0
;
this
.
ctx
.
shadowOffsetY
=
0
;
this
.
ctx
.
shadowBlur
=
null
;
this
.
ctx
.
shadowColor
=
null
;
}
if
(
this
.
img
)
{
if
(
this
.
img
)
{
this
.
ctx
.
drawImage
(
this
.
img
,
this
.
_offX
,
this
.
_offY
);
if
(
this
.
_showRect
)
{
const
rect
=
this
.
_showRect
;
this
.
ctx
.
drawImage
(
this
.
img
,
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
,
this
.
_offX
,
this
.
_offY
+
rect
.
y
,
this
.
width
,
rect
.
height
);
}
else
{
this
.
ctx
.
drawImage
(
this
.
img
,
this
.
_offX
,
this
.
_offY
);
}
}
}
}
}
updateChildren
()
{
updateChildren
()
{
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
for
(
let
i
=
0
;
i
<
this
.
children
.
length
;
i
++
)
{
for
(
const
child
of
this
.
children
)
{
if
(
child
===
this
)
{
if
(
this
.
children
[
i
]
===
this
)
{
if
(
this
.
visible
)
{
this
.
drawSelf
();
this
.
drawSelf
();
}
}
else
{
}
else
{
child
.
update
();
this
.
children
[
i
].
update
();
}
}
}
}
}
}
...
@@ -140,6 +244,11 @@ export class MySprite extends Sprite {
...
@@ -140,6 +244,11 @@ export class MySprite extends Sprite {
return
a
.
_z
-
b
.
_z
;
return
a
.
_z
-
b
.
_z
;
});
});
if
(
this
.
childDepandAlpha
)
{
child
.
alpha
=
this
.
alpha
;
}
}
}
removeChild
(
child
)
{
removeChild
(
child
)
{
const
index
=
this
.
children
.
indexOf
(
child
);
const
index
=
this
.
children
.
indexOf
(
child
);
...
@@ -148,229 +257,1715 @@ export class MySprite extends Sprite {
...
@@ -148,229 +257,1715 @@ export class MySprite extends Sprite {
}
}
}
}
set
anchorX
(
value
)
{
removeChildren
()
{
this
.
_anchorX
=
value
;
for
(
let
i
=
0
;
i
<
this
.
children
.
length
;
i
++
)
{
this
.
refreshAnchorOff
();
if
(
this
.
children
[
i
])
{
if
(
this
.
children
[
i
]
!==
this
)
{
this
.
children
.
splice
(
i
,
1
);
i
--
;
}
}
}
}
_changeChildAlpha
(
alpha
)
{
for
(
const
child
of
this
.
children
)
{
if
(
child
!==
this
)
{
child
.
alpha
=
alpha
;
}
}
}
set
btimapFlag
(
v
)
{
this
.
_bitmapFlag
=
v
;
}
get
btimapFlag
()
{
return
this
.
_bitmapFlag
;
}
set
alpha
(
v
)
{
this
.
_alpha
=
v
;
if
(
this
.
childDepandAlpha
)
{
this
.
_changeChildAlpha
(
v
);
}
}
get
alpha
()
{
return
this
.
_alpha
;
}
set
width
(
v
)
{
this
.
_width
=
v
;
this
.
refreshAnchorOff
();
}
get
width
()
{
return
this
.
_width
;
}
set
height
(
v
)
{
this
.
_height
=
v
;
this
.
refreshAnchorOff
();
}
get
height
()
{
return
this
.
_height
;
}
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
getParentData
=
(
item
)
=>
{
let
px
=
item
.
x
;
let
py
=
item
.
y
;
let
sx
=
item
.
scaleX
;
let
sy
=
item
.
scaleY
;
const
parent
=
item
.
parent
;
if
(
parent
)
{
const
obj
=
getParentData
(
parent
);
const
_x
=
obj
.
px
;
const
_y
=
obj
.
py
;
const
_sx
=
obj
.
sx
;
const
_sy
=
obj
.
sy
;
px
=
_x
+
item
.
x
*
_sx
;
py
=
_y
+
item
.
y
*
_sy
;
sx
*=
_sx
;
sy
*=
_sy
;
}
return
{
px
,
py
,
sx
,
sy
};
};
const
data
=
getParentData
(
this
);
const
x
=
data
.
px
+
this
.
_offX
*
Math
.
abs
(
data
.
sx
);
const
y
=
data
.
py
+
this
.
_offY
*
Math
.
abs
(
data
.
sy
);
const
width
=
this
.
width
*
Math
.
abs
(
data
.
sx
);
const
height
=
this
.
height
*
Math
.
abs
(
data
.
sy
);
return
{
x
,
y
,
width
,
height
};
}
}
export
class
RoundSprite
extends
MySprite
{
_newCtx
;
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
;
const
canvas
=
window
[
'
curCanvas
'
];
const
w
=
canvas
.
nativeElement
.
width
;
const
h
=
canvas
.
nativeElement
.
height
;
this
.
_offCanvas
=
document
.
createElement
(
'
canvas
'
);
this
.
_offCanvas
.
width
=
w
;
this
.
_offCanvas
.
height
=
h
;
this
.
_offCtx
=
this
.
_offCanvas
.
getContext
(
'
2d
'
);
// this._newCtx = this.ctx;
// this.ctx = this._offCtx;
}
drawSelf
()
{
//
// if (this._shadowFlag) {
//
// this.ctx.shadowOffsetX = this._shadowOffsetX;
// this.ctx.shadowOffsetY = this._shadowOffsetY;
// this.ctx.shadowBlur = this._shadowBlur;
// this.ctx.shadowColor = this._shadowColor;
// } else {
// this.ctx.shadowOffsetX = 0;
// this.ctx.shadowOffsetY = 0;
// this.ctx.shadowBlur = null;
// this.ctx.shadowColor = null;
// }
if
(
this
.
_radius
)
{
const
r
=
this
.
_radius
;
const
w
=
this
.
width
;
const
h
=
this
.
height
;
const
x
=
-
this
.
_offX
;
const
y
=
-
this
.
_offY
;
this
.
_offCtx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
// 创建水平线
this
.
_offCtx
.
arcTo
(
x
-
w
/
2
,
y
-
h
/
2
,
x
-
w
/
2
+
r
,
y
-
h
/
2
,
r
);
this
.
_offCtx
.
arcTo
(
x
+
w
/
2
,
y
-
h
/
2
,
x
+
w
/
2
,
y
-
h
/
2
+
r
,
r
);
this
.
_offCtx
.
arcTo
(
x
+
w
/
2
,
y
+
h
/
2
,
x
+
w
/
2
-
r
,
y
+
h
/
2
,
r
);
this
.
_offCtx
.
arcTo
(
x
-
w
/
2
,
y
+
h
/
2
,
x
-
w
/
2
,
y
+
h
/
2
-
r
,
r
);
this
.
_offCtx
.
clip
();
}
if
(
this
.
img
)
{
this
.
_offCtx
.
drawImage
(
this
.
img
,
0
,
0
);
this
.
ctx
.
drawImage
(
this
.
_offCanvas
,
this
.
_offX
,
this
.
_offX
);
}
}
}
export
class
ColorSpr
extends
MySprite
{
r
=
0
;
g
=
0
;
b
=
0
;
createGSCanvas
()
{
if
(
!
this
.
img
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
if
(
rect
.
width
<=
1
||
rect
.
height
<=
1
)
{
return
;
}
const
c
=
this
.
ctx
.
getImageData
(
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
);
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
r
=
c
.
data
[
x
];
const
g
=
c
.
data
[
x
+
1
];
const
b
=
c
.
data
[
x
+
2
];
c
.
data
[
x
]
=
this
.
r
;
c
.
data
[
x
+
1
]
=
this
.
g
;
c
.
data
[
x
+
2
]
=
this
.
b
;
// c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
// // c.data[x + 3] = 255;
}
}
this
.
ctx
.
putImageData
(
c
,
rect
.
x
,
rect
.
y
,
0
,
0
,
rect
.
width
,
rect
.
height
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
createGSCanvas
();
}
}
export
class
GrayscaleSpr
extends
MySprite
{
grayScale
=
120
;
createGSCanvas
()
{
if
(
!
this
.
img
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
const
c
=
this
.
ctx
.
getImageData
(
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
);
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
r
=
c
.
data
[
x
];
const
g
=
c
.
data
[
x
+
1
];
const
b
=
c
.
data
[
x
+
2
];
// const a = c.data[x + 3];
c
.
data
[
x
]
=
c
.
data
[
x
+
1
]
=
c
.
data
[
x
+
2
]
=
this
.
grayScale
;
// (r + g + b) / 3;
// c.data[x + 3] = 255;
}
}
this
.
ctx
.
putImageData
(
c
,
rect
.
x
,
rect
.
y
,
0
,
0
,
rect
.
width
,
rect
.
height
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
createGSCanvas
();
}
}
export
class
BitMapLabel
extends
MySprite
{
labelArr
;
baseUrl
;
setText
(
data
,
text
)
{
this
.
labelArr
=
[];
const
labelArr
=
[];
const
tmpArr
=
text
.
split
(
''
);
let
totalW
=
0
;
let
h
=
0
;
for
(
const
tmp
of
tmpArr
)
{
const
label
=
new
MySprite
(
this
.
ctx
);
label
.
init
(
data
[
tmp
],
0
);
this
.
addChild
(
label
);
labelArr
.
push
(
label
);
totalW
+=
label
.
width
;
h
=
label
.
height
;
}
this
.
width
=
totalW
;
this
.
height
=
h
;
let
offX
=
-
totalW
/
2
;
for
(
const
label
of
labelArr
)
{
label
.
x
=
offX
;
offX
+=
label
.
width
;
}
this
.
labelArr
=
labelArr
;
}
}
export
class
Label
extends
MySprite
{
private
_text
:
string
;
// fontSize:String = '40px';
fontName
=
'
Verdana
'
;
textAlign
=
'
left
'
;
fontSize
=
40
;
fontColor
=
'
#000000
'
;
fontWeight
=
900
;
_maxWidth
;
outline
=
0
;
outlineColor
=
'
#ffffff
'
;
// _shadowFlag = false;
// _shadowColor;
// _shadowOffsetX;
// _shadowOffsetY;
// _shadowBlur;
_outlineFlag
=
false
;
_outLineWidth
;
_outLineColor
;
constructor
(
ctx
=
null
)
{
super
(
ctx
);
this
.
init
();
}
get
text
():
string
{
return
this
.
_text
;
}
set
text
(
value
:
string
)
{
this
.
_text
=
value
;
this
.
refreshSize
();
}
refreshSize
()
{
this
.
ctx
.
save
();
this
.
ctx
.
font
=
`
${
this
.
fontSize
*
this
.
scaleX
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
this
.
_width
=
this
.
ctx
.
measureText
(
this
.
text
).
width
;
this
.
_height
=
this
.
fontSize
;
this
.
refreshAnchorOff
();
this
.
ctx
.
restore
();
}
setMaxSize
(
w
)
{
this
.
_maxWidth
=
w
;
this
.
refreshSize
();
if
(
this
.
width
>=
w
)
{
this
.
scaleX
*=
w
/
this
.
width
;
this
.
scaleY
*=
w
/
this
.
width
;
}
}
show
(
callBack
=
null
)
{
this
.
visible
=
true
;
if
(
this
.
alpha
>=
1
)
{
return
;
}
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
(()
=>
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
setOutline
(
width
=
5
,
color
=
'
#ffffff
'
)
{
this
.
_outlineFlag
=
true
;
this
.
_outLineWidth
=
width
;
this
.
_outLineColor
=
color
;
}
drawText
()
{
if
(
!
this
.
text
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
if
(
this
.
_outlineFlag
)
{
this
.
ctx
.
lineWidth
=
this
.
_outLineWidth
;
this
.
ctx
.
strokeStyle
=
this
.
_outLineColor
;
this
.
ctx
.
strokeText
(
this
.
text
,
0
,
0
);
}
this
.
ctx
.
fillStyle
=
this
.
fontColor
;
if
(
this
.
outline
>
0
)
{
this
.
ctx
.
lineWidth
=
this
.
outline
;
this
.
ctx
.
strokeStyle
=
this
.
outlineColor
;
this
.
ctx
.
strokeText
(
this
.
text
,
0
,
0
);
}
this
.
ctx
.
fillText
(
this
.
text
,
0
,
0
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawText
();
}
}
export
class
RichTextOld
extends
Label
{
textArr
=
[];
fontSize
=
40
;
setText
(
text
:
string
,
words
)
{
let
newText
=
text
;
for
(
const
word
of
words
)
{
const
re
=
new
RegExp
(
word
,
'
g
'
);
newText
=
newText
.
replace
(
re
,
`#
${
word
}
#`
);
// newText = newText.replace(word, `#${word}#`);
}
this
.
textArr
=
newText
.
split
(
'
#
'
);
this
.
text
=
newText
;
// this.setSize();
}
refreshSize
()
{
this
.
ctx
.
save
();
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
let
curX
=
0
;
for
(
const
text
of
this
.
textArr
)
{
const
w
=
this
.
ctx
.
measureText
(
text
).
width
;
curX
+=
w
;
}
this
.
width
=
curX
;
this
.
height
=
this
.
fontSize
;
this
.
refreshAnchorOff
();
this
.
ctx
.
restore
();
}
show
(
callBack
=
null
)
{
// console.log(' in show ');
this
.
visible
=
true
;
// this.alpha = 0;
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
(()
=>
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
drawText
()
{
// console.log('in drawText', this.text);
if
(
!
this
.
text
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
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);
let
curX
=
0
;
for
(
let
i
=
0
;
i
<
this
.
textArr
.
length
;
i
++
)
{
const
w
=
this
.
ctx
.
measureText
(
this
.
textArr
[
i
]).
width
;
if
((
i
+
1
)
%
2
===
0
)
{
this
.
ctx
.
fillStyle
=
'
#c8171e
'
;
}
else
{
this
.
ctx
.
fillStyle
=
'
#000000
'
;
}
this
.
ctx
.
fillText
(
this
.
textArr
[
i
],
curX
,
0
);
curX
+=
w
;
}
}
}
export
class
RichText
extends
Label
{
disH
=
30
;
constructor
(
ctx
?:
any
)
{
super
(
ctx
);
// this.dataArr = dataArr;
}
drawText
()
{
if
(
!
this
.
text
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
this
.
ctx
.
fillStyle
=
this
.
fontColor
;
const
selfW
=
this
.
width
*
this
.
scaleX
;
const
chr
=
this
.
text
.
split
(
'
'
);
let
temp
=
''
;
const
row
=
[];
const
w
=
selfW
-
80
;
const
disH
=
(
this
.
fontSize
+
this
.
disH
)
*
this
.
scaleY
;
for
(
const
c
of
chr
)
{
if
(
this
.
ctx
.
measureText
(
temp
).
width
<
w
&&
this
.
ctx
.
measureText
(
temp
+
(
c
)).
width
<=
w
)
{
temp
+=
'
'
+
c
;
}
else
{
row
.
push
(
temp
);
temp
=
'
'
+
c
;
}
}
row
.
push
(
temp
);
const
x
=
0
;
const
y
=
-
row
.
length
*
disH
/
2
;
// for (let b = 0 ; b < row.length; b++) {
// this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
// }
if
(
this
.
_outlineFlag
)
{
this
.
ctx
.
lineWidth
=
this
.
_outLineWidth
;
this
.
ctx
.
strokeStyle
=
this
.
_outLineColor
;
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
strokeText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
fillText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
}
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawText
();
}
}
export
class
LineRect
extends
MySprite
{
lineColor
=
'
#ffffff
'
;
lineWidth
=
10
;
setSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
height
=
h
;
}
drawLine
()
{
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
this
.
_offX
,
this
.
_offY
);
this
.
ctx
.
lineTo
(
this
.
_offX
+
this
.
width
,
this
.
_offY
);
this
.
ctx
.
lineTo
(
this
.
_offX
+
this
.
width
,
this
.
_offY
+
this
.
height
);
this
.
ctx
.
lineTo
(
this
.
_offX
,
this
.
_offY
+
this
.
height
);
this
.
ctx
.
closePath
();
this
.
ctx
.
lineWidth
=
this
.
lineWidth
;
// this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色
// this.ctx.fill(); //对多边形进行填充
this
.
ctx
.
strokeStyle
=
this
.
lineColor
;
// "#ffffff";
this
.
ctx
.
stroke
();
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawLine
();
}
}
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
Line
extends
MySprite
{
lineWidth
=
5
;
lineColor
=
'
#000000
'
;
_pointArr
=
[];
roundFlag
=
true
;
_pointS
=
1
;
imgObj
;
bitMap
;
_offCtx
;
_offCanvas
;
lastPointIndex
=
0
;
init
()
{
const
canvas
=
window
[
'
curCanvas
'
];
const
w
=
canvas
.
nativeElement
.
width
;
const
h
=
canvas
.
nativeElement
.
height
;
console
.
log
(
'
w:
'
,
w
);
console
.
log
(
'
h:
'
,
h
);
this
.
_offCanvas
=
document
.
createElement
(
'
canvas
'
);
this
.
_offCanvas
.
width
=
w
;
this
.
_offCanvas
.
height
=
h
;
// this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h);
this
.
_offCtx
=
this
.
_offCanvas
.
getContext
(
'
2d
'
);
}
addPoint
(
x
,
y
)
{
this
.
_pointArr
.
push
([
x
,
y
]);
if
(
this
.
_pointArr
.
length
<
2
)
{
return
;
}
//
// const lastP = this._pointArr[this._pointArr.length - 1];
//
//
// const context = this._offCtx;
// context.moveTo (lastP[0], lastP[1]); // 设置起点状态
// context.lineTo (x, y); // 设置末端状态
//
// context.lineWidth = this.lineWidth; //设置线宽状态
// context.strokeStyle = this.lineColor;
// context.stroke();
//
//
// this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj);
// tmpLine.anchorY = 1;
// tmpLine.anchorX = 0.5;
// tmpLine.x = lastP[0];
// tmpLine.y = lastP[1];
//
// const disH = getPosDistance(lastP[0], lastP[1], x, y);
// tmpLine.scaleX = this.lineWidth / tmpLine.width;
// tmpLine.scaleY = disH / tmpLine.height * 1.1;
//
// const angle = getAngleByPos(lastP[0], lastP[1], x, y);
// tmpLine.rotation = angle;
//
// this.addChild(tmpLine);
}
setPointArr
(
arr
,
imgObj
)
{
this
.
removeChildren
();
if
(
arr
.
length
<
2
)
{
return
;
}
let
p1
=
arr
[
0
];
let
p2
;
for
(
let
i
=
1
;
i
<
arr
.
length
;
i
++
)
{
p2
=
arr
[
i
];
const
tmpLine
=
new
MySprite
();
tmpLine
.
init
(
imgObj
);
tmpLine
.
anchorY
=
1
;
tmpLine
.
anchorX
=
0.5
;
tmpLine
.
x
=
p1
[
0
];
tmpLine
.
y
=
p1
[
1
];
const
disH
=
getPosDistance
(
p1
[
0
],
p1
[
1
],
p2
[
0
],
p2
[
1
]);
tmpLine
.
scaleX
=
this
.
lineWidth
/
tmpLine
.
width
;
tmpLine
.
scaleY
=
disH
/
tmpLine
.
height
*
1.1
;
const
angle
=
getAngleByPos
(
p1
[
0
],
p1
[
1
],
p2
[
0
],
p2
[
1
]);
tmpLine
.
rotation
=
angle
;
this
.
addChild
(
tmpLine
);
p1
=
p2
;
}
}
drawLine
()
{
if
(
this
.
_pointArr
.
length
<
2
)
{
return
;
}
const
curMaxPointIndex
=
this
.
_pointArr
.
length
-
1
;
if
(
curMaxPointIndex
>
this
.
lastPointIndex
)
{
const
arr
=
this
.
_pointArr
;
const
context
=
this
.
_offCtx
;
context
.
moveTo
(
arr
[
this
.
lastPointIndex
][
0
]
*
this
.
_pointS
,
arr
[
this
.
lastPointIndex
][
1
]
*
this
.
_pointS
);
// 设置起点状态
for
(
let
i
=
this
.
lastPointIndex
+
1
;
i
<
arr
.
length
;
i
++
)
{
context
.
lineTo
(
arr
[
i
][
0
]
*
this
.
_pointS
,
arr
[
i
][
1
]
*
this
.
_pointS
);
// 设置末端状态
}
if
(
this
.
roundFlag
)
{
context
.
lineCap
=
"
round
"
;
}
context
.
lineWidth
=
this
.
lineWidth
;
//设置线宽状态
context
.
strokeStyle
=
this
.
lineColor
;
context
.
stroke
();
this
.
lastPointIndex
=
curMaxPointIndex
;
// this.bitMap = this._offCanvas.transferToImageBitmap();
}
// this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this
.
ctx
.
drawImage
(
this
.
_offCanvas
,
this
.
_offX
,
this
.
_offY
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawLine
();
// if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// }
// if (this.bitMap) {
// this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// }
}
}
export
class
ShapeCircle
extends
MySprite
{
fillColor
=
'
#FF0000
'
;
radius
=
0
;
setRadius
(
r
)
{
this
.
anchorX
=
this
.
anchorY
=
0.5
;
this
.
radius
=
r
;
this
.
width
=
r
*
2
;
this
.
height
=
r
*
2
;
}
drawShape
()
{
this
.
ctx
.
beginPath
();
this
.
ctx
.
fillStyle
=
this
.
fillColor
;
this
.
ctx
.
arc
(
0
,
0
,
this
.
radius
,
0
,
angleToRadian
(
360
));
this
.
ctx
.
fill
();
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawShape
();
}
}
export
class
ShapeRectNew
extends
MySprite
{
radius
=
0
;
fillColor
=
'
#ffffff
'
;
strokeColor
=
'
#000000
'
;
fill
=
true
;
stroke
=
false
;
lineWidth
=
1
;
setSize
(
w
,
h
,
r
)
{
this
.
width
=
w
;
this
.
height
=
h
;
this
.
radius
=
r
;
}
setOutLine
(
color
,
lineWidth
)
{
this
.
stroke
=
true
;
this
.
strokeColor
=
color
;
this
.
lineWidth
=
lineWidth
;
}
drawShape
()
{
const
ctx
=
this
.
ctx
;
const
width
=
this
.
width
;
const
height
=
this
.
height
;
const
radius
=
this
.
radius
;
ctx
.
save
();
ctx
.
beginPath
(
0
);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx
.
arc
(
width
-
radius
,
height
-
radius
,
radius
,
0
,
Math
.
PI
/
2
);
// 矩形下边线
ctx
.
lineTo
(
radius
,
height
);
// 左下角圆弧,弧度从1/2PI到PI
ctx
.
arc
(
radius
,
height
-
radius
,
radius
,
Math
.
PI
/
2
,
Math
.
PI
);
// 矩形左边线
ctx
.
lineTo
(
0
,
radius
);
// 左上角圆弧,弧度从PI到3/2PI
ctx
.
arc
(
radius
,
radius
,
radius
,
Math
.
PI
,
Math
.
PI
*
3
/
2
);
// 上边线
ctx
.
lineTo
(
width
-
radius
,
0
);
// 右上角圆弧
ctx
.
arc
(
width
-
radius
,
radius
,
radius
,
Math
.
PI
*
3
/
2
,
Math
.
PI
*
2
);
// 右边线
ctx
.
lineTo
(
width
,
height
-
radius
);
ctx
.
closePath
();
if
(
this
.
fill
)
{
ctx
.
fillStyle
=
this
.
fillColor
;
ctx
.
fill
();
}
if
(
this
.
stroke
)
{
ctx
.
lineWidth
=
this
.
lineWidth
;
ctx
.
strokeStyle
=
this
.
strokeColor
;
ctx
.
stroke
();
}
ctx
.
restore
();
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawShape
();
}
}
export
class
MyAnimation
extends
MySprite
{
frameArr
=
[];
frameIndex
=
0
;
playFlag
=
false
;
lastDateTime
;
curDelay
=
0
;
loop
=
false
;
playEndFunc
;
delayPerUnit
=
1
;
restartFlag
=
false
;
reverseFlag
=
false
;
addFrameByImg
(
img
)
{
const
spr
=
new
MySprite
(
this
.
ctx
);
spr
.
init
(
img
);
this
.
_refreshSize
(
img
);
spr
.
visible
=
false
;
this
.
addChild
(
spr
);
this
.
frameArr
.
push
(
spr
);
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
}
addFrameByUrl
(
url
)
{
const
spr
=
new
MySprite
(
this
.
ctx
);
spr
.
load
(
url
).
then
(
img
=>
{
this
.
_refreshSize
(
img
);
});
spr
.
visible
=
false
;
this
.
addChild
(
spr
);
this
.
frameArr
.
push
(
spr
);
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
}
_refreshSize
(
img
:
any
)
{
if
(
this
.
width
<
img
.
width
)
{
this
.
width
=
img
.
width
;
}
if
(
this
.
height
<
img
.
height
)
{
this
.
height
=
img
.
height
;
}
}
play
()
{
this
.
playFlag
=
true
;
this
.
lastDateTime
=
new
Date
().
getTime
();
}
stop
()
{
this
.
playFlag
=
false
;
}
replay
()
{
this
.
restartFlag
=
true
;
this
.
play
();
}
reverse
()
{
this
.
reverseFlag
=
!
this
.
reverseFlag
;
this
.
frameArr
.
reverse
();
this
.
frameIndex
=
0
;
}
showAllFrame
()
{
for
(
const
frame
of
this
.
frameArr
)
{
frame
.
alpha
=
1
;
}
}
hideAllFrame
()
{
for
(
const
frame
of
this
.
frameArr
)
{
frame
.
alpha
=
0
;
}
}
playEnd
()
{
this
.
playFlag
=
false
;
this
.
curDelay
=
0
;
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
if
(
this
.
playEndFunc
)
{
this
.
playEndFunc
();
this
.
playEndFunc
=
null
;
}
}
updateFrame
()
{
if
(
this
.
frameArr
[
this
.
frameIndex
])
{
this
.
frameArr
[
this
.
frameIndex
].
visible
=
false
;
}
this
.
frameIndex
++
;
if
(
this
.
frameIndex
>=
this
.
frameArr
.
length
)
{
if
(
this
.
loop
)
{
this
.
frameIndex
=
0
;
}
else
if
(
this
.
restartFlag
)
{
this
.
restartFlag
=
false
;
this
.
frameIndex
=
0
;
}
else
{
this
.
frameIndex
--
;
this
.
playEnd
();
return
;
}
}
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
}
_updateDelay
(
delay
)
{
this
.
curDelay
+=
delay
;
if
(
this
.
curDelay
<
this
.
delayPerUnit
)
{
return
;
}
this
.
curDelay
-=
this
.
delayPerUnit
;
this
.
updateFrame
();
}
_updateLastDate
()
{
if
(
!
this
.
playFlag
)
{
return
;
}
let
delay
=
0
;
if
(
this
.
lastDateTime
)
{
delay
=
(
new
Date
().
getTime
()
-
this
.
lastDateTime
)
/
1000
;
}
this
.
lastDateTime
=
new
Date
().
getTime
();
this
.
_updateDelay
(
delay
);
}
update
(
$event
:
any
=
null
)
{
super
.
update
(
$event
);
this
.
_updateLastDate
();
}
}
// --------=========== util func =============-------------
export
function
tweenChange
(
item
,
obj
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
,
update
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
(
obj
,
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
if
(
update
)
{
tween
.
onUpdate
(
(
a
,
b
)
=>
{
update
(
a
,
b
);
});
}
tween
.
start
();
return
tween
;
}
export
function
rotateItem
(
item
,
rotation
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
rotation
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
scaleItem
(
item
,
scale
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
scaleX
:
scale
,
scaleY
:
scale
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
return
tween
;
}
export
function
moveItem
(
item
,
x
,
y
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
x
,
y
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
return
tween
;
}
export
function
endShow
(
item
,
s
=
1
)
{
item
.
scaleX
=
item
.
scaleY
=
0
;
item
.
alpha
=
0
;
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
,
scaleX
:
s
,
scaleY
:
s
},
800
)
.
easing
(
TWEEN
.
Easing
.
Elastic
.
Out
)
// Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
})
.
start
();
}
export
function
hideItem
(
item
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
if
(
item
.
alpha
===
0
)
{
return
;
}
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
0
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
showItem
(
item
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
if
(
item
.
alpha
===
1
)
{
if
(
callBack
)
{
callBack
();
}
return
;
}
item
.
visible
=
true
;
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
alphaItem
(
item
,
alpha
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
showStar
(
item
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
,
scale
:
1
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
randomSortByArr
(
arr
)
{
if
(
!
arr
)
{
return
;
}
const
newArr
=
[];
const
tmpArr
=
arr
.
concat
();
while
(
tmpArr
.
length
>
0
)
{
const
randomIndex
=
Math
.
floor
(
tmpArr
.
length
*
Math
.
random
()
);
newArr
.
push
(
tmpArr
[
randomIndex
]);
tmpArr
.
splice
(
randomIndex
,
1
);
}
return
newArr
;
}
export
function
radianToAngle
(
radian
)
{
return
radian
*
180
/
Math
.
PI
;
// 角度 = 弧度 * 180 / Math.PI;
}
export
function
angleToRadian
(
angle
)
{
return
angle
*
Math
.
PI
/
180
;
// 弧度= 角度 * Math.PI / 180;
}
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
=
Math
.
abs
(
px
-
mx
);
const
y
=
Math
.
abs
(
py
-
my
);
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
;
}
}
get
anchorX
()
{
if
(
mx
===
px
&&
my
>
py
)
{
// 鼠标在y轴负方向上
return
this
.
_anchorX
;
angle
=
180
;
}
}
set
anchorY
(
value
)
{
if
(
mx
>
px
&&
my
===
py
)
{
// 鼠标在x轴正方向上
this
.
_anchorY
=
value
;
angle
=
90
;
this
.
refreshAnchorOff
();
}
}
get
anchorY
()
{
if
(
mx
<
px
&&
my
>
py
)
{
// 鼠标在第三象限
return
this
.
_anchorY
;
angle
=
180
+
angle
;
}
}
refreshAnchorOff
()
{
if
(
mx
<
px
&&
my
===
py
)
{
// 鼠标在x轴负方向
this
.
_offX
=
-
this
.
width
*
this
.
anchorX
;
angle
=
270
;
this
.
_offY
=
-
this
.
height
*
this
.
anchorY
;
}
}
if
(
mx
<
px
&&
my
<
py
)
{
// 鼠标在第二象限
setScaleXY
(
value
)
{
angle
=
360
-
angle
;
this
.
scaleX
=
this
.
scaleY
=
value
;
}
}
getBoundingBox
()
{
// console.log('angle: ', angle);
return
angle
;
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
function
removeItemFromArr
(
arr
,
item
)
{
const
index
=
arr
.
indexOf
(
item
);
if
(
index
!==
-
1
)
{
arr
.
splice
(
index
,
1
);
}
}
}
export
class
Item
extends
MySprite
{
baseX
;
export
function
circleMove
(
item
,
x0
,
y0
,
time
=
2
,
addR
=
360
,
xPer
=
1
,
yPer
=
1
,
callBack
=
null
,
easing
=
null
)
{
move
(
targetY
,
callBack
)
{
const
r
=
getPosDistance
(
item
.
x
,
item
.
y
,
x0
,
y0
);
let
a
=
getAngleByPos
(
item
.
x
,
item
.
y
,
x0
,
y0
);
a
+=
90
;
const
obj
=
{
r
,
a
};
const
self
=
this
;
item
.
_circleAngle
=
a
;
const
targetA
=
a
+
addR
;
const
tween
=
new
TWEEN
.
Tween
(
this
)
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
_circleAngle
:
targetA
},
time
*
1000
);
.
to
({
y
:
targetY
},
2500
)
.
easing
(
TWEEN
.
Easing
.
Quintic
.
Out
)
.
onComplete
(
function
()
{
self
.
hide
(
callBack
);
// if (callBack) {
// callBack();
// }
})
.
start
();
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
}
show
(
callBack
=
null
)
{
tween
.
onUpdate
(
(
item
,
progress
)
=>
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
// console.log(item._circleAngle);
.
to
({
alpha
:
1
},
800
)
const
r
=
obj
.
r
;
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
const
a
=
item
.
_circleAngle
;
.
onComplete
(
function
()
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
const
x
=
x0
+
r
*
xPer
*
Math
.
cos
(
a
*
Math
.
PI
/
180
);
const
y
=
y0
+
r
*
yPer
*
Math
.
sin
(
a
*
Math
.
PI
/
180
);
hide
(
callBack
=
null
)
{
item
.
x
=
x
;
item
.
y
=
y
;
const
tween
=
new
TWEEN
.
Tween
(
this
)
// obj.a ++;
.
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.
}
tween
.
start
();
}
shake
(
id
)
{
export
function
getPosDistance
(
sx
,
sy
,
ex
,
ey
)
{
if
(
!
this
.
baseX
)
{
const
_x
=
ex
-
sx
;
this
.
baseX
=
this
.
x
;
const
_y
=
ey
-
sy
;
}
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
}
const
baseX
=
this
.
baseX
;
export
function
delayCall
(
callback
,
second
)
{
const
baseTime
=
50
;
const
tween
=
new
TWEEN
.
Tween
(
this
)
const
sequence
=
[
.
delay
(
second
*
1000
)
{
target
:
{
x
:
baseX
+
40
*
id
},
time
:
baseTime
-
25
},
.
onComplete
(()
=>
{
{
target
:
{
x
:
baseX
-
20
*
id
},
time
:
baseTime
},
if
(
callback
)
{
{
target
:
{
x
:
baseX
+
10
*
id
},
time
:
baseTime
},
callback
();
{
target
:
{
x
:
baseX
-
5
*
id
},
time
:
baseTime
},
}
{
target
:
{
x
:
baseX
+
2
*
id
},
time
:
baseTime
},
})
{
target
:
{
x
:
baseX
-
1
*
id
},
time
:
baseTime
},
.
start
();
{
target
:
{
x
:
baseX
},
time
:
baseTime
},
}
];
export
function
formatTime
(
fmt
,
date
)
{
const
self
=
this
;
// "yyyy-MM-dd HH:mm:ss"
;
function
runSequence
()
{
const
o
=
{
'
M+
'
:
date
.
getMonth
()
+
1
,
// 月份
'
d+
'
:
date
.
getDate
(),
// 日
'
h+
'
:
date
.
getHours
(),
// 小时
'
m+
'
:
date
.
getMinutes
(),
// 分
'
s+
'
:
date
.
getSeconds
(),
// 秒
'
q+
'
:
Math
.
floor
((
date
.
getMonth
()
+
3
)
/
3
),
// 季度
S
:
date
.
getMilliseconds
()
// 毫秒
};
if
(
/
(
y+
)
/
.
test
(
fmt
))
{
fmt
=
fmt
.
replace
(
RegExp
.
$1
,
(
date
.
getFullYear
()
+
''
).
substr
(
4
-
RegExp
.
$1
.
length
));
}
for
(
const
k
in
o
)
{
if
(
new
RegExp
(
'
(
'
+
k
+
'
)
'
).
test
(
fmt
))
{
fmt
=
fmt
.
replace
(
RegExp
.
$1
,
(
RegExp
.
$1
.
length
===
1
)
?
(
o
[
k
])
:
((
'
00
'
+
o
[
k
]).
substr
((
''
+
o
[
k
]).
length
)));
}
}
return
fmt
;
}
if
(
self
[
'
shakeTween
'
])
{
export
function
getMinScale
(
item
,
maxLen
)
{
self
[
'
shakeTween
'
].
stop
();
const
sx
=
maxLen
/
item
.
width
;
}
const
sy
=
maxLen
/
item
.
height
;
const
minS
=
Math
.
min
(
sx
,
sy
);
return
minS
;
}
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
;
export
function
jelly
(
item
,
time
=
0.7
)
{
}
}
runSequence
();
if
(
item
.
jellyTween
)
{
TWEEN
.
remove
(
item
.
jellyTween
);
}
}
const
t
=
time
/
9
;
const
baseSX
=
item
.
scaleX
;
const
baseSY
=
item
.
scaleY
;
let
index
=
0
;
const
run
=
()
=>
{
if
(
index
>=
arr
.
length
)
{
item
.
jellyTween
=
null
;
return
;
}
const
data
=
arr
[
index
];
const
t
=
tweenChange
(
item
,
{
scaleX
:
data
[
0
],
scaleY
:
data
[
1
]},
data
[
2
],
()
=>
{
index
++
;
run
();
},
TWEEN
.
Easing
.
Sinusoidal
.
InOut
);
item
.
jellyTween
=
t
;
};
const
arr
=
[
[
baseSX
*
1.1
,
baseSY
*
0.9
,
t
],
[
baseSX
*
0.98
,
baseSY
*
1.02
,
t
*
2
],
[
baseSX
*
1.02
,
baseSY
*
0.98
,
t
*
2
],
[
baseSX
*
0.99
,
baseSY
*
1.01
,
t
*
2
],
[
baseSX
*
1.0
,
baseSY
*
1.0
,
t
*
2
],
];
run
();
}
drop
(
targetY
,
callBack
=
null
)
{
export
function
showPopParticle
(
img
,
pos
,
parent
,
num
=
20
,
minLen
=
40
,
maxLen
=
80
,
showTime
=
0.4
)
{
const
self
=
this
;
const
time
=
Math
.
abs
(
targetY
-
this
.
y
)
*
2.4
;
for
(
let
i
=
0
;
i
<
num
;
i
++
)
{
this
.
alpha
=
1
;
const
particle
=
new
MySprite
();
particle
.
init
(
img
);
particle
.
x
=
pos
.
x
;
particle
.
y
=
pos
.
y
;
parent
.
addChild
(
particle
);
const
tween
=
new
TWEEN
.
Tween
(
this
)
const
randomR
=
360
*
Math
.
random
();
.
to
({
y
:
targetY
},
time
)
particle
.
rotation
=
randomR
;
.
easing
(
TWEEN
.
Easing
.
Cubic
.
In
)
.
onComplete
(
function
()
{
// self.hideItem(callBack);
const
randomS
=
0.3
+
Math
.
random
()
*
0.7
;
if
(
callBack
)
{
particle
.
setScaleXY
(
randomS
*
0.3
);
callBack
();
}
})
.
start
();
const
randomX
=
Math
.
random
()
*
20
-
10
;
particle
.
x
+=
randomX
;
}
const
randomY
=
Math
.
random
()
*
20
-
10
;
particle
.
y
+=
randomY
;
const
randomL
=
minLen
+
Math
.
random
()
*
(
maxLen
-
minLen
);
const
randomA
=
360
*
Math
.
random
();
const
randomT
=
getPosByAngle
(
randomA
,
randomL
);
moveItem
(
particle
,
particle
.
x
+
randomT
.
x
,
particle
.
y
+
randomT
.
y
,
showTime
,
()
=>
{
}
export
class
EndSpr
extends
MySprite
{
},
TWEEN
.
Easing
.
Exponential
.
Out
);
show
(
s
)
{
// scaleItem(particle, 0, 0.6, () => {
//
// });
this
.
scaleX
=
this
.
scaleY
=
0
;
scaleItem
(
particle
,
randomS
,
0.6
,
()
=>
{
this
.
alpha
=
0
;
const
tween
=
new
TWEEN
.
Tween
(
this
)
},
TWEEN
.
Easing
.
Exponential
.
Out
);
.
to
({
alpha
:
1
,
scaleX
:
s
,
scaleY
:
s
},
800
)
.
easing
(
TWEEN
.
Easing
.
Elastic
.
Out
)
// Use an easing function to make the animation smooth.
setTimeout
(()
=>
{
.
onComplete
(
function
()
{
hideItem
(
particle
,
0.4
,
()
=>
{
},
TWEEN
.
Easing
.
Cubic
.
In
);
},
showTime
*
0.5
*
1000
);
})
.
start
();
// Start the tween immediately.
}
}
}
}
export
class
ShapeRect
extends
MySprite
{
export
function
shake
(
item
,
time
=
0.5
,
callback
=
null
,
rate
=
1
)
{
fillColor
=
'
#FF0000
'
;
if
(
item
.
shakeTween
)
{
return
;
}
setSize
(
w
,
h
)
{
item
.
shakeTween
=
true
;
this
.
width
=
w
;
const
offX
=
15
*
item
.
scaleX
*
rate
;
this
.
height
=
h
;
const
offY
=
15
*
item
.
scaleX
*
rate
;
const
baseX
=
item
.
x
;
const
baseY
=
item
.
y
;
const
easing
=
TWEEN
.
Easing
.
Sinusoidal
.
InOut
;
console
.
log
(
'
w:
'
,
w
);
console
.
log
(
'
h:
'
,
h
);
}
drawShape
()
{
const
move4
=
()
=>
{
moveItem
(
item
,
baseX
,
baseY
,
time
/
4
,
()
=>
{
item
.
shakeTween
=
false
;
if
(
callback
)
{
callback
();
}
},
easing
);
};
this
.
ctx
.
fillStyle
=
this
.
fillColor
;
const
move3
=
()
=>
{
this
.
ctx
.
fillRect
(
this
.
_offX
,
this
.
_offY
,
this
.
width
,
this
.
height
);
moveItem
(
item
,
baseX
+
offX
/
4
,
baseY
+
offY
/
4
,
time
/
4
,
()
=>
{
move4
();
},
easing
);
};
}
const
move2
=
()
=>
{
moveItem
(
item
,
baseX
-
offX
/
4
*
3
,
baseY
-
offY
/
4
*
3
,
time
/
4
,
()
=>
{
move3
();
},
easing
);
};
const
move1
=
()
=>
{
moveItem
(
item
,
baseX
+
offX
,
baseY
+
offY
,
time
/
7.5
,
()
=>
{
move2
();
},
easing
);
};
move1
();
drawSelf
()
{
super
.
drawSelf
();
this
.
drawShape
();
}
}
}
// --------------- custom class --------------------
export
class
HotZoneItem
extends
MySprite
{
export
class
HotZoneItem
extends
MySprite
{
lineDashFlag
=
false
;
lineDashFlag
=
false
;
arrow
:
MySprite
;
arrow
:
MySprite
;
label
:
Label
;
label
:
Label
;
t
ext
;
t
itle
;
arrowTop
;
arrowTop
;
arrowRight
;
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
)
{
setSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
width
=
w
;
this
.
height
=
h
;
this
.
height
=
h
;
...
@@ -391,7 +1986,7 @@ export class HotZoneItem extends MySprite {
...
@@ -391,7 +1986,7 @@ export class HotZoneItem extends MySprite {
if
(
!
this
.
label
)
{
if
(
!
this
.
label
)
{
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
.
anchorY
=
0
;
this
.
label
.
anchorY
=
0
;
this
.
label
.
fontSize
=
'
40px
'
;
this
.
label
.
fontSize
=
40
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
addChild
(
this
.
label
);
this
.
addChild
(
this
.
label
);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleX = 1 / this.scaleX;
...
@@ -403,8 +1998,8 @@ export class HotZoneItem extends MySprite {
...
@@ -403,8 +1998,8 @@ export class HotZoneItem extends MySprite {
if
(
text
)
{
if
(
text
)
{
this
.
label
.
text
=
text
;
this
.
label
.
text
=
text
;
}
else
if
(
this
.
t
ext
)
{
}
else
if
(
this
.
t
itle
)
{
this
.
label
.
text
=
this
.
t
ext
;
this
.
label
.
text
=
this
.
t
itle
;
}
}
this
.
label
.
visible
=
true
;
this
.
label
.
visible
=
true
;
...
@@ -532,12 +2127,86 @@ export class HotZoneItem extends MySprite {
...
@@ -532,12 +2127,86 @@ export class HotZoneItem extends MySprite {
}
}
}
}
export
class
HotZoneImg
extends
MySprite
{
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
.
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
();
this
.
drawFrame
();
}
}
export
class
HotZoneLabel
extends
Label
{
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
/
this
.
scaleX
;
const
h
=
this
.
height
*
this
.
scaleY
;
const
x
=
this
.
x
;
const
y
=
this
.
y
;
this
.
ctx
.
setLineDash
([
5
,
5
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#1bfff7
'
;
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
();
this
.
drawFrame
();
}
}
export
class
EditorItem
extends
MySprite
{
export
class
EditorItem
extends
MySprite
{
lineDashFlag
=
false
;
lineDashFlag
=
false
;
arrow
:
MySprite
;
arrow
:
MySprite
;
label
:
Label
;
label
:
Label
;
text
;
text
;
showLabel
(
text
=
null
)
{
showLabel
(
text
=
null
)
{
...
@@ -546,7 +2215,7 @@ export class EditorItem extends MySprite {
...
@@ -546,7 +2215,7 @@ export class EditorItem extends MySprite {
if
(
!
this
.
label
)
{
if
(
!
this
.
label
)
{
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
.
anchorY
=
0
;
this
.
label
.
anchorY
=
0
;
this
.
label
.
fontSize
=
'
50px
'
;
this
.
label
.
fontSize
=
50
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
addChild
(
this
.
label
);
this
.
addChild
(
this
.
label
);
this
.
label
.
setScaleXY
(
1
/
this
.
scaleX
);
this
.
label
.
setScaleXY
(
1
/
this
.
scaleX
);
...
@@ -657,109 +2326,783 @@ export class EditorItem extends MySprite {
...
@@ -657,109 +2326,783 @@ export class EditorItem extends MySprite {
export
class
Label
extends
MySprite
{
//
//
text
:
String
;
// import TWEEN from '@tweenjs/tween.js';
fontSize
:
String
=
'
40px
'
;
//
fontName
:
String
=
'
Verdana
'
;
//
textAlign
:
String
=
'
left
'
;
// class Sprite {
// x = 0;
// y = 0;
constructor
(
ctx
)
{
// color = '';
super
(
ctx
);
// radius = 0;
this
.
init
();
// alive = false;
}
// margin = 0;
// angle = 0;
drawText
()
{
// ctx;
//
// console.log('in drawText', this.text);
// constructor(ctx) {
// this.ctx = ctx;
if
(
!
this
.
text
)
{
return
;
}
// }
// update($event) {
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
${
this
.
fontName
}
`
;
// this.draw();
this
.
ctx
.
textAlign
=
this
.
textAlign
;
// }
this
.
ctx
.
textBaseline
=
'
middle
'
;
// draw() {
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
);
//
//
// export class MySprite extends Sprite {
}
//
// width = 0;
// height = 0;
drawSelf
()
{
// _anchorX = 0;
super
.
drawSelf
();
// _anchorY = 0;
this
.
drawText
();
// _offX = 0;
}
// _offY = 0;
// scaleX = 1;
}
// scaleY = 1;
// alpha = 1;
// rotation = 0;
// visible = true;
export
function
getPosByAngle
(
angle
,
len
)
{
//
// children = [this];
const
radian
=
angle
*
Math
.
PI
/
180
;
//
const
x
=
Math
.
sin
(
radian
)
*
len
;
// img;
const
y
=
Math
.
cos
(
radian
)
*
len
;
// _z = 0;
//
return
{
x
,
y
};
//
// init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
}
//
// if (imgObj) {
export
function
getAngleByPos
(
px
,
py
,
mx
,
my
)
{
//
// this.img = imgObj;
// const _x = p2x - p1x;
//
// const _y = p2y - p1y;
// this.width = this.img.width;
// const tan = _y / _x;
// this.height = this.img.height;
//
// }
// const radina = Math.atan(tan); // 用反三角函数求弧度
//
// const angle = Math.floor(180 / (Math.PI / radina)); //
// this.anchorX = anchorX;
//
// this.anchorY = anchorY;
// console.log('r: ' , angle);
// }
// return angle;
//
//
//
//
// update($event = null) {
// if (this.visible) {
const
x
=
Math
.
abs
(
px
-
mx
);
// this.draw();
const
y
=
Math
.
abs
(
py
-
my
);
// }
// const x = Math.abs(mx - px);
// }
// const y = Math.abs(my - py);
// draw() {
const
z
=
Math
.
sqrt
(
Math
.
pow
(
x
,
2
)
+
Math
.
pow
(
y
,
2
));
//
const
cos
=
y
/
z
;
// this.ctx.save();
const
radina
=
Math
.
acos
(
cos
);
// 用反三角函数求弧度
//
let
angle
=
Math
.
floor
(
180
/
(
Math
.
PI
/
radina
)
*
100
)
/
100
;
// 将弧度转换成角度
// this.drawInit();
//
if
(
mx
>
px
&&
my
>
py
)
{
// 鼠标在第四象限
// this.updateChildren();
angle
=
180
-
angle
;
//
}
// this.ctx.restore();
// }
if
(
mx
===
px
&&
my
>
py
)
{
// 鼠标在y轴负方向上
//
angle
=
180
;
// drawInit() {
}
//
// this.ctx.translate(this.x, this.y);
if
(
mx
>
px
&&
my
===
py
)
{
// 鼠标在x轴正方向上
//
angle
=
90
;
// this.ctx.rotate(this.rotation * Math.PI / 180);
}
//
// this.ctx.scale(this.scaleX, this.scaleY);
if
(
mx
<
px
&&
my
>
py
)
{
// 鼠标在第三象限
//
angle
=
180
+
angle
;
// this.ctx.globalAlpha = this.alpha;
}
//
// }
if
(
mx
<
px
&&
my
===
py
)
{
// 鼠标在x轴负方向
//
angle
=
270
;
// drawSelf() {
}
// if (this.img) {
// this.ctx.drawImage(this.img, this._offX, this._offY);
if
(
mx
<
px
&&
my
<
py
)
{
// 鼠标在第二象限
// }
angle
=
360
-
angle
;
// }
}
//
// updateChildren() {
// console.log('angle: ', angle);
//
return
angle
;
// 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;
//
// }
src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
2aac7778
<div
class=
"p-image-children-editor"
>
<div
class=
"p-image-children-editor"
>
<h5
style=
"margin-left: 2.5%;"
>
preview:
</h5>
<h5
style=
"margin-left: 2.5%;"
>
preview:
</h5>
<div
class=
"preview-box"
#
wrap
>
<div
class=
"preview-box"
#
wrap
>
<canvas
id=
"canvas"
#
canvas
></canvas>
<canvas
id=
"canvas"
#
canvas
></canvas>
</div>
</div>
<div
nz-row
nzType=
"flex"
nzAlign=
"middle"
>
<div
nz-row
nzType=
"flex"
nzAlign=
"middle"
>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
...
@@ -20,41 +17,53 @@
...
@@ -20,41 +17,53 @@
(
imageUploaded
)="
onBackgroundUploadSuccess
($
event
)"
>
(
imageUploaded
)="
onBackgroundUploadSuccess
($
event
)"
>
</app-upload-image-with-preview>
</app-upload-image-with-preview>
</div>
</div>
</div>
</div>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
class=
"img-box"
*
ngFor=
"let it of hotZoneArr; let i = index"
>
<div
style=
"margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px"
>
<span
style=
"margin-left: 40%;"
>
item-{{i + 1}}
</span>
<button
style=
"float: right;"
nz-button
nzType=
"danger"
nzSize=
"small"
(
click
)="
deleteBtnClick
(
i
)"
>
X
</button>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
class=
"img-box"
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
*
ngFor=
"let it of hotZoneArr; let i = index"
>
<div
style=
" height: 40px;"
>
<h5>
item-{{i+1}}
<i
style=
"margin-left: 20px; margin-top: 2px; float: right; cursor:pointer"
(
click
)="
deleteItem
($
event
,
i
)"
nz-icon
[
nzTheme
]="'
twotone
'"
[
nzType
]="'
close-circle
'"
[
nzTwotoneColor
]="'#
ff0000
'"
></i>
</h5>
</div>
<div
style=
"margin-top: -20px; margin-bottom: 5px"
>
<nz-radio-group
[
ngModel
]="
it
.
itemType
"
(
ngModelChange
)="
radioChange
($
event
,
it
)"
>
<label
*
ngIf=
"isHasRect"
nz-radio
nzValue=
"rect"
>
矩形
</label>
<label
*
ngIf=
"isHasPic"
nz-radio
nzValue=
"pic"
>
图片
</label>
<label
*
ngIf=
"isHasText"
nz-radio
nzValue=
"text"
>
文本
</label>
</nz-radio-group>
</div>
<!--<div class="img-box-upload">--
>
<div
*
ngIf=
"it.itemType == 'pic'"
>
<!--<app-upload-image-with-preview-->
<app-upload-image-with-preview
<!--[picUrl]="it.pic_url"-->
[
picUrl
]="
it
?.
pic_url
"
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">--
>
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
<!--</app-upload-image-with-preview>--
>
</app-upload-image-with-preview
>
<!--</div>--
>
</div
>
<div
*
ngIf=
"it.itemType == 'text'"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
<!--<app-audio-recorder-->
<div
style=
"width: 100%; margin-top: 5px;"
>
<!--[audioUrl]="it.audio_url ? it.audio_url : null "-->
<app-audio-recorder
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"-->
[
audioUrl
]="
it
.
audio_url
"
<!--></app-audio-recorder>-->
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
</div>
</div>
</div>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<div
class=
"bg-box"
>
<div
class=
"bg-box"
>
...
@@ -75,7 +84,7 @@
...
@@ -75,7 +84,7 @@
<div
class=
"save-box"
>
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
(
click
)="
saveClick
()"
>
<i
nz-icon
nzType=
"save"
></i>
<i
nz-icon
nzType=
"save"
></i>
Save
Save
</button>
</button>
...
@@ -83,7 +92,9 @@
...
@@ -83,7 +92,9 @@
</div>
</div>
</div>
</div>
<label
style=
"opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'"
>
1
</label>
src/app/common/custom-hot-zone/custom-hot-zone.component.scss
View file @
2aac7778
...
@@ -87,6 +87,13 @@ h5 {
...
@@ -87,6 +87,13 @@ h5 {
@font-face
{
font-family
:
'BRLNSR_1'
;
src
:
url("/assets/font/BRLNSR_1.TTF")
;
}
...
...
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
2aac7778
import
{
Component
,
ElementRef
,
EventEmitter
,
HostListener
,
Input
,
OnChanges
,
OnDestroy
,
OnInit
,
Output
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Component
,
ElementRef
,
EventEmitter
,
HostListener
,
Input
,
OnChanges
,
OnDestroy
,
OnInit
,
Output
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
EditorItem
,
HotZoneI
tem
,
Label
,
MySprite
}
from
'
./Unit
'
;
import
{
EditorItem
,
HotZoneI
mg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
}
from
'
./Unit
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
getMinScale
}
from
"
../../play/Unit
"
;
import
{
tar
}
from
"
compressing
"
;
@
Component
({
@
Component
({
...
@@ -13,89 +26,85 @@ import TWEEN from '@tweenjs/tween.js';
...
@@ -13,89 +26,85 @@ import TWEEN from '@tweenjs/tween.js';
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
_bgItem
=
null
;
@
Input
()
set
bgItem
(
v
)
{
this
.
_bgItem
=
v
;
this
.
init
();
}
get
bgItem
()
{
return
this
.
_bgItem
;
}
@
Input
()
@
Input
()
imgItemArr
=
null
;
imgItemArr
=
null
;
@
Input
()
@
Input
()
hotZoneItemArr
=
null
;
hotZoneItemArr
=
null
;
@
Input
()
@
Input
()
hotZoneArr
=
null
;
hotZoneArr
=
null
;
@
Output
()
@
Output
()
save
=
new
EventEmitter
();
save
=
new
EventEmitter
();
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
Input
()
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
isHasRect
=
true
;
// @HostListener('window:resize', ['$event'])
@
Input
()
isHasPic
=
true
;
@
Input
()
isHasText
=
true
;
@
Input
()
hotZoneFontObj
=
{
size
:
50
,
name
:
'
BRLNSR_1
'
,
color
:
'
#8f3758
'
}
@
Input
()
defaultItemType
=
'
text
'
;
@
Input
()
hotZoneImgSize
=
190
;
saveDisabled
=
true
;
canvasWidth
=
1280
;
canvasWidth
=
1280
;
canvasHeight
=
720
;
canvasHeight
=
720
;
canvasBaseW
=
1280
;
canvasBaseW
=
1280
;
// @HostListener('window:resize', ['$event'])
canvasBaseH
=
720
;
canvasBaseH
=
720
;
mapScale
=
1
;
mapScale
=
1
;
ctx
;
ctx
;
mx
;
mx
;
my
;
// 点击坐标
my
;
// 点击坐标
// 资源
// rawImages = new Map(res);
// 声音
// 声音
bgAudio
=
new
Audio
();
bgAudio
=
new
Audio
();
images
=
new
Map
();
images
=
new
Map
();
animationId
:
any
;
animationId
:
any
;
// winResizeEventStream = new Subject();
// 资源
// rawImages = new Map(res);
winResizeEventStream
=
new
Subject
();
canvasLeft
;
canvasLeft
;
canvasTop
;
canvasTop
;
renderArr
;
renderArr
;
imgArr
=
[];
imgArr
=
[];
oldPos
;
oldPos
;
radioValue
;
curItem
;
curItem
;
bg
:
MySprite
;
bg
:
MySprite
;
changeSizeFlag
=
false
;
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
constructor
()
{
}
_bgItem
=
null
;
constructor
()
{
get
bgItem
()
{
return
this
.
_bgItem
;
}
}
@
Input
()
set
bgItem
(
v
)
{
this
.
_bgItem
=
v
;
this
.
init
();
}
onResize
(
event
)
{
onResize
(
event
)
{
//
this.winResizeEventStream.next();
this
.
winResizeEventStream
.
next
();
}
}
...
@@ -118,13 +127,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -118,13 +127,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
onBackgroundUploadSuccess
(
e
)
{
onBackgroundUploadSuccess
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
console
.
log
(
'
e:
'
,
e
);
this
.
bgItem
.
url
=
e
.
url
;
this
.
bgItem
.
url
=
e
.
url
;
this
.
refreshBackground
();
this
.
refreshBackground
();
}
}
onItemImgUploadSuccess
(
e
,
item
)
{
item
.
pic_url
=
e
.
url
;
this
.
loadHotZonePic
(
item
.
pic
,
e
.
url
);
}
onItemAudioUploadSuccess
(
e
,
item
)
{
item
.
audio_url
=
e
.
url
;
}
refreshBackground
(
callBack
=
null
)
{
refreshBackground
(
callBack
=
null
)
{
if
(
!
this
.
bg
)
{
if
(
!
this
.
bg
)
{
...
@@ -162,14 +180,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -162,14 +180,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
item
=
this
.
getHotZoneItem
();
const
item
=
this
.
getHotZoneItem
();
this
.
hotZoneArr
.
push
(
item
);
this
.
hotZoneArr
.
push
(
item
);
this
.
refreshItem
(
item
);
this
.
refreshHotZoneId
();
}
deleteBtnClick
(
index
)
{
const
item
=
this
.
hotZoneArr
.
splice
(
index
,
1
)[
0
];
removeItemFromArr
(
this
.
renderArr
,
item
.
pic
);
removeItemFromArr
(
this
.
renderArr
,
item
.
textLabel
);
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
console
.
log
(
'
hotZoneArr:
'
,
this
.
hotZoneArr
);
}
}
onImgUploadSuccessByImg
(
e
,
img
)
{
onImgUploadSuccessByImg
(
e
,
img
)
{
img
.
pic_url
=
e
.
url
;
img
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
img
);
this
.
refreshImage
(
img
);
}
}
refreshImage
(
img
)
{
refreshImage
(
img
)
{
...
@@ -188,7 +217,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -188,7 +217,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
[
i
].
index
=
i
;
this
.
hotZoneArr
[
i
].
index
=
i
;
if
(
this
.
hotZoneArr
[
i
])
{
if
(
this
.
hotZoneArr
[
i
])
{
this
.
hotZoneArr
[
i
].
t
ext
=
'
item-
'
+
(
i
+
1
);
this
.
hotZoneArr
[
i
].
t
itle
=
'
item-
'
+
(
i
+
1
);
}
}
}
}
...
@@ -206,7 +235,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -206,7 +235,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
getHotZoneItem
(
saveData
=
null
)
{
getHotZoneItem
(
saveData
=
null
)
{
const
itemW
=
200
;
const
itemW
=
200
;
...
@@ -219,18 +248,46 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -219,18 +248,46 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
itemType
=
this
.
defaultItemType
;
if
(
saveData
)
{
if
(
saveData
)
{
const
saveRect
=
saveData
.
rect
;
const
saveRect
=
saveData
.
rect
;
item
.
scaleX
=
saveRect
.
width
/
item
.
width
;
item
.
scaleX
=
saveRect
.
width
/
item
.
width
;
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
.
showLineDash
();
item
.
showLineDash
();
const
pic
=
new
HotZoneImg
(
this
.
ctx
);
pic
.
visible
=
false
;
item
[
'
pic
'
]
=
pic
;
if
(
saveData
&&
saveData
.
pic_url
)
{
this
.
loadHotZonePic
(
pic
,
saveData
.
pic_url
);
}
pic
.
x
=
item
.
x
;
pic
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
pic
);
const
textLabel
=
new
HotZoneLabel
(
this
.
ctx
);
textLabel
.
fontSize
=
this
.
hotZoneFontObj
.
size
;
textLabel
.
fontName
=
this
.
hotZoneFontObj
.
name
;
textLabel
.
fontColor
=
this
.
hotZoneFontObj
.
color
;
textLabel
.
textAlign
=
'
center
'
;
// textLabel.setOutline();
// console.log('saveData:', saveData);
item
[
'
textLabel
'
]
=
textLabel
;
textLabel
.
setScaleXY
(
this
.
mapScale
);
if
(
saveData
&&
saveData
.
text
)
{
textLabel
.
text
=
saveData
.
text
;
textLabel
.
refreshSize
();
}
textLabel
.
x
=
item
.
x
;
textLabel
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
textLabel
);
return
item
;
return
item
;
}
}
...
@@ -240,7 +297,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -240,7 +297,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
item
=
new
EditorItem
(
this
.
ctx
);
const
item
=
new
EditorItem
(
this
.
ctx
);
item
.
load
(
img
.
pic_url
).
then
(
img
=>
{
item
.
load
(
img
.
pic_url
).
then
(
img
=>
{
let
maxW
,
maxH
;
let
maxW
,
maxH
;
if
(
this
.
bg
)
{
if
(
this
.
bg
)
{
...
@@ -266,7 +323,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -266,7 +323,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
saveRect
=
saveData
.
rect
;
const
saveRect
=
saveData
.
rect
;
item
.
setScaleXY
(
saveRect
.
width
/
item
.
width
);
item
.
setScaleXY
(
saveRect
.
width
/
item
.
width
);
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
;
}
else
{
}
else
{
...
@@ -291,9 +348,29 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -291,9 +348,29 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
radioChange
(
e
,
item
)
{
item
.
itemType
=
e
;
this
.
refreshItem
(
item
);
// console.log(' in radioChange e: ', e);
}
refreshItem
(
item
)
{
switch
(
item
.
itemType
)
{
case
'
rect
'
:
this
.
setRectState
(
item
);
break
;
case
'
pic
'
:
this
.
setPicState
(
item
);
break
;
case
'
text
'
:
this
.
setTextState
(
item
);
break
;
default
:
}
}
init
()
{
init
()
{
...
@@ -367,20 +444,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -367,20 +444,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// img['audio_url'] = arr[i].audio_url;
// img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img);
// this.imgArr.push(img);
const
item
=
this
.
getHotZoneItem
(
data
);
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
.
refreshItem
(
item
);
console
.
log
(
'
item:
'
,
item
);
console
.
log
(
'
item:
'
,
item
);
this
.
hotZoneArr
.
push
(
item
);
this
.
hotZoneArr
.
push
(
item
);
}
}
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
// this.refreshImageId();
// this.refreshImageId();
}
}
initImgArr
()
{
initImgArr
()
{
console
.
log
(
'
this.imgItemArr:
'
,
this
.
imgItemArr
);
console
.
log
(
'
this.imgItemArr:
'
,
this
.
imgItemArr
);
...
@@ -446,34 +528,40 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -446,34 +528,40 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
const
arr
=
this
.
hotZoneArr
;
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
for
(
let
i
=
arr
.
length
-
1
;
i
>=
0
;
i
--
)
{
const
item
=
arr
[
i
];
if
(
item
)
{
const
item
=
this
.
hotZoneArr
[
i
];
if
(
this
.
checkClickTarget
(
item
))
{
let
callback
;
let
target
;
switch
(
item
.
itemType
)
{
case
'
rect
'
:
target
=
item
;
callback
=
this
.
clickedHotZoneRect
.
bind
(
this
);
break
;
case
'
pic
'
:
target
=
item
.
pic
;
callback
=
this
.
clickedHotZonePic
.
bind
(
this
);
break
;
case
'
text
'
:
target
=
item
.
textLabel
;
callback
=
this
.
clickedHotZoneText
.
bind
(
this
);
break
;
}
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrow
))
{
if
(
this
.
checkClickTarget
(
target
))
{
this
.
changeItemSize
(
item
);
callback
(
target
);
}
else
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrowTop
))
{
return
;
this
.
changeItemTopSize
(
item
);
}
else
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrowRight
))
{
this
.
changeItemRightSize
(
item
);
}
else
{
this
.
changeCurItem
(
item
);
}
return
;
}
}
}
}
}
// this.hideAllLineDash();
}
}
mapMove
(
event
)
{
mapMove
(
event
)
{
if
(
!
this
.
curItem
)
{
return
;
}
if
(
!
this
.
curItem
)
{
return
;
}
if
(
this
.
changeSizeFlag
)
{
if
(
this
.
changeSizeFlag
)
{
this
.
changeSize
();
this
.
changeSize
();
...
@@ -493,6 +581,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -493,6 +581,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
this
.
saveDisabled
=
true
;
}
}
mapUp
(
event
)
{
mapUp
(
event
)
{
...
@@ -503,13 +594,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -503,13 +594,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
changeSize
()
{
changeSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
const
rect
=
this
.
curItem
.
getBoundingBox
();
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
)
)
*
2
;
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
)
)
*
2
;
let
lenH
=
(
(
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
lenH
=
(
(
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
minLen
=
20
;
let
minLen
=
20
;
...
@@ -538,7 +627,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -538,7 +627,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
rect
=
this
.
curItem
.
getBoundingBox
();
const
rect
=
this
.
curItem
.
getBoundingBox
();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let
lenH
=
(
(
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
lenH
=
(
(
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
minLen
=
20
;
let
minLen
=
20
;
...
@@ -550,10 +639,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -550,10 +639,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// s = lenW / this.curItem.width;
// s = lenW / this.curItem.width;
//
//
// } else {
// } else {
if
(
lenH
<
minLen
)
{
if
(
lenH
<
minLen
)
{
lenH
=
minLen
;
lenH
=
minLen
;
}
}
s
=
lenH
/
this
.
curItem
.
height
;
s
=
lenH
/
this
.
curItem
.
height
;
// }
// }
...
@@ -565,7 +654,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -565,7 +654,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeRightSize
()
{
changeRightSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
const
rect
=
this
.
curItem
.
getBoundingBox
();
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
)
)
*
2
;
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
)
)
*
2
;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let
minLen
=
20
;
let
minLen
=
20
;
...
@@ -634,6 +723,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -634,6 +723,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// }
// }
this
.
updateArr
(
this
.
hotZoneArr
);
this
.
updateArr
(
this
.
hotZoneArr
);
this
.
updatePos
()
TWEEN
.
update
();
TWEEN
.
update
();
...
@@ -648,7 +738,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -648,7 +738,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
renderAfterResize
()
{
renderAfterResize
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
...
@@ -657,11 +746,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -657,11 +746,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener
()
{
initListener
()
{
//
this.winResizeEventStream
this
.
winResizeEventStream
//
.pipe(debounceTime(500))
.
pipe
(
debounceTime
(
500
))
//
.subscribe(data => {
.
subscribe
(
data
=>
{
//
this.renderAfterResize();
this
.
renderAfterResize
();
//
});
});
if
(
this
.
IsPC
())
{
if
(
this
.
IsPC
())
{
...
@@ -767,41 +856,38 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -767,41 +856,38 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if
(
this
.
bg
)
{
if
(
this
.
bg
)
{
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
}
else
{
}
else
{
bgItem
[
'
rect
'
]
=
{
x
:
0
,
y
:
0
,
width
:
Math
.
round
(
this
.
canvasWidth
*
100
)
/
100
,
height
:
Math
.
round
(
this
.
canvasHeight
*
100
)
/
100
};
bgItem
[
'
rect
'
]
=
{
x
:
0
,
y
:
0
,
width
:
Math
.
round
(
this
.
canvasWidth
*
100
)
/
100
,
height
:
Math
.
round
(
this
.
canvasHeight
*
100
)
/
100
};
}
}
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const
hotZoneItemArr
=
[];
const
hotZoneItemArr
=
[];
const
hotZoneArr
=
this
.
hotZoneArr
;
const
hotZoneArr
=
this
.
hotZoneArr
;
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
const
hotZoneItem
=
{
index
:
hotZoneArr
[
i
].
index
,
index
:
hotZoneArr
[
i
].
index
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
text
:
hotZoneArr
[
i
].
text
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
itemType
:
hotZoneArr
[
i
].
itemType
,
fontSize
:
this
.
hotZoneFontObj
.
size
,
fontName
:
this
.
hotZoneFontObj
.
name
,
fontColor
:
this
.
hotZoneFontObj
.
color
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
imgScale
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
scaleX
:
1
,
mapScale
:
this
.
mapScale
};
};
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
;
hotZoneItem
[
'
rect
'
].
height
=
Math
.
round
(
(
hotZoneItem
[
'
rect
'
].
height
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
height
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
height
)
*
100
)
/
100
;
hotZoneItemArr
.
push
(
hotZoneItem
);
hotZoneItemArr
.
push
(
hotZoneItem
);
}
}
...
@@ -810,4 +896,91 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -810,4 +896,91 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
save
.
emit
({
bgItem
,
hotZoneItemArr
});
this
.
save
.
emit
({
bgItem
,
hotZoneItemArr
});
}
}
private
updatePos
()
{
this
.
hotZoneArr
.
forEach
((
item
)
=>
{
let
x
,
y
;
switch
(
item
.
itemType
)
{
case
'
rect
'
:
x
=
item
.
x
;
y
=
item
.
y
;
break
;
case
'
pic
'
:
x
=
item
.
pic
.
x
;
y
=
item
.
pic
.
y
;
break
;
case
'
text
'
:
x
=
item
.
textLabel
.
x
;
y
=
item
.
textLabel
.
y
;
break
;
}
item
.
x
=
x
;
item
.
y
=
y
;
item
.
pic
.
x
=
x
;
item
.
pic
.
y
=
y
;
item
.
textLabel
.
x
=
x
;
item
.
textLabel
.
y
=
y
;
});
}
private
setPicState
(
item
:
any
)
{
item
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
item
.
pic
.
visible
=
true
;
}
private
setRectState
(
item
:
any
)
{
item
.
visible
=
true
;
item
.
textLabel
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
}
private
setTextState
(
item
:
any
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
true
;
}
private
clickedHotZoneRect
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrow
))
{
this
.
changeItemSize
(
item
);
}
else
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrowTop
))
{
this
.
changeItemTopSize
(
item
);
}
else
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrowRight
))
{
this
.
changeItemRightSize
(
item
);
}
else
{
this
.
changeCurItem
(
item
);
}
return
;
}
}
private
clickedHotZonePic
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
this
.
curItem
=
item
;
}
}
private
clickedHotZoneText
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
this
.
curItem
=
item
;
}
}
saveText
(
item
)
{
item
.
textLabel
.
text
=
item
.
text
;
}
private
loadHotZonePic
(
pic
:
HotZoneImg
,
url
)
{
const
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
pic
.
load
(
url
).
then
(()
=>
{
const
s
=
getMinScale
(
pic
,
baseLen
);
pic
.
setScaleXY
(
s
);
});
}
}
}
tsconfig.app.json
View file @
2aac7778
...
@@ -2,7 +2,9 @@
...
@@ -2,7 +2,9 @@
"extends"
:
"./tsconfig.json"
,
"extends"
:
"./tsconfig.json"
,
"compilerOptions"
:
{
"compilerOptions"
:
{
"outDir"
:
"./out-tsc/app"
,
"outDir"
:
"./out-tsc/app"
,
"types"
:
[]
"types"
:
[
"node"
]
},
},
"files"
:
[
"files"
:
[
"src/main.ts"
,
"src/main.ts"
,
...
...
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