Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Q
QuPeiYin
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
QuPeiYin
Commits
fc45a3c4
Commit
fc45a3c4
authored
Jul 08, 2020
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: Unit 增加图片遮照 图片圆角 图片切圆 视频类
parent
8a51c964
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
237 additions
and
50 deletions
+237
-50
Unit.ts
src/app/play/Unit.ts
+224
-49
play.component.ts
src/app/play/play.component.ts
+11
-0
tslint.json
tslint.json
+2
-1
No files found.
src/app/play/Unit.ts
View file @
fc45a3c4
...
@@ -4,6 +4,7 @@ import TWEEN from '@tweenjs/tween.js';
...
@@ -4,6 +4,7 @@ import TWEEN from '@tweenjs/tween.js';
interface
AirWindow
extends
Window
{
interface
AirWindow
extends
Window
{
air
:
any
;
air
:
any
;
curCtx
:
any
;
curCtx
:
any
;
curImages
:
any
;
}
}
declare
let
window
:
AirWindow
;
declare
let
window
:
AirWindow
;
...
@@ -36,7 +37,6 @@ class Sprite {
...
@@ -36,7 +37,6 @@ class Sprite {
export
class
MySprite
extends
Sprite
{
export
class
MySprite
extends
Sprite
{
_width
=
0
;
_width
=
0
;
...
@@ -69,6 +69,16 @@ export class MySprite extends Sprite {
...
@@ -69,6 +69,16 @@ export class MySprite extends Sprite {
img
;
img
;
_z
=
0
;
_z
=
0
;
_showRect
;
_bitmapFlag
=
false
;
_offCanvas
;
_offCtx
;
isCircleStyle
=
false
;
// 切成圆形
parent
;
_maskSpr
;
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
...
@@ -79,7 +89,6 @@ export class MySprite extends Sprite {
...
@@ -79,7 +89,6 @@ export class MySprite extends Sprite {
this
.
width
=
this
.
img
.
width
;
this
.
width
=
this
.
img
.
width
;
this
.
height
=
this
.
img
.
height
;
this
.
height
=
this
.
img
.
height
;
}
}
this
.
anchorX
=
anchorX
;
this
.
anchorX
=
anchorX
;
...
@@ -87,8 +96,11 @@ export class MySprite extends Sprite {
...
@@ -87,8 +96,11 @@ export class MySprite extends Sprite {
}
}
setShadow
(
offX
,
offY
,
blur
,
color
=
'
rgba(0, 0, 0, 0.3)
'
)
{
setShowRect
(
rect
)
{
this
.
_showRect
=
rect
;
}
setShadow
(
offX
,
offY
,
blur
,
color
=
'
rgba(0, 0, 0, 0.3)
'
)
{
this
.
_shadowFlag
=
true
;
this
.
_shadowFlag
=
true
;
this
.
_shadowColor
=
color
;
this
.
_shadowColor
=
color
;
...
@@ -102,6 +114,19 @@ export class MySprite extends Sprite {
...
@@ -102,6 +114,19 @@ export class MySprite extends Sprite {
this
.
_radius
=
r
;
this
.
_radius
=
r
;
}
}
setMaskSpr
(
spr
)
{
this
.
_maskSpr
=
spr
;
this
.
_createOffCtx
();
}
_createOffCtx
()
{
if
(
!
this
.
_offCtx
)
{
this
.
_offCanvas
=
document
.
createElement
(
'
canvas
'
);
// 创建一个新的canvas
this
.
width
=
this
.
_offCanvas
.
width
=
this
.
width
;
// 创建一个正好包裹住一个粒子canvas
this
.
height
=
this
.
_offCanvas
.
height
=
this
.
height
;
this
.
_offCtx
=
this
.
_offCanvas
.
getContext
(
'
2d
'
);
}
}
update
(
$event
=
null
)
{
update
(
$event
=
null
)
{
if
(
!
this
.
visible
&&
this
.
childDepandVisible
)
{
if
(
!
this
.
visible
&&
this
.
childDepandVisible
)
{
...
@@ -137,7 +162,22 @@ export class MySprite extends Sprite {
...
@@ -137,7 +162,22 @@ export class MySprite extends Sprite {
this
.
ctx
.
transform
(
1
,
this
.
skewX
,
this
.
skewY
,
1
,
0
,
0
);
this
.
ctx
.
transform
(
1
,
this
.
skewX
,
this
.
skewY
,
1
,
0
,
0
);
}
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
)
{
if
(
this
.
_radius
)
{
...
@@ -146,44 +186,67 @@ export class MySprite extends Sprite {
...
@@ -146,44 +186,67 @@ export class MySprite extends Sprite {
const
w
=
this
.
width
;
const
w
=
this
.
width
;
const
h
=
this
.
height
;
const
h
=
this
.
height
;
this
.
ctx
.
lineTo
(
-
w
/
2
,
h
/
2
);
// 创建水平线
this
.
ctx
.
beginPath
()
this
.
ctx
.
arcTo
(
-
w
/
2
,
-
h
/
2
,
-
w
/
2
+
r
,
-
h
/
2
,
r
);
this
.
_roundRect
(
-
w
/
2
,
-
h
/
2
,
w
,
h
,
r
*
1
||
0
);
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
();
this
.
ctx
.
clip
();
}
}
if
(
this
.
isCircleStyle
)
{
this
.
ctx
.
beginPath
()
this
.
ctx
.
arc
(
0
,
0
,
Math
.
max
(
this
.
width
,
this
.
height
)
/
2
,
0
,
Math
.
PI
*
2
,
false
);
// 圆形
this
.
ctx
.
clip
();
}
}
drawSelf
()
{
if
(
this
.
_shadowFla
g
)
{
if
(
this
.
im
g
)
{
this
.
ctx
.
shadowOffsetX
=
this
.
_shadowOffsetX
;
if
(
this
.
_showRect
)
{
this
.
ctx
.
shadowOffsetY
=
this
.
_shadowOffsetY
;
const
rect
=
this
.
_showRect
;
this
.
ctx
.
shadowBlur
=
this
.
_shadowBlur
;
this
.
ctx
.
drawImage
(
this
.
img
,
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
,
this
.
_offX
+
rect
.
x
,
this
.
_offY
+
rect
.
y
,
rect
.
width
,
rect
.
height
);
this
.
ctx
.
shadowColor
=
this
.
_shadowColor
;
}
else
{
}
else
{
this
.
ctx
.
shadowOffsetX
=
0
;
if
(
this
.
_offCtx
)
{
this
.
ctx
.
shadowOffsetY
=
0
;
this
.
_offScreenRender
();
this
.
ctx
.
shadowBlur
=
null
;
}
else
{
this
.
ctx
.
shadowColor
=
null
;
this
.
ctx
.
drawImage
(
this
.
img
,
this
.
_offX
,
this
.
_offY
);
}
}
}
}
}
_offScreenRender
()
{
if
(
this
.
img
)
{
this
.
_offCtx
.
save
();
this
.
ctx
.
drawImage
(
this
.
img
,
this
.
_offX
,
this
.
_offY
);
this
.
_offCtx
.
clearRect
(
0
,
0
,
this
.
width
,
this
.
height
);
this
.
_offCtx
.
drawImage
(
this
.
img
,
0
,
0
);
if
(
this
.
_maskSpr
)
{
this
.
_offCtx
.
globalCompositeOperation
=
'
destination-in
'
;
this
.
_offCtx
.
drawImage
(
this
.
_maskSpr
.
img
,
this
.
_maskSpr
.
x
+
this
.
_maskSpr
.
_offX
-
this
.
_offX
,
this
.
_maskSpr
.
y
+
this
.
_maskSpr
.
_offY
-
this
.
_offY
);
}
}
this
.
ctx
.
drawImage
(
this
.
_offCanvas
,
this
.
_offX
,
this
.
_offY
);
this
.
_offCtx
.
restore
();
}
_roundRect
(
x
,
y
,
w
,
h
,
r
)
{
const
min_size
=
Math
.
min
(
w
,
h
);
if
(
r
>
min_size
/
2
)
r
=
min_size
/
2
;
// 开始绘制
const
ctx
=
this
.
ctx
;
ctx
.
beginPath
();
ctx
.
moveTo
(
x
+
r
,
y
);
ctx
.
arcTo
(
x
+
w
,
y
,
x
+
w
,
y
+
h
,
r
);
ctx
.
arcTo
(
x
+
w
,
y
+
h
,
x
,
y
+
h
,
r
);
ctx
.
arcTo
(
x
,
y
+
h
,
x
,
y
,
r
);
ctx
.
arcTo
(
x
,
y
,
x
+
w
,
y
,
r
);
ctx
.
closePath
();
}
}
updateChildren
()
{
updateChildren
()
{
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
...
@@ -257,6 +320,13 @@ export class MySprite extends Sprite {
...
@@ -257,6 +320,13 @@ export class MySprite extends Sprite {
}
}
}
}
set
bitmapFlag
(
v
)
{
this
.
_bitmapFlag
=
v
;
}
get
bitmapFlag
()
{
return
this
.
_bitmapFlag
;
}
set
alpha
(
v
)
{
set
alpha
(
v
)
{
this
.
_alpha
=
v
;
this
.
_alpha
=
v
;
if
(
this
.
childDepandAlpha
)
{
if
(
this
.
childDepandAlpha
)
{
...
@@ -305,7 +375,6 @@ export class MySprite extends Sprite {
...
@@ -305,7 +375,6 @@ export class MySprite extends Sprite {
getBoundingBox
()
{
getBoundingBox
()
{
const
getParentData
=
(
item
)
=>
{
const
getParentData
=
(
item
)
=>
{
let
px
=
item
.
x
;
let
px
=
item
.
x
;
...
@@ -343,11 +412,6 @@ export class MySprite extends Sprite {
...
@@ -343,11 +412,6 @@ export class MySprite extends Sprite {
const
width
=
this
.
width
*
Math
.
abs
(
data
.
sx
);
const
width
=
this
.
width
*
Math
.
abs
(
data
.
sx
);
const
height
=
this
.
height
*
Math
.
abs
(
data
.
sy
);
const
height
=
this
.
height
*
Math
.
abs
(
data
.
sy
);
// const x = this.x + this._offX * Math.abs(this.scaleX);
// const y = this.y + this._offY * Math.abs(this.scaleY);
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return
{
x
,
y
,
width
,
height
};
return
{
x
,
y
,
width
,
height
};
}
}
...
@@ -759,6 +823,7 @@ export class RichText extends Label {
...
@@ -759,6 +823,7 @@ export class RichText extends Label {
disH
=
30
;
disH
=
30
;
offW
=
10
;
constructor
(
ctx
?:
any
)
{
constructor
(
ctx
?:
any
)
{
super
(
ctx
);
super
(
ctx
);
...
@@ -788,7 +853,7 @@ export class RichText extends Label {
...
@@ -788,7 +853,7 @@ export class RichText extends Label {
const
chr
=
this
.
text
.
split
(
'
'
);
const
chr
=
this
.
text
.
split
(
'
'
);
let
temp
=
''
;
let
temp
=
''
;
const
row
=
[];
const
row
=
[];
const
w
=
selfW
-
80
;
const
w
=
selfW
-
this
.
offW
*
2
;
const
disH
=
(
this
.
fontSize
+
this
.
disH
)
*
this
.
scaleY
;
const
disH
=
(
this
.
fontSize
+
this
.
disH
)
*
this
.
scaleY
;
...
@@ -964,28 +1029,28 @@ export class ShapeRectNew extends MySprite {
...
@@ -964,28 +1029,28 @@ export class ShapeRectNew extends MySprite {
ctx
.
save
();
ctx
.
save
();
ctx
.
beginPath
(
0
);
ctx
.
beginPath
(
0
);
// 从右下角顺时针绘制,弧度从0到1/2PI
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx
.
arc
(
width
-
radius
,
height
-
radius
,
radius
,
0
,
Math
.
PI
/
2
);
ctx
.
arc
(
width
-
radius
+
this
.
_offX
,
height
-
radius
+
this
.
_offY
,
radius
,
0
,
Math
.
PI
/
2
);
// 矩形下边线
// 矩形下边线
ctx
.
lineTo
(
radius
,
height
);
ctx
.
lineTo
(
radius
+
this
.
_offX
,
height
+
this
.
_offY
);
// 左下角圆弧,弧度从1/2PI到PI
// 左下角圆弧,弧度从1/2PI到PI
ctx
.
arc
(
radius
,
height
-
radius
,
radius
,
Math
.
PI
/
2
,
Math
.
PI
);
ctx
.
arc
(
radius
+
this
.
_offX
,
height
-
radius
+
this
.
_offY
,
radius
,
Math
.
PI
/
2
,
Math
.
PI
);
// 矩形左边线
// 矩形左边线
ctx
.
lineTo
(
0
,
radius
);
ctx
.
lineTo
(
0
+
this
.
_offX
,
radius
+
this
.
_offY
);
// 左上角圆弧,弧度从PI到3/2PI
// 左上角圆弧,弧度从PI到3/2PI
ctx
.
arc
(
radius
,
radius
,
radius
,
Math
.
PI
,
Math
.
PI
*
3
/
2
);
ctx
.
arc
(
radius
+
this
.
_offX
,
radius
+
this
.
_offY
,
radius
,
Math
.
PI
,
Math
.
PI
*
3
/
2
);
// 上边线
// 上边线
ctx
.
lineTo
(
width
-
radius
,
0
);
ctx
.
lineTo
(
width
-
radius
+
this
.
_offX
,
0
+
this
.
_offY
);
// 右上角圆弧
// 右上角圆弧
ctx
.
arc
(
width
-
radius
,
radius
,
radius
,
Math
.
PI
*
3
/
2
,
Math
.
PI
*
2
);
ctx
.
arc
(
width
-
radius
+
this
.
_offX
,
radius
+
this
.
_offY
,
radius
,
Math
.
PI
*
3
/
2
,
Math
.
PI
*
2
);
// 右边线
// 右边线
ctx
.
lineTo
(
width
,
height
-
radius
);
ctx
.
lineTo
(
width
+
this
.
_offX
,
height
-
radius
+
this
.
_offY
);
ctx
.
closePath
();
ctx
.
closePath
();
if
(
this
.
fill
)
{
if
(
this
.
fill
)
{
...
@@ -1020,7 +1085,7 @@ export class MyAnimation extends MySprite {
...
@@ -1020,7 +1085,7 @@ export class MyAnimation extends MySprite {
loop
=
false
;
loop
=
false
;
playEndFunc
;
playEndFunc
;
delayPerUnit
=
1
;
delayPerUnit
=
0.07
;
restartFlag
=
false
;
restartFlag
=
false
;
reverseFlag
=
false
;
reverseFlag
=
false
;
...
@@ -1109,8 +1174,9 @@ export class MyAnimation extends MySprite {
...
@@ -1109,8 +1174,9 @@ export class MyAnimation extends MySprite {
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
if
(
this
.
playEndFunc
)
{
if
(
this
.
playEndFunc
)
{
this
.
playEndFunc
()
;
const
func
=
this
.
playEndFunc
;
this
.
playEndFunc
=
null
;
this
.
playEndFunc
=
null
;
func
();
}
}
}
}
...
@@ -1177,6 +1243,14 @@ export class MyAnimation extends MySprite {
...
@@ -1177,6 +1243,14 @@ export class MyAnimation extends MySprite {
export
function
tweenChange
(
item
,
obj
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
,
update
=
null
)
{
export
function
tweenChange
(
item
,
obj
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
,
update
=
null
)
{
const
tween
=
createTween
(
item
,
obj
,
time
,
callBack
,
easing
,
update
)
tween
.
start
();
return
tween
;
}
export
function
createTween
(
item
,
obj
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
,
update
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
(
obj
,
time
*
1000
);
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
(
obj
,
time
*
1000
);
if
(
callBack
)
{
if
(
callBack
)
{
...
@@ -1192,15 +1266,28 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
...
@@ -1192,15 +1266,28 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
update
(
a
,
b
);
update
(
a
,
b
);
});
});
}
}
return
tween
;
}
export
function
tweenQueue
(
arr
)
{
const
showOneTween
=
()
=>
{
const
tween
=
arr
.
shift
();
if
(
arr
.
length
>
0
)
{
tween
.
onComplete
(
()
=>
{
showOneTween
();
});
}
tween
.
start
();
tween
.
start
();
return
tween
;
};
showOneTween
();
}
}
export
function
rotateItem
(
item
,
rotation
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
export
function
rotateItem
(
item
,
rotation
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
,
loop
=
false
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
rotation
},
time
*
1000
);
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
rotation
},
time
*
1000
);
...
@@ -1208,7 +1295,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
...
@@ -1208,7 +1295,14 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
tween
.
onComplete
(()
=>
{
tween
.
onComplete
(()
=>
{
callBack
();
callBack
();
});
});
}
else
if
(
loop
)
{
const
speed
=
(
rotation
-
item
.
rotation
)
/
time
;
tween
.
onComplete
(()
=>
{
item
.
rotation
%=
360
;
rotateItem
(
item
,
item
.
rotation
+
speed
*
time
,
time
,
null
,
easing
,
true
);
});
}
}
if
(
easing
)
{
if
(
easing
)
{
tween
.
easing
(
easing
);
tween
.
easing
(
easing
);
}
}
...
@@ -1491,7 +1585,7 @@ export function getPosDistance(sx, sy, ex, ey) {
...
@@ -1491,7 +1585,7 @@ export function getPosDistance(sx, sy, ex, ey) {
return
len
;
return
len
;
}
}
export
function
delayCall
(
callback
,
second
)
{
export
function
delayCall
(
second
,
callback
)
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
delay
(
second
*
1000
)
.
delay
(
second
*
1000
)
.
onComplete
(()
=>
{
.
onComplete
(()
=>
{
...
@@ -1525,10 +1619,15 @@ export function formatTime(fmt, date) {
...
@@ -1525,10 +1619,15 @@ export function formatTime(fmt, date) {
return
fmt
;
return
fmt
;
}
}
export
function
getMinScale
(
item
,
maxLen
)
{
export
function
getMinScale
(
item
,
maxW
,
maxH
=
null
)
{
const
sx
=
maxLen
/
item
.
width
;
if
(
!
maxH
)
{
const
sy
=
maxLen
/
item
.
height
;
maxH
=
maxW
;
}
const
sx
=
maxW
/
item
.
width
;
const
sy
=
maxH
/
item
.
height
;
const
minS
=
Math
.
min
(
sx
,
sy
);
const
minS
=
Math
.
min
(
sx
,
sy
);
return
minS
;
return
minS
;
}
}
...
@@ -1571,6 +1670,46 @@ export function jelly(item, time = 0.7) {
...
@@ -1571,6 +1670,46 @@ export function jelly(item, time = 0.7) {
run
();
run
();
}
}
export
function
jellyPop
(
item
,
time
)
{
if
(
item
.
jellyTween
)
{
TWEEN
.
remove
(
item
.
jellyTween
);
}
const
t
=
time
/
6
;
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.3
,
baseSY
*
1.3
,
t
],
[
baseSX
*
0.85
,
baseSY
*
0.85
,
t
*
1
],
[
baseSX
*
1.1
,
baseSY
*
1.1
,
t
*
1
],
[
baseSX
*
0.95
,
baseSY
*
0.95
,
t
*
1
],
[
baseSX
*
1.02
,
baseSY
*
1.02
,
t
*
1
],
[
baseSX
*
1
,
baseSY
*
1
,
t
*
1
],
];
item
.
setScaleXY
(
0
);
run
();
}
export
function
showPopParticle
(
img
,
pos
,
parent
,
num
=
20
,
minLen
=
40
,
maxLen
=
80
,
showTime
=
0.4
)
{
export
function
showPopParticle
(
img
,
pos
,
parent
,
num
=
20
,
minLen
=
40
,
maxLen
=
80
,
showTime
=
0.4
)
{
...
@@ -1672,5 +1811,41 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
...
@@ -1672,5 +1811,41 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
}
}
export
function
getMaxScale
(
item
,
maxW
,
maxH
)
{
const
sx
=
maxW
/
item
.
width
;
const
sy
=
maxH
/
item
.
height
;
const
maxS
=
Math
.
max
(
sx
,
sy
);
return
maxS
;
}
export
function
createSprite
(
key
)
{
const
image
=
window
.
curImages
;
const
spr
=
new
MySprite
();
spr
.
init
(
image
.
get
(
key
));
return
spr
;
}
export
class
MyVideo
extends
MySprite
{
element
;
initVideoElement
(
videoElement
)
{
this
.
element
=
videoElement
;
this
.
width
=
this
.
element
.
videoWidth
;
this
.
height
=
this
.
element
.
videoHeight
;
this
.
element
.
currentTime
=
0.01
;
}
drawSelf
()
{
super
.
drawSelf
();
this
.
ctx
.
drawImage
(
this
.
element
,
0
,
0
,
this
.
width
,
this
.
height
);
}
}
// --------------- custom class --------------------
// --------------- custom class --------------------
src/app/play/play.component.ts
View file @
fc45a3c4
...
@@ -108,6 +108,16 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -108,6 +108,16 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnDestroy
()
{
ngOnDestroy
()
{
window
[
'
curCtx
'
]
=
null
;
window
[
'
curCtx
'
]
=
null
;
window
.
cancelAnimationFrame
(
this
.
animationId
);
window
.
cancelAnimationFrame
(
this
.
animationId
);
this
.
cleanAudio
();
}
cleanAudio
()
{
if
(
this
.
audioObj
)
{
for
(
const
key
in
this
.
audioObj
)
{
this
.
audioObj
[
key
].
pause
();
}
}
}
}
...
@@ -141,6 +151,7 @@ export class PlayComponent implements OnInit, OnDestroy {
...
@@ -141,6 +151,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
window
[
'
curCtx
'
]
=
this
.
ctx
;
window
[
'
curCtx
'
]
=
this
.
ctx
;
window
[
'
curImages
'
]
=
this
.
images
;
}
}
...
...
tslint.json
View file @
fc45a3c4
...
@@ -92,7 +92,8 @@
...
@@ -92,7 +92,8 @@
"variable-name"
:
false
,
"variable-name"
:
false
,
"no-unused-expression"
:
false
,
"no-unused-expression"
:
false
,
"align"
:
false
"align"
:
false
,
"no-string-literal"
:
false
},
},
"rulesDirectory"
:
[
"rulesDirectory"
:
[
"codelyzer"
"codelyzer"
...
...
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