Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
PU20
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
PU20
Commits
0952dbf6
Commit
0952dbf6
authored
May 11, 2021
by
jeff
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
=。=半截上传
parent
30bbe2bc
Changes
30
Hide whitespace changes
Inline
Side-by-side
Showing
30 changed files
with
6406 additions
and
574 deletions
+6406
-574
angular.json
form/angular.json
+5
-2
app.module.ts
form/src/app/app.module.ts
+2
-0
Unit.ts
form/src/app/common/custom-hot-zone-mini/Unit.ts
+2374
-0
custom-hot-zone-mini.component.html
.../custom-hot-zone-mini/custom-hot-zone-mini.component.html
+244
-0
custom-hot-zone-mini.component.scss
.../custom-hot-zone-mini/custom-hot-zone-mini.component.scss
+111
-0
custom-hot-zone-mini.component.ts
...on/custom-hot-zone-mini/custom-hot-zone-mini.component.ts
+1557
-0
form.component.html
form/src/app/form/form.component.html
+6
-5
anim.meta
play/assets/scene/anim.meta
+12
-0
hand.anim
play/assets/scene/anim/hand.anim
+120
-0
hand.anim.meta
play/assets/scene/anim/hand.anim.meta
+5
-0
tips.anim
play/assets/scene/anim/tips.anim
+31
-0
tips.anim.meta
play/assets/scene/anim/tips.anim.meta
+5
-0
按钮.mp3
play/assets/scene/audios/按钮.mp3
+0
-0
按钮.mp3.meta
play/assets/scene/audios/按钮.mp3.meta
+1
-1
提示.mp3
play/assets/scene/audios/提示.mp3
+0
-0
提示.mp3.meta
play/assets/scene/audios/提示.mp3.meta
+8
-0
prefab.meta
play/assets/scene/prefab.meta
+12
-0
hitItem.prefab
play/assets/scene/prefab/hitItem.prefab
+664
-0
hitItem.prefab.meta
play/assets/scene/prefab/hitItem.prefab.meta
+8
-0
picNode.js
play/assets/scene/scene/picNode.js
+67
-0
picNode.js.meta
play/assets/scene/scene/picNode.js.meta
+1
-1
scene.fire
play/assets/scene/scene/scene.fire
+790
-207
NewScript.ts
play/assets/scene/script/NewScript.ts
+42
-0
NewScript.ts.meta
play/assets/scene/script/NewScript.ts.meta
+1
-1
scene.js
play/assets/scene/script/scene.js
+318
-0
scene.js.meta
play/assets/scene/script/scene.js.meta
+1
-1
tools.js
play/assets/scene/script/tools.js
+10
-0
tools.js.meta
play/assets/scene/script/tools.js.meta
+9
-0
util.js
play/assets/scene/script/util.js
+0
-354
bg_move.png.meta
play/assets/scene/textures/bg_move.png.meta
+2
-2
No files found.
form/angular.json
View file @
0952dbf6
...
@@ -128,5 +128,8 @@
...
@@ -128,5 +128,8 @@
}
}
}
}
},
},
"defaultProject"
:
"ng-template-generator"
"defaultProject"
:
"ng-template-generator"
,
}
"cli"
:
{
"analytics"
:
"d34c626f-1cb5-4532-8f46-d97c6969e2fd"
}
}
\ No newline at end of file
form/src/app/app.module.ts
View file @
0952dbf6
...
@@ -17,6 +17,7 @@ import {BackgroundImagePipe} from './pipes/background-image.pipe';
...
@@ -17,6 +17,7 @@ import {BackgroundImagePipe} from './pipes/background-image.pipe';
import
{
UploadImageWithPreviewComponent
}
from
'
./common/upload-image-with-preview/upload-image-with-preview.component
'
;
import
{
UploadImageWithPreviewComponent
}
from
'
./common/upload-image-with-preview/upload-image-with-preview.component
'
;
import
{
PlayerContentWrapperComponent
}
from
'
./common/player-content-wrapper/player-content-wrapper.component
'
;
import
{
PlayerContentWrapperComponent
}
from
'
./common/player-content-wrapper/player-content-wrapper.component
'
;
import
{
CustomHotZoneComponent
}
from
'
./common/custom-hot-zone/custom-hot-zone.component
'
;
import
{
CustomHotZoneComponent
}
from
'
./common/custom-hot-zone/custom-hot-zone.component
'
;
import
{
CustomHotZoneComponent1
}
from
'
./common/custom-hot-zone-mini/custom-hot-zone-mini.component
'
;
import
{
UploadVideoComponent
}
from
'
./common/upload-video/upload-video.component
'
;
import
{
UploadVideoComponent
}
from
'
./common/upload-video/upload-video.component
'
;
import
{
TimePipe
}
from
'
./pipes/time.pipe
'
;
import
{
TimePipe
}
from
'
./pipes/time.pipe
'
;
import
{
ResourcePipe
}
from
'
./pipes/resource.pipe
'
;
import
{
ResourcePipe
}
from
'
./pipes/resource.pipe
'
;
...
@@ -42,6 +43,7 @@ registerLocaleData(zh);
...
@@ -42,6 +43,7 @@ registerLocaleData(zh);
TimePipe
,
TimePipe
,
UploadVideoComponent
,
UploadVideoComponent
,
CustomHotZoneComponent
,
CustomHotZoneComponent
,
CustomHotZoneComponent1
,
UploadDragonBoneComponent
,
UploadDragonBoneComponent
,
PlayerContentWrapperComponent
,
PlayerContentWrapperComponent
,
CustomActionComponent
,
CustomActionComponent
,
...
...
form/src/app/common/custom-hot-zone-mini/Unit.ts
0 → 100644
View file @
0952dbf6
import
TWEEN
from
'
@tweenjs/tween.js
'
;
interface
AirWindow
extends
Window
{
air
:
any
;
curCtx
:
any
;
}
declare
let
window
:
AirWindow
;
class
Sprite
{
x
=
0
;
y
=
0
;
color
=
''
;
radius
=
0
;
alive
=
false
;
margin
=
0
;
angle
=
0
;
ctx
;
constructor
(
ctx
=
null
)
{
if
(
!
ctx
)
{
this
.
ctx
=
window
.
curCtx
;
}
else
{
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
;
skewX
=
0
;
skewY
=
0
;
_shadowFlag
=
false
;
_shadowColor
;
_shadowOffsetX
=
0
;
_shadowOffsetY
=
0
;
_shadowBlur
=
5
;
_radius
=
0
;
children
=
[
this
];
childDepandVisible
=
true
;
childDepandAlpha
=
false
;
img
;
_z
=
0
;
_showRect
;
_bitmapFlag
=
false
;
_offCanvas
;
_offCtx
;
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
;
}
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
)
{
if
(
!
this
.
visible
&&
this
.
childDepandVisible
)
{
return
;
}
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
;
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
()
{
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
.
_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
()
{
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
for
(
const
child
of
this
.
children
)
{
if
(
child
===
this
)
{
if
(
this
.
visible
)
{
this
.
drawSelf
();
}
}
else
{
child
.
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
;
});
if
(
this
.
childDepandAlpha
)
{
child
.
alpha
=
this
.
alpha
;
}
}
removeChild
(
child
)
{
const
index
=
this
.
children
.
indexOf
(
child
);
if
(
index
!==
-
1
)
{
this
.
children
.
splice
(
index
,
1
);
}
}
removeChildren
()
{
for
(
let
i
=
0
;
i
<
this
.
children
.
length
;
i
++
)
{
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
;
}
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
;
}
export
function
removeItemFromArr
(
arr
,
item
)
{
const
index
=
arr
.
indexOf
(
item
);
if
(
index
!==
-
1
)
{
arr
.
splice
(
index
,
1
);
}
}
export
function
circleMove
(
item
,
x0
,
y0
,
time
=
2
,
addR
=
360
,
xPer
=
1
,
yPer
=
1
,
callBack
=
null
,
easing
=
null
)
{
const
r
=
getPosDistance
(
item
.
x
,
item
.
y
,
x0
,
y0
);
let
a
=
getAngleByPos
(
item
.
x
,
item
.
y
,
x0
,
y0
);
a
+=
90
;
const
obj
=
{
r
,
a
};
item
.
_circleAngle
=
a
;
const
targetA
=
a
+
addR
;
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
_circleAngle
:
targetA
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
onUpdate
(
(
item
,
progress
)
=>
{
// console.log(item._circleAngle);
const
r
=
obj
.
r
;
const
a
=
item
.
_circleAngle
;
const
x
=
x0
+
r
*
xPer
*
Math
.
cos
(
a
*
Math
.
PI
/
180
);
const
y
=
y0
+
r
*
yPer
*
Math
.
sin
(
a
*
Math
.
PI
/
180
);
item
.
x
=
x
;
item
.
y
=
y
;
// obj.a ++;
});
tween
.
start
();
}
export
function
getPosDistance
(
sx
,
sy
,
ex
,
ey
)
{
const
_x
=
ex
-
sx
;
const
_y
=
ey
-
sy
;
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
}
export
function
delayCall
(
callback
,
second
)
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
delay
(
second
*
1000
)
.
onComplete
(()
=>
{
if
(
callback
)
{
callback
();
}
})
.
start
();
}
export
function
formatTime
(
fmt
,
date
)
{
// "yyyy-MM-dd HH:mm:ss";
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
;
}
export
function
getMinScale
(
item
,
maxLen
)
{
const
sx
=
maxLen
/
item
.
width
;
const
sy
=
maxLen
/
item
.
height
;
const
minS
=
Math
.
min
(
sx
,
sy
);
return
minS
;
}
export
function
jelly
(
item
,
time
=
0.7
)
{
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
();
}
export
function
showPopParticle
(
img
,
pos
,
parent
,
num
=
20
,
minLen
=
40
,
maxLen
=
80
,
showTime
=
0.4
)
{
for
(
let
i
=
0
;
i
<
num
;
i
++
)
{
const
particle
=
new
MySprite
();
particle
.
init
(
img
);
particle
.
x
=
pos
.
x
;
particle
.
y
=
pos
.
y
;
parent
.
addChild
(
particle
);
const
randomR
=
360
*
Math
.
random
();
particle
.
rotation
=
randomR
;
const
randomS
=
0.3
+
Math
.
random
()
*
0.7
;
particle
.
setScaleXY
(
randomS
*
0.3
);
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
,
()
=>
{
},
TWEEN
.
Easing
.
Exponential
.
Out
);
// scaleItem(particle, 0, 0.6, () => {
//
// });
scaleItem
(
particle
,
randomS
,
0.6
,
()
=>
{
},
TWEEN
.
Easing
.
Exponential
.
Out
);
setTimeout
(()
=>
{
hideItem
(
particle
,
0.4
,
()
=>
{
},
TWEEN
.
Easing
.
Cubic
.
In
);
},
showTime
*
0.5
*
1000
);
}
}
export
function
shake
(
item
,
time
=
0.5
,
callback
=
null
,
rate
=
1
)
{
if
(
item
.
shakeTween
)
{
return
;
}
item
.
shakeTween
=
true
;
const
offX
=
15
*
item
.
scaleX
*
rate
;
const
offY
=
15
*
item
.
scaleX
*
rate
;
const
baseX
=
item
.
x
;
const
baseY
=
item
.
y
;
const
easing
=
TWEEN
.
Easing
.
Sinusoidal
.
InOut
;
const
move4
=
()
=>
{
moveItem
(
item
,
baseX
,
baseY
,
time
/
4
,
()
=>
{
item
.
shakeTween
=
false
;
if
(
callback
)
{
callback
();
}
},
easing
);
};
const
move3
=
()
=>
{
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
();
}
// --------------- custom class --------------------
export
class
HotZoneItem
extends
MySprite
{
lineDashFlag
=
false
;
arrow
:
MySprite
;
label
:
Label
;
title
;
arrowTop
;
arrowRight
;
audio_url
;
pic_url
;
text
;
gIdx
;
isAnimaStyle
=
false
;
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
=
40
;
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
();
}
setAnimaStyle
(
isAnimaStyle
)
{
this
.
isAnimaStyle
=
isAnimaStyle
;
console
.
log
(
'
in setAnimaStyle
'
)
}
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
update
();
if
(
!
this
.
isAnimaStyle
)
{
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
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
();
}
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
EditorItem
extends
MySprite
{
lineDashFlag
=
false
;
arrow
:
MySprite
;
label
:
Label
;
text
;
arrowTop
;
arrowRight
;
showLabel
(
text
=
null
)
{
if
(
!
this
.
label
)
{
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
.
anchorY
=
0
;
this
.
label
.
fontSize
=
50
;
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.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
();
}
refreshLabelScale
()
{}
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
();
}
}
}
form/src/app/common/custom-hot-zone-mini/custom-hot-zone-mini.component.html
0 → 100644
View file @
0952dbf6
<div
class=
"p-image-children-editor"
>
<h5
style=
"margin-left: 2.5%;"
>
预览:
</h5>
<div
class=
"preview-box"
#
wrap
>
<canvas
id=
"canvas"
#
canvas
></canvas>
</div>
<div
nz-row
nzType=
"flex"
nzAlign=
"middle"
>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<h5>
添加背景:
</h5>
<div
class=
"bg-box"
>
<app-upload-image-with-preview
[
picUrl
]="
bgItem
?.
url
"
(
imageUploaded
)="
onBackgroundUploadSuccess
($
event
)"
>
</app-upload-image-with-preview>
</div>
</div>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
class=
"img-box"
*
ngFor=
"let it of hotZoneArr; let i = index"
>
<div
style=
"margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px"
>
<span
style=
"margin-left: 40%;"
>
区域{{i + 1}}
</span>
<button
style=
"float: right;"
nz-button
nzType=
"danger"
nzSize=
"small"
(
click
)="
deleteBtnClick
(
i
)"
>
X
</button>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<div
style=
"margin-top: -20px; margin-bottom: 5px; width: 100%;"
>
<!-- <div *ngIf="customTypeGroupArr">
<nz-radio-group [ngModel]="it.gIdx" (ngModelChange)="customRadioChange($event, it)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div *ngFor="let group of customTypeGroupArr; let gIdx = index" style="display: flex; ">
<label nz-radio nzValue="{{gIdx}}">{{group.name}}</label>
</div>
</nz-radio-group>
</div> -->
<!-- <div *ngIf="!customTypeGroupArr">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div> -->
</div>
<div
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[it.gIdx]"
>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].pic"
>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
</app-upload-image-with-preview>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].text"
style=
"margin-top: 5px"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].anima"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].animaSmall"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaSmallBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画(小)
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].audio"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.action"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-custom-action
style=
"margin: auto"
[
item
]="
it
?
it
['
actionData_
'
+
it
.
gIdx
]
:
{}"
[
type
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
type
"
[
option
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
option
"
(
save
)="
onSaveCustomAction
($
event
,
it
)"
>
>
</app-custom-action>
</div>
</div>
<!-- <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
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<div
class=
"bg-box"
>
<button
nz-button
nzType=
"dashed"
(
click
)="
addBtnClick
()"
class=
"add-btn"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
<!--Add Image-->
添加点击区域
</button>
</div>
</div>
</div>
<nz-divider></nz-divider>
<div
class=
"save-box"
>
<button
style=
"margin-left: 200px"
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
<i
nz-icon
nzType=
"save"
></i>
Save
</button>
<div
*
ngIf=
"isCopyData"
style=
"height: 40px; display: flex; justify-items: center;"
>
<label
style=
"margin-left: 40px"
nz-checkbox
[(
ngModel
)]="
bgItem
.
isShowDebugLine
"
>
显示辅助框
</label>
<button
style=
"margin-left: 20px; margin-top: -5px"
nz-button
(
click
)="
copyHotZoneData
()"
>
复制基础数据
</button>
<div
style=
"margin-left: 10px; margin-top: -5px"
>
<span>
粘贴数据:
</span>
<input
style=
"width: 100px;"
type=
"text"
nz-input
[(
ngModel
)]="
pasteData
"
>
<button
style=
"margin-left: 5px;"
nz-button
[
disabled
]="
pasteData=
=''"
nzType=
"primary"
(
click
)="
importData
()"
>
导入
</button>
</div>
</div>
</div>
</div>
<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/src/app/common/custom-hot-zone-mini/custom-hot-zone-mini.component.scss
0 → 100644
View file @
0952dbf6
.p-image-children-editor
{
width
:
100%
;
height
:
100%
;
border-radius
:
0
.5rem
;
border
:
2px
solid
#ddd
;
.preview-box
{
margin
:
auto
;
width
:
95%
;
height
:
35vw
;
border
:
2px
dashed
#ddd
;
border-radius
:
0
.5rem
;
background-color
:
#fafafa
;
text-align
:
center
;
color
:
#aaa
;
.preview-img
{
height
:
100%
;
width
:
auto
;
}
}
.bg-box
{
//width: 100%;
margin-bottom
:
1rem
;
}
.img-box
{
margin-bottom
:
1rem
;
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
justify-content
:
center
;
}
.img-box-upload
{
width
:
80%
;
}
.add-btn
{
margin-top
:
1rem
;
width
:
200px
;
height
:
90px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
}
.save-box
{
width
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
.save-btn
{
width
:
160px
;
height
:
40px
;
//margin-top: 20px;
margin-bottom
:
20px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
}
.anima-upload-btn
{
padding
:
10px
;
}
h5
{
margin-top
:
1rem
;
}
//
//@font-face
//{
// font-family: 'BRLNSR_1';
// src: url("/assets/font/BRLNSR_1.TTF") ;
//}
form/src/app/common/custom-hot-zone-mini/custom-hot-zone-mini.component.ts
0 → 100644
View file @
0952dbf6
import
{
ApplicationRef
,
ChangeDetectorRef
,
Component
,
ElementRef
,
EventEmitter
,
HostListener
,
Input
,
OnChanges
,
OnDestroy
,
OnInit
,
Output
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
,
ShapeRect
,
ShapeRectNew
}
from
'
./Unit
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
getMinScale
}
from
'
../../play/Unit
'
;
import
{
tar
}
from
'
compressing
'
;
import
{
NzMessageService
}
from
'
ng-zorro-antd
'
;
@
Component
({
selector
:
'
app-custom-hot-zone-mini
'
,
templateUrl
:
'
./custom-hot-zone-mini.component.html
'
,
styleUrls
:
[
'
./custom-hot-zone-mini.component.scss
'
]
})
export
class
CustomHotZoneComponent1
implements
OnInit
,
OnDestroy
,
OnChanges
{
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
Input
()
hotZoneItemArr
=
null
;
@
Input
()
hotZoneArr
=
null
;
@
Input
()
isHasRect
=
true
;
@
Input
()
isHasPic
=
true
;
@
Input
()
isHasText
=
true
;
@
Input
()
isHasAudio
=
true
;
@
Input
()
isHasAnima
=
false
;
@
Input
()
customTypeGroupArr
;
// [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...]
@
Input
()
hotZoneFontObj
;
@
Input
()
isCopyData
=
false
;
// hotZoneFontObj = {
// size: 50,
// name: 'BRLNSR_1',
// color: '#8f3758'
// }
@
Input
()
defaultItemType
=
'
text
'
;
@
Input
()
hotZoneImgSize
=
0
;
@
Output
()
save
=
new
EventEmitter
();
saveDisabled
=
true
;
canvasWidth
=
1280
;
canvasHeight
=
720
;
canvasBaseW
=
1280
;
// @HostListener('window:resize', ['$event'])
canvasBaseH
=
720
;
mapScale
=
1
;
ctx
;
mx
;
my
;
// 点击坐标
// 声音
bgAudio
=
new
Audio
();
images
=
new
Map
();
animationId
:
any
;
// 资源
// rawImages = new Map(res);
winResizeEventStream
=
new
Subject
();
canvasLeft
;
canvasTop
;
renderArr
;
imgArr
=
[];
oldPos
;
radioValue
;
curItem
;
bg
:
MySprite
;
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
animaPanelVisible
=
false
;
uploadUrl
;
uploadData
;
skeJsonData
=
{};
texJsonData
=
{};
texPngData
=
{};
animaName
=
''
;
curDragonBoneIndex
;
curDragonBoneGIdx
;
pasteData
=
''
;
isSkeJsonLoading
=
false
;
isTexJsonLoading
=
false
;
isTexPngLoading
=
false
;
isAnimaSmall
=
false
;
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
;
get
bgItem
()
{
return
this
.
_bgItem
;
}
@
Input
()
set
bgItem
(
v
)
{
this
.
_bgItem
=
v
;
this
.
init
();
}
onResize
(
event
)
{
this
.
winResizeEventStream
.
next
();
}
ngOnInit
()
{
this
.
initListener
();
// this.init();
this
.
update
();
this
.
refresh
();
}
ngOnDestroy
()
{
window
.
cancelAnimationFrame
(
this
.
animationId
);
}
ngOnChanges
()
{
}
onBackgroundUploadSuccess
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
this
.
bgItem
.
url
=
e
.
url
;
this
.
refreshBackground
();
}
onItemImgUploadSuccess
(
e
,
item
)
{
item
.
pic_url
=
e
.
url
;
this
.
loadHotZonePic
(
item
.
pic
,
e
.
url
);
this
.
refresh
();
}
onItemAudioUploadSuccess
(
e
,
item
)
{
item
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
refreshBackground
(
callBack
=
null
)
{
if
(
!
this
.
bg
)
{
this
.
bg
=
new
MySprite
(
this
.
ctx
);
this
.
renderArr
.
push
(
this
.
bg
);
}
if
(
!
this
.
bgItem
.
url
)
{
this
.
bgItem
.
url
=
'
http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg
'
;
}
const
bg
=
this
.
bg
;
// if (this.bgItem.url) {
bg
.
load
(
this
.
bgItem
.
url
).
then
(()
=>
{
const
rate1
=
this
.
canvasWidth
/
bg
.
width
;
const
rate2
=
this
.
canvasHeight
/
bg
.
height
;
const
rate
=
Math
.
min
(
rate1
,
rate2
);
bg
.
setScaleXY
(
rate
);
bg
.
x
=
this
.
canvasWidth
/
2
;
bg
.
y
=
this
.
canvasHeight
/
2
;
if
(
callBack
)
{
callBack
();
}
this
.
refresh
();
});
// }
}
addBtnClick
()
{
// this.imgArr.push({});
// this.hotZoneArr.push({});
const
item
=
this
.
getHotZoneItem
();
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
();
}
onImgUploadSuccessByImg
(
e
,
img
)
{
img
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
img
);
this
.
refresh
();
}
refreshImage
(
img
)
{
this
.
hideAllLineDash
();
img
.
picItem
=
this
.
getPicItem
(
img
);
this
.
refreshImageId
();
}
refreshHotZoneId
()
{
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
this
.
hotZoneArr
[
i
].
index
=
i
;
if
(
this
.
hotZoneArr
[
i
])
{
this
.
hotZoneArr
[
i
].
title
=
'
item-
'
+
(
i
+
1
);
}
}
this
.
refresh
();
}
refreshImageId
()
{
for
(
let
i
=
0
;
i
<
this
.
imgArr
.
length
;
i
++
)
{
this
.
imgArr
[
i
].
id
=
i
;
if
(
this
.
imgArr
[
i
].
picItem
)
{
this
.
imgArr
[
i
].
picItem
.
text
=
'
Image-
'
+
(
i
+
1
);
}
}
}
getHotZoneItem
(
saveData
=
null
)
{
const
itemW
=
200
;
const
itemH
=
200
;
const
item
=
new
HotZoneItem
(
this
.
ctx
);
item
.
setSize
(
itemW
,
itemH
);
item
.
anchorX
=
0.5
;
item
.
anchorY
=
0.5
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
itemType
=
this
.
getDefaultItemType
();
item
.
gIdx
=
this
.
_dafaultIndex
+
''
item
[
'
id
'
]
=
new
Date
().
getTime
().
toString
();
item
[
'
data
'
]
=
saveData
;
console
.
log
(
'
item.x:
'
,
item
.
x
);
if
(
saveData
)
{
const
saveRect
=
saveData
.
rect
;
item
.
scaleX
=
saveRect
.
width
/
item
.
width
;
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
item
.
gIdx
=
saveData
.
gIdx
;
item
[
'
id
'
]
=
saveData
.
id
;
item
[
'
pic
'
]
=
saveData
.
pic_url
// item['skeJsonData'] = saveData.skeJsonData;
// item['texJsonData'] = saveData.texJsonData;
// item['texPngData'] = saveData.texPngData;
// item['actionData_' + item.gIdx] = saveData['actionData_' + item.gIdx];
}
console
.
log
(
'
item.x:~~
'
,
item
.
x
);
item
.
showLineDash
();
// const pic = new HotZoneImg(this.ctx);
this
.
setItemPic
(
item
,
saveData
);
this
.
setItemLabel
(
item
,
saveData
);
this
.
setItemAnima
(
item
,
saveData
);
return
item
;
}
setItemPic
(
item
,
saveData
)
{
console
.
log
(
'
in setItemPic
'
,
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
);
}
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
);
if
(
this
.
hotZoneFontObj
)
{
textLabel
.
fontSize
=
this
.
hotZoneFontObj
.
size
;
textLabel
.
fontName
=
this
.
hotZoneFontObj
.
name
;
textLabel
.
fontColor
=
this
.
hotZoneFontObj
.
color
;
}
textLabel
.
textAlign
=
'
center
'
;
// textLabel.setOutline();
item
[
'
textLabel
'
]
=
textLabel
;
textLabel
.
setScaleXY
(
this
.
mapScale
);
if
(
saveData
)
{
if
(
saveData
.
text
&&
this
.
hotZoneFontObj
)
{
textLabel
.
text
=
saveData
.
text
}
this
.
setActionFont
(
textLabel
,
saveData
[
'
actionData_
'
+
item
.
gIdx
]);
textLabel
.
refreshSize
();
}
textLabel
.
x
=
item
.
x
;
textLabel
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
textLabel
);
}
setActionFont
(
textLabel
,
actionData
)
{
if
(
actionData
&&
actionData
.
type
==
'
text
'
)
{
textLabel
.
text
=
actionData
.
text
;
for
(
let
i
=
0
;
i
<
actionData
.
changeOption
.
length
;
i
++
)
{
const
op
=
actionData
.
changeOption
[
i
];
textLabel
[
op
[
0
]]
=
op
[
1
];
}
}
}
private
_dafaultIndex
:
number
=
1
getDefaultItemType
()
{
if
(
this
.
customTypeGroupArr
)
{
const
group
=
this
.
customTypeGroupArr
[
this
.
_dafaultIndex
];
if
(
group
.
rect
)
{
return
'
rect
'
;
}
if
(
group
.
pic
)
{
return
'
pic
'
;
}
if
(
group
.
text
)
{
return
'
text
'
;
}
}
else
{
return
this
.
defaultItemType
;
}
}
getPicItem
(
img
,
saveData
=
null
)
{
const
item
=
new
EditorItem
(
this
.
ctx
);
item
.
load
(
img
.
pic_url
).
then
(
img
=>
{
let
maxW
,
maxH
;
if
(
this
.
bg
)
{
maxW
=
this
.
bg
.
width
*
this
.
bg
.
scaleX
;
maxH
=
this
.
bg
.
height
*
this
.
bg
.
scaleY
;
}
else
{
maxW
=
this
.
canvasWidth
;
maxH
=
this
.
canvasHeight
;
}
let
scaleX
=
maxW
/
3
/
item
.
width
;
let
scaleY
=
maxH
/
3
/
item
.
height
;
if
(
item
.
height
*
scaleX
<
this
.
canvasHeight
)
{
item
.
setScaleXY
(
scaleX
);
}
else
{
item
.
setScaleXY
(
scaleY
);
}
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
if
(
saveData
)
{
const
saveRect
=
saveData
.
rect
;
item
.
setScaleXY
(
saveRect
.
width
/
item
.
width
);
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
else
{
// item.showLineDash();
}
item
.
showLineDash
();
console
.
log
(
'
aaa
'
);
});
return
item
;
}
onAudioUploadSuccessByImg
(
e
,
img
)
{
img
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
deleteItem
(
e
,
i
)
{
// this.imgArr.splice(i , 1);
// this.refreshImageId();
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
refreshHotZoneId
();
this
.
refresh
();
}
// radioChange(e, item) {
// item.itemType = e;
// this.refreshItem(item);
// this.refresh();
// // console.log(' in radioChange e: ', e);
// }
customRadioChange
(
e
,
item
)
{
console
.
log
(
'
in customRadioChange
'
,
e
);
item
.
gIdx
=
-
1
;
setTimeout
(()
=>
{
item
.
gIdx
=
e
;
this
.
refreshCustomItem
(
item
);
this
.
refresh
();
},
1
);
// const curGroup = this.customTypeGroupArr[e];
}
refreshCustomItem
(
item
)
{
this
.
hideHotZoneItem
(
item
);
const
group
=
this
.
customTypeGroupArr
[
item
.
gIdx
];
if
(
!
group
)
{
return
;
}
if
(
group
.
text
)
{
this
.
showItemLabel
(
item
);
}
if
(
group
.
rect
)
{
this
.
showItemRect
(
item
,
true
);
}
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
.
setAnimaStyle
(
group
.
animaSmall
)
}
setItemIsAnimaStyle
(
item
,
isAnimal
)
{
}
showItemPic
(
item
)
{
item
.
pic
.
visible
=
true
;
item
.
itemType
=
'
pic
'
;
this
.
showArrowTop
(
item
)
}
showItemLabel
(
item
)
{
item
.
textLabel
.
visible
=
true
;
item
.
itemType
=
'
text
'
;
this
.
showArrowTop
(
item
)
}
showItemRect
(
item
,
isShowArrowTop
=
true
)
{
item
.
visible
=
true
;
item
.
itemType
=
'
rect
'
;
this
.
showArrowTop
(
item
,
isShowArrowTop
)
}
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
)
{
switch
(
item
.
itemType
)
{
case
'
rect
'
:
this
.
setRectState
(
item
);
break
;
case
'
pic
'
:
this
.
setPicState
(
item
);
break
;
case
'
text
'
:
this
.
setTextState
(
item
);
break
;
default
:
this
.
setNoneState
(
item
);
}
}
init
()
{
console
.
log
(
'
init
'
);
this
.
initData
();
this
.
initCtx
();
this
.
initItem
();
}
initItem
()
{
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
if
(
!
this
.
bgItem
)
{
this
.
bgItem
=
{};
}
else
{
this
.
refreshBackground
(()
=>
{
if
(
!
this
.
hotZoneItemArr
)
{
this
.
hotZoneItemArr
=
[];
}
else
{
this
.
initHotZoneArr
();
}
});
}
this
.
refresh
();
}
initHotZoneArr
()
{
// console.log('this.hotZoneArr: ', this.hotZoneArr);
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
.
hotZoneArr
=
[];
const
arr
=
this
.
hotZoneItemArr
.
concat
();
console
.
log
(
'
this.hotZoneItemArr:
'
,
this
.
hotZoneItemArr
);
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
// 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);
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
;
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
console
.
log
(
'
1 item:
'
,
item
);
this
.
hotZoneArr
.
push
(
item
);
}
this
.
refreshHotZoneId
();
// this.refreshImageId();
}
initData
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
mapScale
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
this
.
renderArr
=
[];
this
.
bg
=
null
;
this
.
imgArr
=
[];
this
.
hotZoneArr
=
[];
}
initCtx
()
{
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
}
mapDown
(
event
)
{
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
for
(
let
i
=
this
.
hotZoneArr
.
length
-
1
;
i
>=
0
;
i
--
)
{
const
item
=
this
.
hotZoneArr
[
i
];
console
.
log
(
'
mapDown item:
'
,
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
(
target
&&
this
.
checkClickTarget
(
target
))
{
callback
(
target
);
return
;
}
}
}
mapMove
(
event
)
{
if
(
!
this
.
curItem
)
{
return
;
}
if
(
this
.
changeSizeFlag
)
{
this
.
changeSize
();
}
else
if
(
this
.
changeTopSizeFlag
)
{
this
.
changeTopSize
();
}
else
if
(
this
.
changeRightSizeFlag
)
{
this
.
changeRightSize
();
}
else
{
const
addX
=
this
.
mx
-
this
.
oldPos
.
x
;
const
addY
=
this
.
my
-
this
.
oldPos
.
y
;
this
.
curItem
.
x
+=
addX
;
this
.
curItem
.
y
+=
addY
;
}
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
// this.saveDisabled = false;
}
mapUp
(
event
)
{
this
.
curItem
=
null
;
this
.
changeSizeFlag
=
false
;
this
.
changeTopSizeFlag
=
false
;
this
.
changeRightSizeFlag
=
false
;
}
changeSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
))
*
2
;
let
lenH
=
((
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
minLen
=
20
;
let
s
;
if
(
lenW
<
lenH
)
{
if
(
lenW
<
minLen
)
{
lenW
=
minLen
;
}
s
=
lenW
/
this
.
curItem
.
width
;
}
else
{
if
(
lenH
<
minLen
)
{
lenH
=
minLen
;
}
s
=
lenH
/
this
.
curItem
.
height
;
}
// console.log('s: ', s);
this
.
curItem
.
setScaleXY
(
s
);
this
.
curItem
.
refreshLabelScale
();
}
changeTopSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let
lenH
=
((
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
minLen
=
20
;
let
s
;
// if (lenW < lenH) {
// if (lenW < minLen) {
// lenW = minLen;
// }
// s = lenW / this.curItem.width;
//
// } else {
if
(
lenH
<
minLen
)
{
lenH
=
minLen
;
}
s
=
lenH
/
this
.
curItem
.
height
;
// }
// console.log('s: ', s);
this
.
curItem
.
scaleY
=
s
;
this
.
curItem
.
refreshLabelScale
();
}
changeRightSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
))
*
2
;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let
minLen
=
20
;
let
s
;
if
(
lenW
<
minLen
)
{
lenW
=
minLen
;
}
s
=
lenW
/
this
.
curItem
.
width
;
this
.
curItem
.
scaleX
=
s
;
this
.
curItem
.
refreshLabelScale
();
}
changeItemSize
(
item
)
{
this
.
curItem
=
item
;
this
.
changeSizeFlag
=
true
;
}
changeItemTopSize
(
item
)
{
this
.
curItem
=
item
;
this
.
changeTopSizeFlag
=
true
;
}
changeItemRightSize
(
item
)
{
this
.
curItem
=
item
;
this
.
changeRightSizeFlag
=
true
;
}
changeCurItem
(
item
)
{
this
.
hideAllLineDash
();
this
.
curItem
=
item
;
this
.
curItem
.
showLineDash
();
}
hideAllLineDash
()
{
for
(
let
i
=
0
;
i
<
this
.
imgArr
.
length
;
i
++
)
{
if
(
this
.
imgArr
[
i
].
picItem
)
{
this
.
imgArr
[
i
].
picItem
.
hideLineDash
();
}
}
}
update
()
{
if
(
!
this
.
ctx
)
{
return
;
}
this
.
animationId
=
window
.
requestAnimationFrame
(
this
.
update
.
bind
(
this
));
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
for
(
let
i
=
0
;
i
<
this
.
renderArr
.
length
;
i
++
)
{
this
.
renderArr
[
i
].
update
(
this
);
}
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
// if (picItem) {
// picItem.update(this);
// }
// }
this
.
updateArr
(
this
.
hotZoneArr
);
this
.
updatePos
();
TWEEN
.
update
();
}
updateArr
(
arr
)
{
if
(
arr
)
{
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
arr
[
i
].
update
();
}
}
}
renderAfterResize
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
init
();
}
initListener
()
{
this
.
winResizeEventStream
.
pipe
(
debounceTime
(
500
))
.
subscribe
(
data
=>
{
this
.
renderAfterResize
();
});
if
(
this
.
IsPC
())
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapDown
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousemove
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapMove
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapUp
(
event
);
});
const
setMxMyByMouse
=
(
event
)
=>
{
this
.
mx
=
event
.
offsetX
;
this
.
my
=
event
.
offsetY
;
};
}
else
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchstart
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapDown
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchmove
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapMove
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchend
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapUp
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchcancel
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapUp
(
event
);
});
const
setMxMyByTouch
=
(
event
)
=>
{
if
(
event
.
touches
.
length
<=
0
)
{
return
;
}
if
(
this
.
canvasLeft
==
null
)
{
setParentOffset
();
}
this
.
mx
=
event
.
touches
[
0
].
pageX
-
this
.
canvasLeft
;
this
.
my
=
event
.
touches
[
0
].
pageY
-
this
.
canvasTop
;
};
const
setParentOffset
=
()
=>
{
const
rect
=
this
.
canvas
.
nativeElement
.
getBoundingClientRect
();
this
.
canvasLeft
=
rect
.
left
;
this
.
canvasTop
=
rect
.
top
;
};
}
}
IsPC
()
{
if
(
window
[
'
ELECTRON
'
])
{
return
false
;
// 封装客户端标记
}
if
(
document
.
body
.
ontouchstart
!==
undefined
)
{
return
false
;
}
else
{
return
true
;
}
}
checkClickTarget
(
target
)
{
if
(
!
target
||
!
target
.
visible
)
{
return
;
}
const
rect
=
target
.
getBoundingBox
();
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
return
true
;
}
return
false
;
}
checkPointInRect
(
x
,
y
,
rect
)
{
if
(
x
>=
rect
.
x
&&
x
<=
rect
.
x
+
rect
.
width
)
{
if
(
y
>=
rect
.
y
&&
y
<=
rect
.
y
+
rect
.
height
)
{
return
true
;
}
}
return
false
;
}
saveClick
()
{
const
sendData
=
this
.
getSendData
();
this
.
save
.
emit
(
sendData
);
}
getSendData
()
{
const
bgItem
=
this
.
bgItem
;
if
(
this
.
bg
)
{
const
rect
=
this
.
bg
.
getBoundingBox
();
bgItem
[
'
rect
'
]
=
rect
;
rect
.
x
=
Math
.
round
(
rect
.
x
*
100
)
/
100
;
rect
.
y
=
Math
.
round
(
rect
.
y
*
100
)
/
100
;
rect
.
width
=
Math
.
round
(
rect
.
width
*
100
)
/
100
;
rect
.
height
=
Math
.
round
(
rect
.
height
*
100
)
/
100
;
}
else
{
bgItem
[
'
rect
'
]
=
{
x
:
0
,
y
:
0
,
width
:
Math
.
round
(
this
.
canvasWidth
*
100
)
/
100
,
height
:
Math
.
round
(
this
.
canvasHeight
*
100
)
/
100
};
}
const
hotZoneItemArr
=
[];
const
hotZoneArr
=
this
.
hotZoneArr
;
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
id
:
hotZoneArr
[
i
].
id
,
index
:
hotZoneArr
[
i
].
index
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
text
:
hotZoneArr
[
i
].
text
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
itemType
:
hotZoneArr
[
i
].
itemType
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
imgScale
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
scaleX
:
1
,
mapScale
:
this
.
mapScale
,
skeJsonData
:
hotZoneArr
[
i
].
skeJsonData
,
texJsonData
:
hotZoneArr
[
i
].
texJsonData
,
texPngData
:
hotZoneArr
[
i
].
texPngData
,
gIdx
:
hotZoneArr
[
i
].
gIdx
};
hotZoneItem
[
'
actionData_
'
+
hotZoneItem
.
gIdx
]
=
hotZoneArr
[
i
][
'
actionData_
'
+
hotZoneArr
[
i
].
gIdx
]
if
(
this
.
hotZoneFontObj
)
{
hotZoneItem
[
'
fontSize
'
]
=
this
.
hotZoneFontObj
.
size
;
hotZoneItem
[
'
fontName
'
]
=
this
.
hotZoneFontObj
.
name
;
hotZoneItem
[
'
ontColor
'
]
=
this
.
hotZoneFontObj
.
color
;
}
if
(
hotZoneArr
[
i
].
itemType
==
'
pic
'
)
{
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
pic
.
getBoundingBox
();
}
else
if
(
hotZoneArr
[
i
].
itemType
==
'
text
'
)
{
hotZoneArr
[
i
].
textLabel
.
refreshSize
();
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
textLabel
.
getLabelRect
();
// hotZoneItem['rect'].width = hotZoneItem['rect'].width / hotZoneArr[i].textLabel.scaleX;
// hotZoneItem['rect'].height = hotZoneArr[i].textLabel.height * hotZoneArr[i].textLabel.scaleY;
}
else
{
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
}
// hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem
[
'
rect
'
].
x
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
x
-
bgItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
y
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
height
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
height
)
*
100
)
/
100
;
hotZoneItemArr
.
push
(
hotZoneItem
);
}
console
.
log
(
'
hotZoneItemArr:
'
,
hotZoneItemArr
);
return
{
bgItem
,
hotZoneItemArr
};
}
saveText
(
item
)
{
if
(
item
.
itemType
==
'
text
'
)
{
item
.
textLabel
.
text
=
item
.
text
;
}
}
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
;
}
}
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
()
{
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
;
}
if
(
x
!=
undefined
&&
y
!=
undefined
)
{
item
.
x
=
x
;
item
.
y
=
y
;
item
.
pic
.
x
=
x
;
item
.
pic
.
y
=
y
;
item
.
textLabel
.
x
=
x
;
item
.
textLabel
.
y
=
y
;
}
});
}
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
setNoneState
(
item
:
any
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
}
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
))
{
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
;
}
}
private
clickedHotZoneText
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
this
.
curItem
=
item
;
}
}
private
loadHotZonePic
(
pic
:
HotZoneImg
,
url
,
scale
=
null
)
{
let
baseLen
;
if
(
this
.
hotZoneImgSize
)
{
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
}
pic
.
load
(
url
).
then
(()
=>
{
if
(
!
scale
)
{
if
(
baseLen
)
{
scale
=
getMinScale
(
pic
,
baseLen
);
}
else
{
scale
=
this
.
bg
.
scaleX
;
}
}
pic
.
setScaleXY
(
scale
);
});
}
closeAfterPanel
()
{
this
.
refresh
();
}
/**
* 刷新 渲染页面
*/
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
}
form/src/app/form/form.component.html
View file @
0952dbf6
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<div
style=
"padding: 10px;"
>
<!--
<div style="width: 100%; margin-top: 15px; margin-bottom: 50px;" align="center">
<div style="width: 100%; margin-top: 15px; margin-bottom: 50px;" align="center">
<h2>标题设置</h2>
<h2>标题设置</h2>
...
@@ -15,15 +16,15 @@
...
@@ -15,15 +16,15 @@
</div>
</div>
</div>
</div>
-->
<app-custom-hot-zone
<app-custom-hot-zone
-mini
[
bgItem
]="
item
.
bgItem
"
[
bgItem
]="
item
.
bgItem
"
[
hotZoneItemArr
]="
item
.
hotZoneItemArr
"
[
hotZoneItemArr
]="
item
.
hotZoneItemArr
"
[
customTypeGroupArr
]="
customTypeGroupArr
"
[
customTypeGroupArr
]="
customTypeGroupArr
"
(
save
)="
saveHotZone
(
item
,
$
event
)"
(
save
)="
saveHotZone
(
item
,
$
event
)"
>
>
</app-custom-hot-zone>
</app-custom-hot-zone
-mini
>
<!-- <div style="width: 300px;" align='center'>
<!-- <div style="width: 300px;" align='center'>
<span>图1: </span>
<span>图1: </span>
<app-upload-image-with-preview
<app-upload-image-with-preview
...
...
play/assets/scene/anim.meta
0 → 100644
View file @
0952dbf6
{
"ver": "1.1.2",
"uuid": "f10d537b-d9e1-4903-ae19-44fda7c00000",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
play/assets/scene/anim/hand.anim
0 → 100644
View file @
0952dbf6
{
"__type__": "cc.AnimationClip",
"_name": "hand",
"_objFlags": 0,
"_native": "",
"_duration": 0.7,
"sample": 30,
"speed": 1,
"wrapMode": 2,
"curveData": {
"paths": {
"icon_hand": {
"comps": {
"cc.Sprite": {
"spriteFrame": [
{
"frame": 0,
"value": {
"__uuid__": "562deefd-c9fd-42f0-97d7-d6f5893ef3f3"
}
},
{
"frame": 0.3333333333333333,
"value": {
"__uuid__": "61e47c68-658d-416b-a46e-399ebfddd2c8"
}
},
{
"frame": 0.6666666666666666,
"value": {
"__uuid__": "562deefd-c9fd-42f0-97d7-d6f5893ef3f3"
}
}
]
}
},
"props": {
"color": [
{
"frame": 0,
"value": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"curve": "constant"
},
{
"frame": 0.3333333333333333,
"value": {
"__type__": "cc.Color",
"r": 176,
"g": 176,
"b": 176,
"a": 255
},
"curve": "constant"
},
{
"frame": 0.6666666666666666,
"value": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
}
}
]
}
},
"icon_dian": {
"props": {
"scale": [
{
"frame": 0,
"value": {
"__type__": "cc.Vec2",
"x": 1,
"y": 1
},
"curve": "constant"
},
{
"frame": 0.3333333333333333,
"value": {
"__type__": "cc.Vec2",
"x": 1.3,
"y": 1.3
},
"curve": "constant"
},
{
"frame": 0.6666666666666666,
"value": {
"__type__": "cc.Vec2",
"x": 1,
"y": 1
}
}
],
"position": [
{
"frame": 0,
"value": [
-22.199,
34.822,
0
],
"curve": "constant"
}
]
}
}
}
},
"events": []
}
\ No newline at end of file
play/assets/scene/anim/hand.anim.meta
0 → 100644
View file @
0952dbf6
{
"ver": "2.1.0",
"uuid": "110d5a6d-4d4e-4a04-bed2-4bb56c56d03d",
"subMetas": {}
}
\ No newline at end of file
play/assets/scene/anim/tips.anim
0 → 100644
View file @
0952dbf6
{
"__type__": "cc.AnimationClip",
"_name": "tips",
"_objFlags": 0,
"_native": "",
"_duration": 0.5,
"sample": 40,
"speed": 1,
"wrapMode": 2,
"curveData": {
"props": {
"opacity": [
{
"frame": 0,
"value": 255,
"curve": "constant"
},
{
"frame": 0.25,
"value": 0,
"curve": "constant"
},
{
"frame": 0.5,
"value": 255
}
]
}
},
"events": []
}
\ No newline at end of file
play/assets/scene/anim/tips.anim.meta
0 → 100644
View file @
0952dbf6
{
"ver": "2.1.0",
"uuid": "a13d6552-0ece-42e3-813a-2029ad0cab0c",
"subMetas": {}
}
\ No newline at end of file
play/assets/scene/audios/
btn
.mp3
→
play/assets/scene/audios/
按钮
.mp3
View file @
0952dbf6
File moved
play/assets/scene/audios/
btn
.mp3.meta
→
play/assets/scene/audios/
按钮
.mp3.meta
View file @
0952dbf6
{
{
"ver": "2.0.1",
"ver": "2.0.1",
"uuid": "
f0680ae0-c079-45ef-abd7-9e63d90b982b
",
"uuid": "
39ef1939-3bf9-4d21-a67a-bc1dede521a9
",
"downloadMode": 0,
"downloadMode": 0,
"duration": 0.130612,
"duration": 0.130612,
"subMetas": {}
"subMetas": {}
...
...
play/assets/scene/audios/提示.mp3
0 → 100644
View file @
0952dbf6
File added
play/assets/scene/audios/提示.mp3.meta
0 → 100644
View file @
0952dbf6
{
"ver": "2.0.1",
"uuid": "e0bcf4cc-35a7-4d61-b202-8dd49299c2c0",
"downloadMode": 0,
"duration": 1.7487,
"subMetas": {}
}
\ No newline at end of file
play/assets/scene/prefab.meta
0 → 100644
View file @
0952dbf6
{
"ver": "1.1.2",
"uuid": "be0db2d0-24f0-4d3d-b613-ad695edaac17",
"isBundle": false,
"bundleName": "",
"priority": 1,
"compressionType": {},
"optimizeHotUpdate": {},
"inlineSpriteFrames": {},
"isRemoteBundle": {},
"subMetas": {}
}
\ No newline at end of file
play/assets/scene/prefab/hitItem.prefab
0 → 100644
View file @
0952dbf6
[
{
"__type__": "cc.Prefab",
"_name": "",
"_objFlags": 0,
"_native": "",
"data": {
"__id__": 1
},
"optimizationPolicy": 0,
"asyncLoadAssets": false,
"readonly": false
},
{
"__type__": "cc.Node",
"_name": "hitItem",
"_objFlags": 0,
"_parent": null,
"_children": [
{
"__id__": 2
},
{
"__id__": 5
},
{
"__id__": 14
}
],
"_active": true,
"_components": [
{
"__id__": 18
}
],
"_prefab": {
"__id__": 19
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-472.957,
-125.868,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": "sprite",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 3
}
],
"_prefab": {
"__id__": 4
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 351,
"height": 93
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "c260e7d3-9aa7-46ca-99f5-7ca5f31f7fef"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "b9fWLpmVVF2qpZu9r009Ps",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "hand",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [
{
"__id__": 6
},
{
"__id__": 9
}
],
"_active": true,
"_components": [
{
"__id__": 12
}
],
"_prefab": {
"__id__": 13
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 78,
"height": 78
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
154.958,
-68.338,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Node",
"_name": "icon_dian",
"_objFlags": 0,
"_parent": {
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 7
}
],
"_prefab": {
"__id__": 8
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 49,
"height": 49
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-22.199,
34,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 6
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "5daba96f-eff5-4bee-9ba9-d67c0134212a"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "85Cu0e6IdO7rehoMCnMUPa",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "icon_hand",
"_objFlags": 0,
"_parent": {
"__id__": 5
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 10
}
],
"_prefab": {
"__id__": 11
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 69,
"height": 78
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 9
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "562deefd-c9fd-42f0-97d7-d6f5893ef3f3"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "b6EBayLo9DCrkpa2CYD+lG",
"sync": false
},
{
"__type__": "cc.Animation",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_defaultClip": {
"__uuid__": "110d5a6d-4d4e-4a04-bed2-4bb56c56d03d"
},
"_clips": [
{
"__uuid__": "110d5a6d-4d4e-4a04-bed2-4bb56c56d03d"
}
],
"playOnLoad": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "9aI5le42RBv5GR0xkx1QW1",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "icon_tips",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 15
},
{
"__id__": 16
}
],
"_prefab": {
"__id__": 17
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 46,
"height": 67
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
197.886,
50.905,
0,
0,
0,
0,
1,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "b41667f5-0e09-49f6-b7e8-19b88dc8ea8b"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.Animation",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
},
"_enabled": true,
"_defaultClip": {
"__uuid__": "a13d6552-0ece-42e3-813a-2029ad0cab0c"
},
"_clips": [
{
"__uuid__": "a13d6552-0ece-42e3-813a-2029ad0cab0c"
}
],
"playOnLoad": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "b5M1Vy7ipFF48OYApT5qKk",
"sync": false
},
{
"__type__": "57f79KAb0tNU7HjHMpUOk2e",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"tipsAnim": {
"__id__": 16
},
"handAnim": {
"__id__": 12
},
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "2ce7d58d-b6fe-4ef7-a128-de76f672a803"
},
"fileId": "",
"sync": false
}
]
\ No newline at end of file
play/assets/scene/prefab/hitItem.prefab.meta
0 → 100644
View file @
0952dbf6
{
"ver": "1.2.9",
"uuid": "2ce7d58d-b6fe-4ef7-a128-de76f672a803",
"optimizationPolicy": "AUTO",
"asyncLoadAssets": false,
"readonly": false,
"subMetas": {}
}
\ No newline at end of file
play/assets/scene/scene/picNode.js
0 → 100644
View file @
0952dbf6
cc
.
Class
({
extends
:
cc
.
Component
,
properties
:
{
tipsAnim
:
cc
.
Animation
,
handAnim
:
cc
.
Animation
,
},
data
:
null
,
onLoad
()
{
this
.
tipsAnim
.
node
.
active
=
false
this
.
handAnim
.
node
.
active
=
false
},
onEnable
()
{
this
.
node
.
on
(
cc
.
Node
.
EventType
.
TOUCH_START
,
this
.
onTouchStart
,
this
)
},
onDisable
()
{
this
.
node
.
off
(
cc
.
Node
.
EventType
.
TOUCH_START
,
this
.
onTouchStart
,
this
)
},
initWithData
(
data
)
{
this
.
data
=
data
let
rect
=
this
.
data
.
rect
this
.
node
.
x
=
rect
.
x
this
.
node
.
y
=
rect
.
y
this
.
node
.
width
=
rect
.
width
this
.
node
.
height
=
rect
.
height
if
(
this
.
data
.
useHand
)
{
this
.
handAnim
.
node
.
active
=
false
this
.
handAnim
.
play
()
}
},
onTouchStart
()
{
if
(
this
.
data
)
{
let
url
=
this
.
data
.
audio_url
if
(
url
&&
url
!=
''
)
{
this
.
playAudio
(
url
)
}
}
},
/** 播放音乐 */
playAudio
(
url
)
{
cc
.
assetManager
.
loadRemote
(
url
,
(
err
,
audioClip
)
=>
{
if
(
err
)
return
this
.
audioId
=
cc
.
audioEngine
.
play
(
audioClip
,
false
,
0.8
);
cc
.
audioEngine
.
setFinishCallback
(
this
.
audioId
,
()
=>
{
this
.
audioId
=
null
});
});
},
stopAudio
()
{
if
(
this
.
audioId
!=
null
)
{
cc
.
audioEngine
.
stop
(
this
.
audioId
)
this
.
audioId
=
null
}
},
/** 音频id */
audioId
:
null
,
});
play/assets/scene/scene/
test.t
s.meta
→
play/assets/scene/scene/
picNode.j
s.meta
View file @
0952dbf6
{
{
"ver": "1.0.8",
"ver": "1.0.8",
"uuid": "
1b435fe6-616a-4026-8037-ebce861f53e5
",
"uuid": "
57f79280-6f4b-4d53-b1e3-1cca543a4d9e
",
"isPlugin": false,
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInNative": true,
...
...
play/assets/scene/scene/scene.fire
View file @
0952dbf6
...
@@ -75,22 +75,25 @@
...
@@ -75,22 +75,25 @@
"__id__": 5
"__id__": 5
},
},
{
{
"__id__":
7
"__id__":
8
},
},
{
{
"__id__": 14
"__id__": 21
},
{
"__id__": 37
}
}
],
],
"_active": true,
"_active": true,
"_components": [
"_components": [
{
{
"__id__":
24
"__id__":
41
},
},
{
{
"__id__":
25
"__id__":
42
},
},
{
{
"__id__":
26
"__id__":
43
}
}
],
],
"_prefab": null,
"_prefab": null,
...
@@ -251,15 +254,18 @@
...
@@ -251,15 +254,18 @@
"_components": [
"_components": [
{
{
"__id__": 6
"__id__": 6
},
{
"__id__": 7
}
}
],
],
"_prefab": null,
"_prefab": null,
"_opacity": 255,
"_opacity": 255,
"_color": {
"_color": {
"__type__": "cc.Color",
"__type__": "cc.Color",
"r": 2
55
,
"r": 2
29
,
"g": 2
55
,
"g": 2
43
,
"b": 25
5
,
"b": 25
0
,
"a": 255
"a": 255
},
},
"_contentSize": {
"_contentSize": {
...
@@ -299,7 +305,7 @@
...
@@ -299,7 +305,7 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "
32MJMZ2HRGF4BOf533Avyi
"
"_id": "
aeaOM8xiFHsZWw7c1ruylq
"
},
},
{
{
"__type__": "cc.Sprite",
"__type__": "cc.Sprite",
...
@@ -314,13 +320,13 @@
...
@@ -314,13 +320,13 @@
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
}
],
],
"_srcBlendFactor":
770
,
"_srcBlendFactor":
1
,
"_dstBlendFactor": 771,
"_dstBlendFactor": 771,
"_spriteFrame": {
"_spriteFrame": {
"__uuid__": "
8288e3d4-4c75-4b27-8f01-f7014417f4dd
"
"__uuid__": "
c31f81f3-83db-4b46-a5c3-a33572c12e7f
"
},
},
"_type": 0,
"_type": 0,
"_sizeMode":
1
,
"_sizeMode":
0
,
"_fillType": 0,
"_fillType": 0,
"_fillCenter": {
"_fillCenter": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -331,7 +337,34 @@
...
@@ -331,7 +337,34 @@
"_fillRange": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_isTrimmedMode": true,
"_atlas": null,
"_atlas": null,
"_id": "97/S6HDq9MeqgmV1Zwnhbb"
"_id": "eaS1JEsKZJk5kn9K13PwO5"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 100,
"_originalHeight": 100,
"_id": "e9wM7H6ndJabDtH2T6E5Sw"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
...
@@ -342,14 +375,24 @@
...
@@ -342,14 +375,24 @@
},
},
"_children": [
"_children": [
{
{
"__id__":
8
"__id__":
9
},
},
{
{
"__id__": 11
"__id__": 11
},
{
"__id__": 15
}
}
],
],
"_active": true,
"_active": true,
"_components": [],
"_components": [
{
"__id__": 19
},
{
"__id__": 20
}
],
"_prefab": null,
"_prefab": null,
"_opacity": 255,
"_opacity": 255,
"_color": {
"_color": {
...
@@ -361,8 +404,8 @@
...
@@ -361,8 +404,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width":
0
,
"width":
351
,
"height":
0
"height":
91
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -373,8 +416,8 @@
...
@@ -373,8 +416,8 @@
"__type__": "TypedArray",
"__type__": "TypedArray",
"ctor": "Float64Array",
"ctor": "Float64Array",
"array": [
"array": [
635.132
,
464.5
,
-3
56.326
,
-3
14.5
,
0,
0,
0,
0,
0,
0,
...
@@ -400,17 +443,14 @@
...
@@ -400,17 +443,14 @@
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "b
tn_left
",
"_name": "b
g_bottom
",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
7
"__id__":
8
},
},
"_children": [],
"_children": [],
"_active": true,
"_active": true,
"_components": [
"_components": [
{
"__id__": 9
},
{
{
"__id__": 10
"__id__": 10
}
}
...
@@ -426,8 +466,8 @@
...
@@ -426,8 +466,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width":
6
1,
"width":
35
1,
"height":
67
"height":
93
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -438,8 +478,8 @@
...
@@ -438,8 +478,8 @@
"__type__": "TypedArray",
"__type__": "TypedArray",
"ctor": "Float64Array",
"ctor": "Float64Array",
"array": [
"array": [
-148.464
,
0
,
34
,
0
,
0,
0,
0,
0,
0,
0,
...
@@ -461,14 +501,14 @@
...
@@ -461,14 +501,14 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "
5ad2wLQLxIN5Eg7OHecSH6
"
"_id": "
70X2WruCtItoUrT7FmCz3I
"
},
},
{
{
"__type__": "cc.Sprite",
"__type__": "cc.Sprite",
"_name": "",
"_name": "",
"_objFlags": 0,
"_objFlags": 0,
"node": {
"node": {
"__id__":
8
"__id__":
9
},
},
"_enabled": true,
"_enabled": true,
"_materials": [
"_materials": [
...
@@ -479,7 +519,7 @@
...
@@ -479,7 +519,7 @@
"_srcBlendFactor": 770,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_dstBlendFactor": 771,
"_spriteFrame": {
"_spriteFrame": {
"__uuid__": "c
e19457d-e8f3-4c38-ae3e-d4b99208ddb5
"
"__uuid__": "c
260e7d3-9aa7-46ca-99f5-7ca5f31f7fef
"
},
},
"_type": 0,
"_type": 0,
"_sizeMode": 1,
"_sizeMode": 1,
...
@@ -493,25 +533,94 @@
...
@@ -493,25 +533,94 @@
"_fillRange": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_isTrimmedMode": true,
"_atlas": null,
"_atlas": null,
"_id": "84mqOgJ3JNqZrYVTEU8CjE"
"_id": "c7OVcCQjtDmrknFQVhXiA3"
},
{
"__type__": "cc.Node",
"_name": "btn_left",
"_objFlags": 0,
"_parent": {
"__id__": 8
},
"_children": [],
"_active": true,
"_components": [
{
"__id__": 12
},
{
"__id__": 14
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 64,
"height": 68
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
-16.572,
3.038,
0,
0,
0,
0,
1,
1,
1,
0
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 0
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "5ad2wLQLxIN5Eg7OHecSH6"
},
},
{
{
"__type__": "cc.Button",
"__type__": "cc.Button",
"_name": "",
"_name": "",
"_objFlags": 0,
"_objFlags": 0,
"node": {
"node": {
"__id__":
8
"__id__":
11
},
},
"_enabled": true,
"_enabled": true,
"_normalMaterial": null,
"_normalMaterial": null,
"_grayMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"duration": 0.1,
"zoomScale": 1.2,
"zoomScale": 1.1,
"clickEvents": [],
"clickEvents": [
{
"__id__": 13
}
],
"_N$interactable": true,
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$enableAutoGrayEffect": false,
"_N$transition":
0
,
"_N$transition":
3
,
"transition":
0
,
"transition":
3
,
"_N$normalColor": {
"_N$normalColor": {
"__type__": "cc.Color",
"__type__": "cc.Color",
"r": 255,
"r": 255,
...
@@ -563,21 +672,63 @@
...
@@ -563,21 +672,63 @@
"_N$target": null,
"_N$target": null,
"_id": "bcYN/4EKBJhbIAfovo9Ah1"
"_id": "bcYN/4EKBJhbIAfovo9Ah1"
},
},
{
"__type__": "cc.ClickEvent",
"target": {
"__id__": 2
},
"component": "",
"_componentId": "f4edeRi+NdAabqAkVYRwFjK",
"handler": "onClickLeft",
"customEventData": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "481337f5-a635-4237-8a67-7a37fd59f119"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "93zcHsRZhA7783yB/mBlqo"
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "btn_right",
"_name": "btn_right",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
7
"__id__":
8
},
},
"_children": [],
"_children": [],
"_active": true,
"_active": true,
"_components": [
"_components": [
{
{
"__id__": 1
2
"__id__": 1
6
},
},
{
{
"__id__": 1
3
"__id__": 1
8
}
}
],
],
"_prefab": null,
"_prefab": null,
...
@@ -591,8 +742,8 @@
...
@@ -591,8 +742,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width": 6
0
,
"width": 6
4
,
"height": 6
6
"height": 6
8
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -603,8 +754,8 @@
...
@@ -603,8 +754,8 @@
"__type__": "TypedArray",
"__type__": "TypedArray",
"ctor": "Float64Array",
"ctor": "Float64Array",
"array": [
"array": [
-47.164
,
97.71
,
3
4
,
3
.038
,
0,
0,
0,
0,
0,
0,
...
@@ -612,7 +763,7 @@
...
@@ -612,7 +763,7 @@
1,
1,
1,
1,
1,
1,
1
0
]
]
},
},
"_eulerAngles": {
"_eulerAngles": {
...
@@ -628,55 +779,27 @@
...
@@ -628,55 +779,27 @@
"groupIndex": 0,
"groupIndex": 0,
"_id": "46i3stdzpHX6zQHTGnRsNE"
"_id": "46i3stdzpHX6zQHTGnRsNE"
},
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "e5a2dbaa-a677-4a32-90d7-a1b057d7fb59"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "42Sh8QS/BHn4WiGyPQPKPt"
},
{
{
"__type__": "cc.Button",
"__type__": "cc.Button",
"_name": "",
"_name": "",
"_objFlags": 0,
"_objFlags": 0,
"node": {
"node": {
"__id__": 1
1
"__id__": 1
5
},
},
"_enabled": true,
"_enabled": true,
"_normalMaterial": null,
"_normalMaterial": null,
"_grayMaterial": null,
"_grayMaterial": null,
"duration": 0.1,
"duration": 0.1,
"zoomScale": 1.2,
"zoomScale": 1.1,
"clickEvents": [],
"clickEvents": [
{
"__id__": 17
}
],
"_N$interactable": true,
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$enableAutoGrayEffect": false,
"_N$transition":
0
,
"_N$transition":
3
,
"transition":
0
,
"transition":
3
,
"_N$normalColor": {
"_N$normalColor": {
"__type__": "cc.Color",
"__type__": "cc.Color",
"r": 255,
"r": 255,
...
@@ -729,44 +852,134 @@
...
@@ -729,44 +852,134 @@
"_id": "1aj32fYY1IxLesa77E70Qu"
"_id": "1aj32fYY1IxLesa77E70Qu"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.ClickEvent",
"_name": "res",
"target": {
"_objFlags": 0,
"_parent": {
"__id__": 2
"__id__": 2
},
},
"_children": [
"component": "",
{
"_componentId": "f4edeRi+NdAabqAkVYRwFjK",
"__id__": 15
"handler": "onClickRight",
},
"customEventData": ""
{
},
"__id__": 18
{
},
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"_materials": [
{
{
"__
id__": 21
"__
uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
}
],
],
"_active": false,
"_srcBlendFactor": 770,
"_components": [],
"_dstBlendFactor": 771,
"_prefab": null,
"_spriteFrame": {
"_opacity": 255,
"__uuid__": "7546a333-1d8b-4c3a-a699-b24633d987d3"
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 0,
"height": 0
},
},
"_anchorPoint": {
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
"x": 0.5,
"x": 0,
"y": 0.5
"y": 0
},
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "d4dDRX1SZIy517c6gzyxSO"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 36,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "14yYhIw95BeZx56bjhZzfB"
},
{
"__type__": "cc.Animation",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_defaultClip": null,
"_clips": [
null
],
"playOnLoad": false,
"_id": "35I3F/iNRHf7w06yWJoxEu"
},
{
"__type__": "cc.Node",
"_name": "pic",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [
{
"__id__": 22
},
{
"__id__": 25
},
{
"__id__": 28
},
{
"__id__": 31
},
{
"__id__": 34
}
],
"_active": true,
"_components": [],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 1280,
"height": 720
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"_trs": {
"__type__": "TypedArray",
"__type__": "TypedArray",
"ctor": "Float64Array",
"ctor": "Float64Array",
...
@@ -780,7 +993,7 @@
...
@@ -780,7 +993,7 @@
1,
1,
1,
1,
1,
1,
1
0
]
]
},
},
"_eulerAngles": {
"_eulerAngles": {
...
@@ -794,22 +1007,25 @@
...
@@ -794,22 +1007,25 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "
0aAzbH6R1E+6AmGRrkKa5O
"
"_id": "
acFf5706VEr43k/0GoDH2k
"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "
font
",
"_name": "
icon
",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
14
"__id__":
21
},
},
"_children": [
"_children": [],
"_active": true,
"_components": [
{
{
"__id__": 16
"__id__": 23
},
{
"__id__": 24
}
}
],
],
"_active": true,
"_components": [],
"_prefab": null,
"_prefab": null,
"_opacity": 255,
"_opacity": 255,
"_color": {
"_color": {
...
@@ -821,8 +1037,8 @@
...
@@ -821,8 +1037,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width": 0,
"width":
128
0,
"height": 0
"height":
72
0
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -856,20 +1072,80 @@
...
@@ -856,20 +1072,80 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "9bLfcYeeNKrr524vzWchiM"
"_id": "e5gAWSYXpPDJKuNiEvXpPT"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 22
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 1,
"_dstBlendFactor": 771,
"_spriteFrame": null,
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "0eTbXG/oZHmaY6kD6zm9pf"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 22
},
"_enabled": true,
"alignMode": 2,
"_target": null,
"_alignFlags": 45,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 636,
"_originalHeight": 396,
"_id": "4dr1MJnPlIVJruDphUKxu4"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "
BRLNSDB
",
"_name": "
bg_move
",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
15
"__id__":
21
},
},
"_children": [],
"_children": [],
"_active":
tru
e,
"_active":
fals
e,
"_components": [
"_components": [
{
{
"__id__": 17
"__id__": 26
},
{
"__id__": 27
}
}
],
],
"_prefab": null,
"_prefab": null,
...
@@ -883,8 +1159,8 @@
...
@@ -883,8 +1159,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width":
0
,
"width":
14
,
"height": 0
"height":
72
0
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -895,7 +1171,7 @@
...
@@ -895,7 +1171,7 @@
"__type__": "TypedArray",
"__type__": "TypedArray",
"ctor": "Float64Array",
"ctor": "Float64Array",
"array": [
"array": [
0
,
-633
,
0,
0,
0,
0,
0,
0,
...
@@ -918,54 +1194,84 @@
...
@@ -918,54 +1194,84 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "
cfMLGsq0BMhJARv+ySMAxS
"
"_id": "
b1AJm2yKhN/acMtHJgQehF
"
},
},
{
{
"__type__": "cc.
Label
",
"__type__": "cc.
Sprite
",
"_name": "",
"_name": "",
"_objFlags": 0,
"_objFlags": 0,
"node": {
"node": {
"__id__":
16
"__id__":
25
},
},
"_enabled": true,
"_enabled": true,
"_materials": [],
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_dstBlendFactor": 771,
"_useOriginalSize": true,
"_spriteFrame": {
"_string": "",
"__uuid__": "65989243-03ad-4572-894a-c1d4712ce82c"
"_N$string": "",
},
"_fontSize": 40,
"_type": 0,
"_lineHeight": 40,
"_sizeMode": 1,
"_enableWrapText": true,
"_fillType": 0,
"_N$file": {
"_fillCenter": {
"__uuid__": "c551970e-b095-45f3-9f1d-25cde8b8deb1"
"__type__": "cc.Vec2",
},
"x": 0,
"_isSystemFontUsed": false,
"y": 0
"_spacingX": 0,
},
"_batchAsBitmap": false,
"_fillStart": 0,
"_styleFlags": 0,
"_fillRange": 0,
"_underlineHeight": 0,
"_isTrimmedMode": true,
"_N$horizontalAlign": 0,
"_atlas": null,
"_N$verticalAlign": 0,
"_id": "5fTjKmnRVNWbSuQoPv3XkW"
"_N$fontFamily": "Arial",
},
"_N$overflow": 0,
{
"_N$cacheMode": 0,
"__type__": "cc.Widget",
"_id": "9bNHNPu5lC7rQYyr8ai/sY"
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 25
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 8,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "a8Ih7yZaRBdZUYRQo7VeiV"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "
img
",
"_name": "
bg_move
",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
14
"__id__":
21
},
},
"_children": [
"_children": [],
"_active": false,
"_components": [
{
{
"__id__": 19
"__id__": 29
},
{
"__id__": 30
}
}
],
],
"_active": true,
"_components": [],
"_prefab": null,
"_prefab": null,
"_opacity": 255,
"_opacity": 255,
"_color": {
"_color": {
...
@@ -977,8 +1283,8 @@
...
@@ -977,8 +1283,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width":
0
,
"width":
14
,
"height": 0
"height":
72
0
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -989,7 +1295,7 @@
...
@@ -989,7 +1295,7 @@
"__type__": "TypedArray",
"__type__": "TypedArray",
"ctor": "Float64Array",
"ctor": "Float64Array",
"array": [
"array": [
0
,
633
,
0,
0,
0,
0,
0,
0,
...
@@ -1012,20 +1318,82 @@
...
@@ -1012,20 +1318,82 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "53LUHHG2pEr79fyrvazXJs"
"_id": "b7MYFimtJFk7j7n2He4McM"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 28
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "65989243-03ad-4572-894a-c1d4712ce82c"
},
"_type": 0,
"_sizeMode": 1,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "f3HU4Zr+JKrYkZypEh60Di"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 28
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 32,
"_left": 0,
"_right": 0,
"_top": 0,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 0,
"_originalHeight": 0,
"_id": "64EsoeEF5BsYPgaBKs5n9+"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "
icon
",
"_name": "
bg_move
",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
18
"__id__":
21
},
},
"_children": [],
"_children": [],
"_active":
tru
e,
"_active":
fals
e,
"_components": [
"_components": [
{
{
"__id__": 20
"__id__": 32
},
{
"__id__": 33
}
}
],
],
"_prefab": null,
"_prefab": null,
...
@@ -1039,8 +1407,8 @@
...
@@ -1039,8 +1407,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width": 1
38
,
"width": 1
4
,
"height": 1
41
"height": 1
280
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -1052,12 +1420,136 @@
...
@@ -1052,12 +1420,136 @@
"ctor": "Float64Array",
"ctor": "Float64Array",
"array": [
"array": [
0,
0,
368.418,
0,
0,
0,
0,
0,
0,
0.7071067811865475,
0.7071067811865476,
1,
1,
1
]
},
"_eulerAngles": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"z": 90
},
"_skewX": 0,
"_skewY": 0,
"_is3DNode": false,
"_groupIndex": 0,
"groupIndex": 0,
"_id": "dc73Fb5SlD7J/vFGJ1/xcP"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 31
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 41,
"_left": 633,
"_right": 633,
"_top": -648.418,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 14,
"_originalHeight": 0,
"_id": "60dJ16FZlGEYegzpqEv8gI"
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 31
},
"_enabled": true,
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "65989243-03ad-4572-894a-c1d4712ce82c"
},
"_type": 2,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_atlas": null,
"_id": "fdbhfWO25KXaUT3pi6g/DW"
},
{
"__type__": "cc.Node",
"_name": "bg_move",
"_objFlags": 0,
"_parent": {
"__id__": 21
},
"_children": [],
"_active": false,
"_components": [
{
"__id__": 35
},
{
"__id__": 36
}
],
"_prefab": null,
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 14,
"height": 1280
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_trs": {
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
0,
-369.556,
0,
0,
1,
0,
0,
0.7071067811865475,
0.7071067811865476,
1,
1,
1,
1,
1
1
...
@@ -1067,31 +1559,62 @@
...
@@ -1067,31 +1559,62 @@
"__type__": "cc.Vec3",
"__type__": "cc.Vec3",
"x": 0,
"x": 0,
"y": 0,
"y": 0,
"z": 0
"z":
9
0
},
},
"_skewX": 0,
"_skewX": 0,
"_skewY": 0,
"_skewY": 0,
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "1blU2OArJIfoC9XfupGxJG"
"_id": "90trfmqXlIi62ExYNzN4I5"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 34
},
"_enabled": true,
"alignMode": 1,
"_target": null,
"_alignFlags": 41,
"_left": 633,
"_right": 633,
"_top": 89.55599999999998,
"_bottom": 0,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 14,
"_originalHeight": 0,
"_id": "5cVY3BafxL3pwuCJufNQJg"
},
},
{
{
"__type__": "cc.Sprite",
"__type__": "cc.Sprite",
"_name": "",
"_name": "",
"_objFlags": 0,
"_objFlags": 0,
"node": {
"node": {
"__id__":
19
"__id__":
34
},
},
"_enabled": true,
"_enabled": true,
"_materials": [],
"_materials": [
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 770,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_dstBlendFactor": 771,
"_spriteFrame": {
"_spriteFrame": {
"__uuid__": "6
fbc30a8-3c49-44ae-8ba4-7f56f385b78a
"
"__uuid__": "6
5989243-03ad-4572-894a-c1d4712ce82c
"
},
},
"_type":
0
,
"_type":
2
,
"_sizeMode":
1
,
"_sizeMode":
0
,
"_fillType": 0,
"_fillType": 0,
"_fillCenter": {
"_fillCenter": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -1102,18 +1625,18 @@
...
@@ -1102,18 +1625,18 @@
"_fillRange": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_isTrimmedMode": true,
"_atlas": null,
"_atlas": null,
"_id": "
03GEWUEZJGyKormWgIWCtM
"
"_id": "
4c/3rfzz1AkLG+k9qBfc0h
"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "
audio
",
"_name": "
pic_temp
",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
14
"__id__":
2
},
},
"_children": [
"_children": [
{
{
"__id__":
22
"__id__":
38
}
}
],
],
"_active": true,
"_active": true,
...
@@ -1129,8 +1652,8 @@
...
@@ -1129,8 +1652,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width": 0,
"width":
65
0,
"height": 0
"height":
41
0
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -1141,7 +1664,7 @@
...
@@ -1141,7 +1664,7 @@
"__type__": "TypedArray",
"__type__": "TypedArray",
"ctor": "Float64Array",
"ctor": "Float64Array",
"array": [
"array": [
0
,
-1274
,
0,
0,
0,
0,
0,
0,
...
@@ -1150,7 +1673,7 @@
...
@@ -1150,7 +1673,7 @@
1,
1,
1,
1,
1,
1,
1
0
]
]
},
},
"_eulerAngles": {
"_eulerAngles": {
...
@@ -1164,20 +1687,23 @@
...
@@ -1164,20 +1687,23 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "
b823DIVC9L+Ihc3T9Bt7m3
"
"_id": "
f5uVe6L1lNmYEspgnFI0dX
"
},
},
{
{
"__type__": "cc.Node",
"__type__": "cc.Node",
"_name": "
bt
n",
"_name": "
ico
n",
"_objFlags": 0,
"_objFlags": 0,
"_parent": {
"_parent": {
"__id__":
21
"__id__":
37
},
},
"_children": [],
"_children": [],
"_active": true,
"_active": true,
"_components": [
"_components": [
{
{
"__id__": 23
"__id__": 39
},
{
"__id__": 40
}
}
],
],
"_prefab": null,
"_prefab": null,
...
@@ -1191,8 +1717,8 @@
...
@@ -1191,8 +1717,8 @@
},
},
"_contentSize": {
"_contentSize": {
"__type__": "cc.Size",
"__type__": "cc.Size",
"width":
0
,
"width":
636
,
"height":
0
"height":
396
},
},
"_anchorPoint": {
"_anchorPoint": {
"__type__": "cc.Vec2",
"__type__": "cc.Vec2",
...
@@ -1212,7 +1738,7 @@
...
@@ -1212,7 +1738,7 @@
1,
1,
1,
1,
1,
1,
1
0
]
]
},
},
"_eulerAngles": {
"_eulerAngles": {
...
@@ -1226,25 +1752,64 @@
...
@@ -1226,25 +1752,64 @@
"_is3DNode": false,
"_is3DNode": false,
"_groupIndex": 0,
"_groupIndex": 0,
"groupIndex": 0,
"groupIndex": 0,
"_id": "
3d0p0/uJZJIoRva5Br2iqv
"
"_id": "
e759xQxcRBDZCN5l4fsqO0
"
},
},
{
{
"__type__": "cc.
AudioSourc
e",
"__type__": "cc.
Sprit
e",
"_name": "",
"_name": "",
"_objFlags": 0,
"_objFlags": 0,
"node": {
"node": {
"__id__":
22
"__id__":
38
},
},
"_enabled": true,
"_enabled": true,
"_clip": {
"_materials": [
"__uuid__": "f0680ae0-c079-45ef-abd7-9e63d90b982b"
{
"__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
}
],
"_srcBlendFactor": 1,
"_dstBlendFactor": 771,
"_spriteFrame": null,
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
},
"_volume": 1,
"_fillStart": 0,
"_mute": false,
"_fillRange": 0,
"_loop": false,
"_isTrimmedMode": true,
"playOnLoad": false,
"_atlas": null,
"preload": false,
"_id": "0eSa63fVNKKLV/1Jn+eg8n"
"_id": "0adN50f61DlbmppsPkOnjX"
},
{
"__type__": "cc.Widget",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 38
},
"_enabled": true,
"alignMode": 2,
"_target": null,
"_alignFlags": 45,
"_left": 7,
"_right": 7,
"_top": 7,
"_bottom": 7,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
"_isAbsBottom": true,
"_isAbsHorizontalCenter": true,
"_isAbsVerticalCenter": true,
"_originalWidth": 650,
"_originalHeight": 410,
"_id": "fbCrzYGGRFTKesyrZuyvHE"
},
},
{
{
"__type__": "cc.Canvas",
"__type__": "cc.Canvas",
...
@@ -1291,13 +1856,31 @@
...
@@ -1291,13 +1856,31 @@
"_id": "29zXboiXFBKoIV4PQ2liTe"
"_id": "29zXboiXFBKoIV4PQ2liTe"
},
},
{
{
"__type__": "
f4edeRi+NdAabqAkVYRwFjK
",
"__type__": "
c238bwNxXtAHqIXQECY4nQz
",
"_name": "",
"_name": "",
"_objFlags": 0,
"_objFlags": 0,
"node": {
"node": {
"__id__": 2
"__id__": 2
},
},
"_enabled": true,
"_enabled": true,
"_id": "e687yyoRBIzZAOVRL8Sseh"
"picNode": {
"__id__": 21
},
"picTempNode": {
"__id__": 37
},
"leftNode": {
"__id__": 11
},
"rightNode": {
"__id__": 15
},
"btnClip": {
"__uuid__": "39ef1939-3bf9-4d21-a67a-bc1dede521a9"
},
"tipClip": {
"__uuid__": "e0bcf4cc-35a7-4d61-b202-8dd49299c2c0"
},
"_id": "a1ibU1vO9Nwbfwjsm/NgGR"
}
}
]
]
\ No newline at end of file
play/assets/scene/sc
ene/tes
t.ts
→
play/assets/scene/sc
ript/NewScrip
t.ts
View file @
0952dbf6
...
@@ -9,7 +9,34 @@ const { ccclass, property } = cc._decorator;
...
@@ -9,7 +9,34 @@ const { ccclass, property } = cc._decorator;
@
ccclass
@
ccclass
export
default
class
NewClass
extends
cc
.
Component
{
export
default
class
NewClass
extends
cc
.
Component
{
onLoad
()
{
console
.
log
(
'
测试ts脚本能否正常使用
'
)
@
property
(
cc
.
Label
)
label
:
cc
.
Label
=
null
;
@
property
text
:
string
=
'
hello
'
;
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start
()
{
cc
.
color
()
this
.
node
.
off
(
cc
.
Node
.
EventType
.
MOUSE_DOWN
)
}
}
// update (dt) {}
onEnable
()
{
let
one
=
new
cc
.
Animation
()
one
.
currentClip
.
speed
one
.
play
().
wrapMode
one
.
defaultClip
.
wrapMode
=
cc
.
WrapMode
.
Reverse
cc
.
Node
.
EventType
.
MOUSE_LEAVE
cc
.
tween
(
this
.
node
).
to
(
1
,{
opacity
:
1
}).
to
cc
.
assetManager
.
loadRemote
this
.
node
.
}
}
}
play/assets/scene/script/
util.j
s.meta
→
play/assets/scene/script/
NewScript.t
s.meta
View file @
0952dbf6
{
{
"ver": "1.0.8",
"ver": "1.0.8",
"uuid": "
ade7af40-d56d-4087-bbc6-2888fef55353
",
"uuid": "
81db3e2c-d815-4891-a77d-5651d54dc92d
",
"isPlugin": false,
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInNative": true,
...
...
play/assets/scene/sc
ene
/scene.js
→
play/assets/scene/sc
ript
/scene.js
View file @
0952dbf6
import
{
onHomeworkFinish
}
from
"
../script/util
"
;
import
{
tools
}
from
"
./tools
"
;
import
{
defaultData
}
from
"
../script/defaultData
"
;
cc
.
Class
({
cc
.
Class
({
extends
:
cc
.
Component
,
extends
:
cc
.
Component
,
properties
:
{
properties
:
{
picNode
:
{
type
:
cc
.
Node
,
default
:
null
},
picTempNode
:
{
type
:
cc
.
Node
,
default
:
null
},
leftNode
:
{
type
:
cc
.
Node
,
default
:
null
},
rightNode
:
{
type
:
cc
.
Node
,
default
:
null
},
btnClip
:
cc
.
AudioClip
,
tipClip
:
cc
.
AudioClip
,
},
},
// 生命周期 onLoad
// 生命周期 onLoad
...
@@ -49,6 +64,7 @@ cc.Class({
...
@@ -49,6 +64,7 @@ cc.Class({
sy
=
frameSize
.
height
/
this
.
_designSize
.
height
;
sy
=
frameSize
.
height
/
this
.
_designSize
.
height
;
this
.
_mapScaleMin
=
Math
.
min
(
sx
,
sy
)
*
this
.
_cocosScale
;
this
.
_mapScaleMin
=
Math
.
min
(
sx
,
sy
)
*
this
.
_cocosScale
;
this
.
_mapScaleMax
=
Math
.
max
(
sx
,
sy
)
*
this
.
_cocosScale
;
this
.
_mapScaleMax
=
Math
.
max
(
sx
,
sy
)
*
this
.
_cocosScale
;
this
.
originRect
=
cc
.
size
(
1280
,
720
)
},
},
...
@@ -61,53 +77,64 @@ cc.Class({
...
@@ -61,53 +77,64 @@ cc.Class({
getData
((
data
)
=>
{
getData
((
data
)
=>
{
console
.
log
(
'
data:
'
,
data
);
console
.
log
(
'
data:
'
,
data
);
this
.
data
=
data
||
this
.
getDefaultData
();
this
.
data
=
data
.
length
?
data
:
this
.
getDefaultData
();
this
.
data
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
data
))
this
.
data
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
data
))
this
.
preloadItem
()
this
.
preloadItem
()
})
})
//init show
this
.
picNode
.
opacity
=
0
this
.
leftNode
.
active
=
false
this
.
rightNode
.
active
=
false
},
},
getData
(
func
)
{
onEnable
()
{
if
(
window
&&
window
.
courseware
)
{
this
.
rightNode
.
on
(
cc
.
Node
.
EventType
.
MOUSE_DOWN
,
this
.
changeIcon
.
bind
(
this
,
this
.
rightNode
,
true
))
window
.
courseware
.
getData
(
func
,
'
scene
'
);
this
.
rightNode
.
on
(
cc
.
Node
.
EventType
.
MOUSE_UP
,
this
.
changeIcon
.
bind
(
this
,
this
.
rightNode
,
false
))
return
;
this
.
rightNode
.
on
(
cc
.
Node
.
EventType
.
MOUSE_LEAVE
,
this
.
changeIcon
.
bind
(
this
,
this
.
rightNode
,
false
))
}
this
.
leftNode
.
on
(
cc
.
Node
.
EventType
.
MOUSE_DOWN
,
this
.
changeIcon
.
bind
(
this
,
this
.
leftNode
,
true
))
this
.
leftNode
.
on
(
cc
.
Node
.
EventType
.
MOUSE_UP
,
this
.
changeIcon
.
bind
(
this
,
this
.
leftNode
,
false
))
const
middleLayer
=
cc
.
find
(
'
middleLayer
'
);
this
.
leftNode
.
on
(
cc
.
Node
.
EventType
.
MOUSE_UP
,
this
.
changeIcon
.
bind
(
this
,
this
.
leftNode
,
false
))
if
(
middleLayer
)
{
cc
.
systemEvent
.
on
(
'
playAudio
'
,
this
.
onPlayAudio
,
this
)
const
middleLayerComponent
=
middleLayer
.
getComponent
(
'
middleLayer
'
);
middleLayerComponent
.
getData
(
func
);
return
;
}
func
(
this
.
getDefaultData
());
},
},
getDefaultData
()
{
onDisable
()
{
return
defaultData
;
this
.
rightNode
.
off
(
cc
.
Node
.
EventType
.
MOUSE_DOWN
)
this
.
rightNode
.
off
(
cc
.
Node
.
EventType
.
MOUSE_UP
)
this
.
rightNode
.
off
(
cc
.
Node
.
EventType
.
MOUSE_LEAVE
)
this
.
leftNode
.
off
(
cc
.
Node
.
EventType
.
MOUSE_DOWN
)
this
.
leftNode
.
off
(
cc
.
Node
.
EventType
.
MOUSE_UP
)
this
.
leftNode
.
off
(
cc
.
Node
.
EventType
.
MOUSE_LEAVE
)
cc
.
systemEvent
.
off
(
'
playAudio
'
,
this
.
onPlayAudio
,
this
)
},
},
preloadItem
()
{
changeIcon
(
node
,
bl
)
{
this
.
addPreloadImage
();
node
.
children
[
0
].
active
=
!
bl
this
.
addPreloadAudio
();
node
.
children
[
1
].
active
=
bl
this
.
addPreloadAnima
();
this
.
preload
();
},
},
getData
(
cb
)
{
addPreloadImage
()
{
cb
(
this
.
getDefaultData
());
this
.
_imageResList
.
push
({
url
:
this
.
data
.
pic_url
});
this
.
_imageResList
.
push
({
url
:
this
.
data
.
pic_url_2
});
},
},
addPreloadAudio
()
{
getDefaultData
()
{
const
dataJson
=
'
[{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/807e9f0c160545ec14d5094f258e0c75.png","rect":{"x":249,"y":0,"width":299,"height":299}},"hotZoneItemArr":[{"id":"1620701172440","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/d8edc8d8113269b4c97b75a55a5c926c.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/bd0502e664d0d279ccbec4e22b60f051.mp3","itemType":"pic","fontScale":0.62265625,"imgScale":0.4671875,"mapScale":0.62265625,"gIdx":"1","rect":{"x":29.9,"y":29.9,"width":239.2,"height":239.2}}]},{"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/807e9f0c160545ec14d5094f258e0c75.png","rect":{"x":249,"y":0,"width":299,"height":299}},"hotZoneItemArr":[{"id":"1620701172440","index":0,"pic_url":"http://staging-teach.cdn.ireadabc.com/d8edc8d8113269b4c97b75a55a5c926c.jpg","audio_url":"http://staging-teach.cdn.ireadabc.com/bd0502e664d0d279ccbec4e22b60f051.mp3","itemType":"pic","fontScale":0.62265625,"imgScale":0.4671875,"mapScale":0.62265625,"gIdx":"1","rect":{"x":29.9,"y":29.9,"width":239.2,"height":239.2}}]}]
'
this
.
_audioResList
.
push
({
url
:
this
.
data
.
audio_url
});
const
data
=
JSON
.
parse
(
dataJson
);
return
data
;
},
},
addPreloadAnima
()
{
preloadItem
()
{
this
.
addPreload
()
this
.
preload
();
},
addPreload
()
{
for
(
let
item
of
this
.
data
)
{
this
.
_imageResList
.
push
({
url
:
item
.
bgItem
.
url
})
for
(
let
item
of
item
.
hotZoneItemArr
)
{
item
.
pic_url
&&
this
.
_imageResList
.
push
({
url
:
item
.
pic_url
})
item
.
audio_url
&&
this
.
_audioResList
.
push
({
url
:
item
.
audio_url
})
}
}
},
},
preload
()
{
preload
()
{
...
@@ -127,7 +154,6 @@ cc.Class({
...
@@ -127,7 +154,6 @@ cc.Class({
loadEnd
()
{
loadEnd
()
{
this
.
initData
();
this
.
initData
();
this
.
initAudio
();
this
.
initView
();
this
.
initView
();
// this.initListener();
// this.initListener();
},
},
...
@@ -138,25 +164,9 @@ cc.Class({
...
@@ -138,25 +164,9 @@ cc.Class({
this
.
_cantouch
=
true
;
this
.
_cantouch
=
true
;
},
},
audioBtn
:
null
,
initAudio
()
{
const
audioNode
=
cc
.
find
(
'
Canvas/res/audio
'
);
const
getAudioByResName
=
(
resName
)
=>
{
return
audioNode
.
getChildByName
(
resName
).
getComponent
(
cc
.
AudioSource
);
}
this
.
audioBtn
=
getAudioByResName
(
'
btn
'
);
},
initView
()
{
initView
()
{
this
.
initBg
();
this
.
initBg
();
this
.
initPic
();
this
.
initPic
();
this
.
initBtn
();
this
.
initIcon
();
},
},
initBg
()
{
initBg
()
{
...
@@ -164,203 +174,145 @@ cc.Class({
...
@@ -164,203 +174,145 @@ cc.Class({
bgNode
.
scale
=
this
.
_mapScaleMax
;
bgNode
.
scale
=
this
.
_mapScaleMax
;
},
},
pic1
:
null
,
pic2
:
null
,
initPic
()
{
initPic
()
{
const
canvas
=
cc
.
find
(
'
Canvas
'
);
this
.
picNode
.
opacity
=
0
const
maxW
=
canvas
.
width
*
0.7
;
cc
.
Tween
.
stopAllByTarget
(
this
.
picNode
)
cc
.
tween
(
this
.
picNode
).
to
(
1
,
{
opacity
:
255
},
{
easing
:
'
cubicInOut
'
}).
start
()
this
.
getSprNodeByUrl
(
this
.
data
.
pic_url
,
(
sprNode
)
=>
{
this
.
curPage
=
0
const
picNode1
=
sprNode
;
if
(
this
.
data
.
length
==
1
)
{
picNode1
.
scale
=
maxW
/
picNode1
.
width
;
this
.
leftNode
.
active
=
false
picNode1
.
baseX
=
picNode1
.
x
;
this
.
rightNode
.
active
=
false
canvas
.
addChild
(
picNode1
);
}
else
{
this
.
pic1
=
picNode1
;
this
.
leftNode
.
active
=
false
this
.
rightNode
.
active
=
true
const
labelNode
=
new
cc
.
Node
();
}
labelNode
.
color
=
cc
.
Color
.
YELLOW
;
this
.
setContent
(
this
.
picNode
,
this
.
data
[
0
])
const
label
=
labelNode
.
addComponent
(
cc
.
Label
);
label
.
string
=
this
.
data
.
text
;
label
.
fontSize
=
60
;
label
.
lineHeight
=
60
;
label
.
font
=
cc
.
find
(
'
Canvas/res/font/BRLNSDB
'
).
getComponent
(
'
cc.Label
'
).
font
;
picNode1
.
addChild
(
labelNode
);
});
this
.
getSprNodeByUrl
(
this
.
data
.
pic_url_2
,
(
sprNode
)
=>
{
const
picNode2
=
sprNode
;
picNode2
.
scale
=
maxW
/
picNode2
.
width
;
canvas
.
addChild
(
picNode2
);
picNode2
.
x
=
canvas
.
width
;
picNode2
.
baseX
=
picNode2
.
x
;
this
.
pic2
=
picNode2
;
const
labelNode
=
new
cc
.
Node
();
const
label
=
labelNode
.
addComponent
(
cc
.
RichText
);
const
size
=
60
label
.
font
=
cc
.
find
(
'
Canvas/res/font/BRLNSDB
'
).
getComponent
(
cc
.
Label
).
font
;
label
.
string
=
`<outline color=#751e00 width=4><size=
${
size
}
><color=#ffffff>
${
this
.
data
.
text
}
</color></size></outline>`
label
.
lineHeight
=
size
;
picNode2
.
addChild
(
labelNode
);
});
},
initIcon
()
{
const
iconNode
=
this
.
getSprNode
(
'
icon
'
);
iconNode
.
zIndex
=
5
;
iconNode
.
anchorX
=
1
;
iconNode
.
anchorY
=
1
;
iconNode
.
parent
=
cc
.
find
(
'
Canvas
'
);
iconNode
.
x
=
iconNode
.
parent
.
width
/
2
-
10
;
iconNode
.
y
=
iconNode
.
parent
.
height
/
2
-
10
;
iconNode
.
on
(
cc
.
Node
.
EventType
.
TOUCH_START
,
()
=>
{
this
.
playAudioByUrl
(
this
.
data
.
audio_url
);
})
},
},
curPage
:
null
,
curPage
:
null
,
initBtn
()
{
this
.
curPage
=
0
;
onClickRight
()
{
const
bottomPart
=
cc
.
find
(
'
Canvas/bottomPart
'
);
if
(
!
this
.
_cantouch
)
{
bottomPart
.
zIndex
=
5
;
// 提高层级
return
;
}
bottomPart
.
x
=
bottomPart
.
parent
.
width
/
2
;
this
.
curPage
+=
1
bottomPart
.
y
=
-
bottomPart
.
parent
.
height
/
2
;
const
leftBtnNode
=
bottomPart
.
getChildByName
(
'
btn_left
'
);
if
(
this
.
curPage
==
1
)
{
//节点中添加了button组件 则可以添加click事件监听
this
.
leftNode
.
active
=
true
leftBtnNode
.
on
(
'
click
'
,
()
=>
{
this
.
leftNode
.
children
[
0
].
active
=
true
if
(
!
this
.
_cantouch
)
{
this
.
leftNode
.
children
[
1
].
active
=
false
return
;
this
.
leftNode
.
scale
=
1
}
}
if
(
this
.
curPage
==
0
)
{
return
;
}
this
.
curPage
=
0
this
.
leftMove
();
// 游戏结束时需要调用这个方法通知系统作业完成
if
(
this
.
curPage
==
this
.
data
.
length
-
1
)
{
onHomeworkFinish
();
this
.
rightNode
.
active
=
false
}
cc
.
audioEngine
.
play
(
this
.
audioBtn
.
clip
,
false
,
0.8
)
this
.
leftMove
()
})
const
rightBtnNode
=
bottomPart
.
getChildByName
(
'
btn_right
'
);
cc
.
audioEngine
.
play
(
this
.
clickClip
,
false
,
0.5
)
//节点中添加了button组件 则可以添加click事件监听
},
rightBtnNode
.
on
(
'
click
'
,
()
=>
{
if
(
!
this
.
_cantouch
)
{
return
;
}
if
(
this
.
curPage
==
1
)
{
return
;
}
this
.
curPage
=
1
onClickLeft
()
{
this
.
rightMove
();
if
(
!
this
.
_cantouch
)
{
return
;
}
this
.
curPage
-=
1
if
(
this
.
curPage
==
0
)
{
this
.
leftNode
.
active
=
false
}
cc
.
audioEngine
.
play
(
this
.
audioBtn
.
clip
,
false
,
0.5
)
if
(
this
.
curPage
==
this
.
data
.
length
-
2
)
{
})
this
.
rightNode
.
active
=
true
this
.
rightNode
.
children
[
0
].
active
=
true
this
.
rightNode
.
children
[
1
].
active
=
false
this
.
rightNode
.
scale
=
1
}
this
.
rightMove
()
cc
.
audioEngine
.
play
(
this
.
clickClip
,
false
,
0.8
)
},
},
/** 左移动 */
leftMove
()
{
leftMove
()
{
this
.
stopAudio
()
this
.
_cantouch
=
false
;
this
.
_cantouch
=
false
;
const
len
=
this
.
pic1
.
parent
.
width
;
let
width
=
cc
.
winSize
.
width
cc
.
tween
(
this
.
pic1
)
this
.
picNode
.
x
=
0
.
to
(
1
,
{
x
:
this
.
pic1
.
baseX
},
{
easing
:
'
cubicInOut
'
})
this
.
picTempNode
.
x
=
width
this
.
setContent
(
this
.
picTempNode
,
this
.
data
[
this
.
curPage
])
cc
.
tween
(
this
.
picNode
)
.
to
(
1
,
{
x
:
-
width
},
{
easing
:
'
cubicInOut
'
})
.
start
();
.
start
();
cc
.
tween
(
this
.
pic
2
)
cc
.
tween
(
this
.
pic
TempNode
)
.
to
(
1
,
{
x
:
this
.
pic2
.
baseX
},
{
easing
:
'
cubicInOut
'
})
.
to
(
1
,
{
x
:
0
},
{
easing
:
'
cubicInOut
'
})
.
call
(()
=>
{
.
call
(()
=>
{
let
temp
=
this
.
picNode
this
.
picNode
=
this
.
picTempNode
this
.
picTempNode
=
temp
this
.
_cantouch
=
true
;
this
.
_cantouch
=
true
;
})
})
.
start
();
.
start
();
},
},
/** 右移动 */
rightMove
()
{
rightMove
()
{
this
.
stopAudio
()
this
.
_cantouch
=
false
;
this
.
_cantouch
=
false
;
const
len
=
this
.
pic1
.
parent
.
width
;
let
width
=
cc
.
winSize
.
width
cc
.
tween
(
this
.
pic1
)
this
.
picNode
.
x
=
0
.
to
(
1
,
{
x
:
this
.
pic1
.
baseX
-
len
},
{
easing
:
'
cubicInOut
'
})
this
.
picTempNode
.
x
=
-
width
this
.
setContent
(
this
.
picTempNode
,
this
.
data
[
this
.
curPage
])
cc
.
tween
(
this
.
picNode
)
.
to
(
1
,
{
x
:
width
},
{
easing
:
'
cubicInOut
'
})
.
start
();
.
start
();
cc
.
tween
(
this
.
pic
2
)
cc
.
tween
(
this
.
pic
TempNode
)
.
to
(
1
,
{
x
:
this
.
pic2
.
baseX
-
len
},
{
easing
:
'
cubicInOut
'
})
.
to
(
1
,
{
x
:
0
},
{
easing
:
'
cubicInOut
'
})
.
call
(()
=>
{
.
call
(()
=>
{
this
.
_cantouch
=
true
;
let
temp
=
this
.
picNode
this
.
picNode
=
this
.
picTempNode
this
.
picTempNode
=
temp
this
.
_cantouch
=
true
})
})
.
start
();
.
start
();
},
},
// update (dt) {},
// update (dt) {},
// ------------------------------------------------
// ------------------------------------------------
getSprNode
(
resName
)
{
/**普通大小 */
const
sf
=
cc
.
find
(
'
Canvas/res/img/
'
+
resName
).
getComponent
(
cc
.
Sprite
).
spriteFrame
;
originRect
:
null
,
const
node
=
new
cc
.
Node
();
/**设置显示区域内容 */
node
.
addComponent
(
cc
.
Sprite
).
spriteFrame
=
sf
;
setContent
(
picNode
,
data
)
{
return
node
;
if
(
!
data
)
{
},
console
.
log
(
'
数据错误
'
)
return
}
getSpriteFrimeByUrl
(
url
,
cb
)
{
picNode
cc
.
loader
.
load
({
url
},
(
err
,
img
)
=>
{
let
sprite
=
picNode
.
getComponentInChildren
(
cc
.
Sprite
)
const
spriteFrame
=
new
cc
.
SpriteFrame
(
img
)
tools
.
getSpriteFrimeByUrl
(
data
.
bgItem
.
url
,
(
sp
)
=>
{
if
(
cb
)
{
sprite
.
spriteFrame
=
sp
cb
(
spriteFrame
);
let
rect
=
sp
.
getRect
()
}
let
scale
=
rect
.
width
/
rect
.
height
})
let
originScale
=
this
.
originRect
.
width
/
this
.
originRect
.
height
},
if
(
scale
<
originScale
)
{
let
width
=
rect
.
width
/
(
rect
.
height
/
this
.
originRect
.
height
)
getSprNodeByUrl
(
url
,
cb
)
{
picNode
.
width
=
width
const
node
=
new
cc
.
Node
();
picNode
.
height
=
this
.
originRect
.
height
const
spr
=
node
.
addComponent
(
cc
.
Sprite
);
}
else
if
(
scale
>
originScale
)
{
this
.
getSpriteFrimeByUrl
(
url
,
(
sf
)
=>
{
picNode
.
height
=
rect
.
height
/
(
rect
.
width
/
this
.
originRect
.
width
)
spr
.
spriteFrame
=
sf
;
picNode
.
width
=
this
.
originRect
.
width
if
(
cb
)
{
}
else
{
cb
(
node
);
picNode
.
width
=
this
.
originRect
.
width
picNode
.
height
=
this
.
originRect
.
height
}
}
console
.
log
(
picNode
)
})
})
},
playAudioByUrl
(
audio_url
,
cb
=
null
)
{
}
if
(
audio_url
)
{
cc
.
assetManager
.
loadRemote
(
audio_url
,
(
err
,
audioClip
)
=>
{
const
audioId
=
cc
.
audioEngine
.
play
(
audioClip
,
false
,
0.8
);
if
(
cb
)
{
cc
.
audioEngine
.
setFinishCallback
(
audioId
,
()
=>
{
cb
();
});
}
});
}
},
// ------------------------------------------
// ------------------------------------------
});
});
play/assets/scene/sc
ene
/scene.js.meta
→
play/assets/scene/sc
ript
/scene.js.meta
View file @
0952dbf6
{
{
"ver": "1.0.8",
"ver": "1.0.8",
"uuid": "
f4ede462-f8d7-4069-ba80-915611c058ca
",
"uuid": "
c238bc0d-c57b-401e-a217-404098e27433
",
"isPlugin": false,
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInNative": true,
...
...
play/assets/scene/script/tools.js
0 → 100644
View file @
0952dbf6
export
const
tools
=
{
getSpriteFrimeByUrl
(
url
,
cb
)
{
cc
.
loader
.
load
({
url
},
(
err
,
img
)
=>
{
const
spriteFrame
=
new
cc
.
SpriteFrame
(
img
)
if
(
cb
)
{
cb
(
spriteFrame
);
}
})
}
}
\ No newline at end of file
play/assets/scene/script/tools.js.meta
0 → 100644
View file @
0952dbf6
{
"ver": "1.0.8",
"uuid": "68947d90-e044-48ff-8bce-670db8633681",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}
\ No newline at end of file
play/assets/scene/script/util.js
deleted
100644 → 0
View file @
30bbe2bc
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
;
}
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
;
}
export
function
exchangeNodePos
(
baseNode
,
targetNode
)
{
return
baseNode
.
convertToNodeSpaceAR
(
targetNode
.
_parent
.
convertToWorldSpaceAR
(
cc
.
v2
(
targetNode
.
x
,
targetNode
.
y
)));
}
export
function
RandomInt
(
a
,
b
=
0
)
{
let
max
=
Math
.
max
(
a
,
b
);
let
min
=
Math
.
min
(
a
,
b
);
return
Math
.
floor
(
Math
.
random
()
*
(
max
-
min
)
+
min
);
}
export
function
randomSortByArr
(
arr
)
{
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
setSprNodeMaxLen
(
sprNode
,
maxW
,
maxH
)
{
const
sx
=
maxW
/
sprNode
.
width
;
const
sy
=
maxH
/
sprNode
.
height
;
const
s
=
Math
.
min
(
sx
,
sy
);
sprNode
.
scale
=
Math
.
round
(
s
*
1000
)
/
1000
;
}
export
function
localPosTolocalPos
(
baseNode
,
targetNode
)
{
const
worldPos
=
targetNode
.
parent
.
convertToWorldSpaceAR
(
cc
.
v2
(
targetNode
.
x
,
targetNode
.
y
));
const
localPos
=
baseNode
.
parent
.
convertToNodeSpaceAR
(
cc
.
v2
(
worldPos
.
x
,
worldPos
.
y
));
return
localPos
;
}
export
function
worldPosToLocalPos
(
worldPos
,
baseNode
)
{
const
localPos
=
baseNode
.
parent
.
convertToNodeSpaceAR
(
cc
.
v2
(
worldPos
.
x
,
worldPos
.
y
));
return
localPos
;
}
export
function
getScaleRateBy2Node
(
baseNode
,
targetNode
,
maxFlag
=
true
)
{
const
worldRect1
=
targetNode
.
getBoundingBoxToWorld
();
const
worldRect2
=
baseNode
.
getBoundingBoxToWorld
();
const
sx
=
worldRect1
.
width
/
worldRect2
.
width
;
const
sy
=
worldRect1
.
height
/
worldRect2
.
height
;
if
(
maxFlag
)
{
return
Math
.
max
(
sx
,
sy
);
}
else
{
return
Math
.
min
(
sx
,
sy
);
}
}
export
function
getDistance
(
start
,
end
){
var
pos
=
cc
.
v2
(
start
.
x
-
end
.
x
,
start
.
y
-
end
.
y
);
var
dis
=
Math
.
sqrt
(
pos
.
x
*
pos
.
x
+
pos
.
y
*
pos
.
y
);
return
dis
;
}
export
function
playAudioByUrl
(
audio_url
,
cb
=
null
)
{
if
(
audio_url
)
{
cc
.
assetManager
.
loadRemote
(
audio_url
,
(
err
,
audioClip
)
=>
{
const
audioId
=
cc
.
audioEngine
.
play
(
audioClip
,
false
,
0.8
);
if
(
cb
)
{
cc
.
audioEngine
.
setFinishCallback
(
audioId
,
()
=>
{
cb
();
});
}
});
}
}
export
function
btnClickAnima
(
btn
,
time
=
0.15
,
rate
=
1.05
)
{
btn
.
tmpScale
=
btn
.
scale
;
btn
.
on
(
cc
.
Node
.
EventType
.
TOUCH_START
,
()
=>
{
cc
.
tween
(
btn
)
.
to
(
time
/
2
,
{
scale
:
btn
.
scale
*
rate
})
.
start
()
})
btn
.
on
(
cc
.
Node
.
EventType
.
TOUCH_CANCEL
,
()
=>
{
cc
.
tween
(
btn
)
.
to
(
time
/
2
,
{
scale
:
btn
.
tmpScale
})
.
start
()
})
btn
.
on
(
cc
.
Node
.
EventType
.
TOUCH_END
,
()
=>
{
cc
.
tween
(
btn
)
.
to
(
time
/
2
,
{
scale
:
btn
.
tmpScale
})
.
start
()
})
}
export
function
getSpriteFrimeByUrl
(
url
,
cb
)
{
cc
.
loader
.
load
({
url
},
(
err
,
img
)
=>
{
const
spriteFrame
=
new
cc
.
SpriteFrame
(
img
)
if
(
cb
)
{
cb
(
spriteFrame
);
}
})
}
export
function
getSprNode
(
resName
)
{
const
sf
=
cc
.
find
(
'
Canvas/res/img/
'
+
resName
).
getComponent
(
cc
.
Sprite
).
spriteFrame
;
const
node
=
new
cc
.
Node
();
node
.
addComponent
(
cc
.
Sprite
).
spriteFrame
=
sf
;
return
node
;
}
export
function
getSprNodeByUrl
(
url
,
cb
)
{
const
node
=
new
cc
.
Node
();
const
spr
=
node
.
addComponent
(
cc
.
Sprite
);
getSpriteFrimeByUrl
(
url
,
(
sf
)
=>
{
spr
.
spriteFrame
=
sf
;
if
(
cb
)
{
cb
(
spr
);
}
})
}
export
function
playAudio
(
audioClip
,
cb
=
null
)
{
if
(
audioClip
)
{
const
audioId
=
cc
.
audioEngine
.
playEffect
(
audioClip
,
false
,
0.8
);
if
(
cb
)
{
cc
.
audioEngine
.
setFinishCallback
(
audioId
,
()
=>
{
cb
();
});
}
}
}
export
async
function
asyncDelay
(
time
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
try
{
setTimeout
(()
=>
{
resolve
();
},
time
*
1000
);
}
catch
(
e
)
{
reject
(
e
);
}
})
}
export
class
FireworkSettings
{
baseNode
;
// 父节点
nodeList
;
// 火花节点的array
pos
;
// 发射点
side
;
// 发射方向
range
;
// 扩散范围
number
;
// 发射数量
scalseRange
;
// 缩放范围
constructor
(
baseNode
,
nodeList
,
pos
=
cc
.
v2
(
0
,
0
),
side
=
cc
.
v2
(
0
,
100
),
range
=
50
,
number
=
100
,
scalseRange
=
0
)
{
this
.
baseNode
=
baseNode
;
this
.
nodeList
=
nodeList
;
this
.
pos
=
pos
;
this
.
side
=
side
;
this
.
range
=
range
;
this
.
number
=
number
;
this
.
scalseRange
=
scalseRange
;
}
static
copy
(
firework
)
{
return
new
FireworkSettings
(
firework
.
baseNode
,
firework
.
nodeList
,
firework
.
pos
,
firework
.
side
,
firework
.
range
,
firework
.
number
,
);
}
}
export
async
function
showFireworks
(
fireworkSettings
)
{
const
{
baseNode
,
nodeList
,
pos
,
side
,
range
,
number
,
scalseRange
}
=
fireworkSettings
;
new
Array
(
number
).
fill
(
'
'
).
forEach
(
async
(
_
,
i
)
=>
{
let
rabbonNode
=
new
cc
.
Node
();
rabbonNode
.
parent
=
baseNode
;
rabbonNode
.
x
=
pos
.
x
;
rabbonNode
.
y
=
pos
.
y
;
rabbonNode
.
angle
=
60
*
Math
.
random
()
-
30
;
let
node
=
cc
.
instantiate
(
nodeList
[
RandomInt
(
nodeList
.
length
)]);
node
.
parent
=
rabbonNode
;
node
.
active
=
true
;
node
.
x
=
0
;
node
.
y
=
0
;
node
.
angle
=
0
;
node
.
scale
=
(
Math
.
random
()
-
0.5
)
*
scalseRange
+
1
;
const
rate
=
Math
.
random
();
const
angle
=
Math
.
PI
*
(
Math
.
random
()
*
2
-
1
);
await
asyncTweenBy
(
rabbonNode
,
0.3
,
{
x
:
side
.
x
*
rate
+
Math
.
cos
(
angle
)
*
range
*
rate
,
y
:
side
.
y
*
rate
+
Math
.
sin
(
angle
)
*
range
*
rate
},
{
easing
:
'
quadIn
'
});
cc
.
tween
(
rabbonNode
)
.
by
(
8
,
{
y
:
-
2000
})
.
start
();
cc
.
tween
(
rabbonNode
)
.
to
(
5
,
{
scale
:
(
Math
.
random
()
-
0.5
)
*
scalseRange
+
1
})
.
start
();
rabbonFall
(
rabbonNode
);
await
asyncDelay
(
Math
.
random
());
cc
.
tween
(
node
)
.
by
(
0.15
,
{
x
:
-
10
,
angle
:
-
10
})
.
by
(
0.3
,
{
x
:
20
,
angle
:
20
})
.
by
(
0.15
,
{
x
:
-
10
,
angle
:
-
10
})
.
union
()
.
repeatForever
()
.
start
();
cc
.
tween
(
rabbonNode
)
.
delay
(
5
)
.
to
(
0.3
,
{
opacity
:
0
})
.
call
(()
=>
{
node
.
stopAllActions
();
node
.
active
=
false
;
node
.
parent
=
null
;
node
=
null
;
})
.
start
();
});
}
async
function
rabbonFall
(
node
)
{
const
time
=
1
+
Math
.
random
();
const
offsetX
=
RandomInt
(
-
200
,
200
)
*
time
;
await
asyncTweenBy
(
node
,
time
,
{
x
:
offsetX
,
angle
:
offsetX
*
60
/
200
});
rabbonFall
(
node
);
}
export
async
function
asyncTweenTo
(
node
,
duration
,
obj
,
ease
=
undefined
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
try
{
cc
.
tween
(
node
)
.
to
(
duration
,
obj
,
ease
)
.
call
(()
=>
{
resolve
();
})
.
start
();
}
catch
(
e
)
{
reject
(
e
);
}
});
}
export
async
function
asyncTweenBy
(
node
,
duration
,
obj
,
ease
=
undefined
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
try
{
cc
.
tween
(
node
)
.
by
(
duration
,
obj
,
ease
)
.
call
(()
=>
{
resolve
();
})
.
start
();
}
catch
(
e
)
{
reject
(
e
);
}
});
}
export
function
showTrebleFirework
(
baseNode
,
rabbonList
)
{
const
middle
=
new
FireworkSettings
(
baseNode
,
rabbonList
);
middle
.
pos
=
cc
.
v2
(
0
,
-
400
);
middle
.
side
=
cc
.
v2
(
0
,
1000
);
middle
.
range
=
200
;
middle
.
number
=
100
;
middle
.
scalseRange
=
0.4
;
const
left
=
FireworkSettings
.
copy
(
middle
);
left
.
pos
=
cc
.
v2
(
-
600
,
-
400
);
left
.
side
=
cc
.
v2
(
200
,
1000
);
const
right
=
FireworkSettings
.
copy
(
middle
);
right
.
pos
=
cc
.
v2
(
600
,
-
400
);
right
.
side
=
cc
.
v2
(
-
200
,
1000
);
showFireworks
(
middle
);
showFireworks
(
left
);
showFireworks
(
right
);
}
export
function
onHomeworkFinish
()
{
const
middleLayer
=
cc
.
find
(
'
middleLayer
'
);
if
(
middleLayer
)
{
const
middleLayerComponent
=
middleLayer
.
getComponent
(
'
middleLayer
'
);
if
(
middleLayerComponent
.
role
==
'
student
'
)
{
middleLayerComponent
.
onHomeworkFinish
(()
=>
{
});
}
}
else
{
console
.
log
(
'
onHomeworkFinish
'
);
}
}
\ No newline at end of file
play/assets/scene/textures/bg_move.png.meta
View file @
0952dbf6
...
@@ -26,8 +26,8 @@
...
@@ -26,8 +26,8 @@
"height": 720,
"height": 720,
"rawWidth": 14,
"rawWidth": 14,
"rawHeight": 720,
"rawHeight": 720,
"borderTop":
0
,
"borderTop":
22
,
"borderBottom":
0
,
"borderBottom":
33
,
"borderLeft": 0,
"borderLeft": 0,
"borderRight": 0,
"borderRight": 0,
"subMetas": {}
"subMetas": {}
...
...
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