Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
test_01_gt
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
test_01_gt
Commits
c3a447fa
Commit
c3a447fa
authored
Jun 04, 2020
by
luhongyu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
入门教程练习
parent
3695f7ce
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
9340 additions
and
665 deletions
+9340
-665
form.component.css
src/app/form/form.component.css
+0
-1
form.component.html
src/app/form/form.component.html
+5
-5
form.component.ts
src/app/form/form.component.ts
+16
-47
play.component.ts
src/app/play/play.component.ts
+26
-612
yarn.lock
yarn.lock
+9293
-0
No files found.
src/app/form/form.component.css
View file @
c3a447fa
...
@@ -4,5 +4,4 @@
...
@@ -4,5 +4,4 @@
.model-content
{
.model-content
{
width
:
100%
;
width
:
100%
;
height
:
100%
;
height
:
100%
;
}
}
src/app/form/form.component.html
View file @
c3a447fa
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<input
nz-input
placeholder=
"Basic usage"
[(
ngModel
)]="
msg
"
(
blur
)="
saveItem
()"
/>
<div
style=
"position: absolute; left: 200px; top: 100px; width: 800px;"
>
<
!-- <
div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
...
@@ -18,8 +19,7 @@
...
@@ -18,8 +19,7 @@
<app-custom-hot-zone></app-custom-hot-zone>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<app-lesson-title-config></app-lesson-title-config>
</div>
</div>
-->
</div>
</div>
\ No newline at end of file
src/app/form/form.component.ts
View file @
c3a447fa
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
NzInputModule
}
from
'
ng-zorro-antd/input
'
;
...
@@ -9,89 +10,57 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
...
@@ -9,89 +10,57 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
})
})
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
msg
=
"
gt
"
;
// 储存数据用
// 储存数据用
saveKey
=
"
test_001
1
"
;
KEY
=
"
test_01_gt
1
"
;
// 储存对象
// 储存对象
item
;
item
;
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
}
ngOnInit
()
{
ngOnInit
()
{
this
.
item
=
{};
// 获取存储的数据
// 获取存储的数据
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
getData
(
data
=>
{
if
(
data
)
{
if
(
data
)
{
this
.
item
=
data
;
this
.
msg
=
data
.
msg
;
}
else
{
this
.
msg
=
""
;
}
}
},
this
.
KEY
)
this
.
init
();
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
this
.
refresh
();
},
this
.
saveKey
);
}
}
ngOnChanges
()
{
ngOnChanges
()
{
}
}
ngOnDestroy
()
{
ngOnDestroy
()
{
}
}
saveItem
()
{
console
.
log
(
"
save:
"
+
this
.
msg
);
init
()
{
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
key
)
{
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
this
.
save
();
}
}
/**
/**
* 储存数据
* 储存数据
*/
*/
save
()
{
save
()
{
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
(
<
any
>
window
).
courseware
.
setData
({
msg
:
this
.
msg
},
null
,
this
.
KEY
);
this
.
refresh
();
this
.
refresh
();
}
}
/**
/**
* 刷新 渲染页面
* 刷新 渲染页面
* 立即执行
*/
*/
refresh
()
{
refresh
()
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
this
.
appRef
.
tick
();
},
1
);
},
1
);
}
}
}
}
src/app/play/play.component.ts
View file @
c3a447fa
import
{
Component
,
ElementRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
}
from
'
@angular/core
'
;
import
{
Component
,
ElementRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
}
from
'
@angular/core
'
;
import
{
import
{
Label
,
Label
,
MySprite
,
tweenChange
,
MySprite
,
tweenChange
,
}
from
'
./Unit
'
;
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
...
@@ -22,658 +22,72 @@ import TWEEN from '@tweenjs/tween.js';
...
@@ -22,658 +22,72 @@ import TWEEN from '@tweenjs/tween.js';
})
})
export
class
PlayComponent
implements
OnInit
,
OnDestroy
{
export
class
PlayComponent
implements
OnInit
,
OnDestroy
{
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
// 数据
// 数据
data
;
data
;
ctx
;
ctx
;
canvasWidth
=
1280
;
// canvas实际宽度
canvasWidth
=
1280
;
// canvas实际宽度
canvasHeight
=
720
;
// canvas实际高度
canvasHeight
=
720
;
// canvas实际高度
canvasBaseW
=
1280
;
// canvas 资源预设宽度
canvasBaseW
=
1280
;
// canvas 资源预设宽度
canvasBaseH
=
720
;
// canvas 资源预设高度
canvasBaseH
=
720
;
// canvas 资源预设高度
mx
;
// 点击x坐标
KEY
=
"
test_01_gt1
"
;
my
;
// 点击y坐标
// 资源
rawImages
=
new
Map
(
res
);
rawAudios
=
new
Map
(
resAudio
);
images
=
new
Map
();
animationId
:
any
;
winResizeEventStream
=
new
Subject
();
audioObj
=
{};
renderArr
;
mapScale
=
1
;
canvasLeft
;
canvasTop
;
saveKey
=
'
test_0011
'
;
btnLeft
;
btnRight
;
pic1
;
pic2
;
canTouch
=
true
;
curPic
;
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
onResize
(
event
)
{
onResize
(
event
)
{
this
.
winResizeEventStream
.
next
();
//
this.winResizeEventStream.next();
}
}
ngOnInit
()
{
ngOnInit
()
{
this
.
data
=
{};
// 获取数据
// 获取数据
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
getData
((
data
)
=>
{
getData
((
data
)
=>
{
if
(
data
&&
typeof
data
==
'
object
'
)
{
if
(
data
&&
typeof
data
==
'
object
'
)
{
this
.
data
=
data
;
this
.
data
=
data
;
}
else
{
this
.
data
=
{
msg
:
"
xxx
"
}
}
}
// console.log('data:' , data);
console
.
log
(
'
data:
'
,
data
);
// 初始化
// 初始化 各事件监听
this
.
init
();
this
.
initListener
();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this
.
initDefaultData
();
// 初始化 音频资源
this
.
initAudio
();
// 初始化 图片资源
this
.
initImg
();
// 开始预加载资源
this
.
load
();
},
this
.
saveKey
);
},
this
.
KEY
);
}
}
ngOnDestroy
()
{
ngOnDestroy
()
{
window
[
'
curCtx
'
]
=
null
;
window
.
cancelAnimationFrame
(
this
.
animationId
);
}
load
()
{
// 预加载资源
this
.
loadResources
().
then
(()
=>
{
window
[
"
air
"
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
this
.
init
();
this
.
update
();
});
}
}
init
()
{
init
()
{
this
.
initCtx
();
this
.
initData
();
this
.
initView
();
}
initCtx
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
canvas
.
nativeElement
.
width
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvas
.
nativeElement
.
width
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
canvas
.
nativeElement
.
height
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
window
[
'
curCtx
'
]
=
this
.
ctx
;
window
[
'
curCtx
'
]
=
this
.
ctx
;
}
updateItem
(
item
)
{
if
(
item
)
{
item
.
update
();
}
}
updateArr
(
arr
)
{
if
(
!
arr
)
{
return
;
}
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
arr
[
i
].
update
(
this
);
}
}
initListener
()
{
this
.
winResizeEventStream
.
pipe
(
debounceTime
(
500
))
.
subscribe
(
data
=>
{
this
.
renderAfterResize
();
});
// ---------------------------------------------
const
setParentOffset
=
()
=>
{
const
rect
=
this
.
canvas
.
nativeElement
.
getBoundingClientRect
();
this
.
canvasLeft
=
rect
.
left
;
this
.
canvasTop
=
rect
.
top
;
};
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
setMxMyByMouse
=
(
event
)
=>
{
this
.
mx
=
event
.
offsetX
;
this
.
my
=
event
.
offsetY
;
};
// ---------------------------------------------
let
firstTouch
=
true
;
const
touchDownFunc
=
(
e
)
=>
{
if
(
firstTouch
)
{
firstTouch
=
false
;
removeMouseListener
();
}
setMxMyByTouch
(
e
);
this
.
mapDown
(
e
);
};
const
touchMoveFunc
=
(
e
)
=>
{
setMxMyByTouch
(
e
);
this
.
mapMove
(
e
);
};
const
touchUpFunc
=
(
e
)
=>
{
setMxMyByTouch
(
e
);
this
.
mapUp
(
e
);
};
const
mouseDownFunc
=
(
e
)
=>
{
if
(
firstTouch
)
{
firstTouch
=
false
;
removeTouchListener
();
}
setMxMyByMouse
(
e
);
this
.
mapDown
(
e
);
};
const
mouseMoveFunc
=
(
e
)
=>
{
setMxMyByMouse
(
e
);
this
.
mapMove
(
e
);
};
const
mouseUpFunc
=
(
e
)
=>
{
setMxMyByMouse
(
e
);
this
.
mapUp
(
e
);
};
const
element
=
this
.
canvas
.
nativeElement
;
const
addTouchListener
=
()
=>
{
// 设置字体
element
.
addEventListener
(
'
touchstart
'
,
touchDownFunc
);
this
.
ctx
.
font
=
"
18px bold 黑体
"
;
element
.
addEventListener
(
'
touchmove
'
,
touchMoveFunc
);
// 设置颜色
element
.
addEventListener
(
'
touchend
'
,
touchUpFunc
);
this
.
ctx
.
fillStyle
=
"
#ff0
"
;
element
.
addEventListener
(
'
touchcancel
'
,
touchUpFunc
);
// 设置水平对齐方式
};
this
.
ctx
.
textAlign
=
"
center
"
;
const
removeTouchListener
=
()
=>
{
// 设置垂直对齐方式
element
.
removeEventListener
(
'
touchstart
'
,
touchDownFunc
);
this
.
ctx
.
textBaseline
=
"
middle
"
;
element
.
removeEventListener
(
'
touchmove
'
,
touchMoveFunc
);
// 绘制文字(参数:要写的字,x坐标,y坐标)
element
.
removeEventListener
(
'
touchend
'
,
touchUpFunc
);
this
.
ctx
.
fillText
(
this
.
data
.
msg
,
100
,
100
);
element
.
removeEventListener
(
'
touchcancel
'
,
touchUpFunc
);
};
const
addMouseListener
=
()
=>
{
window
[
"
air
"
].
hideAirClassLoading
(
"
dvps-test
"
,
this
.
data
);
// 固定写法, 画布渲染完毕关闭兔子
element
.
addEventListener
(
'
mousedown
'
,
mouseDownFunc
);
element
.
addEventListener
(
'
mousemove
'
,
mouseMoveFunc
);
element
.
addEventListener
(
'
mouseup
'
,
mouseUpFunc
);
};
const
removeMouseListener
=
()
=>
{
element
.
removeEventListener
(
'
mousedown
'
,
mouseDownFunc
);
element
.
removeEventListener
(
'
mousemove
'
,
mouseMoveFunc
);
element
.
removeEventListener
(
'
mouseup
'
,
mouseUpFunc
);
};
addMouseListener
();
addTouchListener
();
}
playAudio
(
key
,
now
=
false
,
callback
=
null
)
{
const
audio
=
this
.
audioObj
[
key
];
if
(
audio
)
{
if
(
now
)
{
audio
.
pause
();
audio
.
currentTime
=
0
;
}
if
(
callback
)
{
audio
.
onended
=
()
=>
{
callback
();
};
}
audio
.
play
();
}
}
loadResources
()
{
const
pr
=
[];
this
.
rawImages
.
forEach
((
value
,
key
)
=>
{
// 预加载图片
const
p
=
this
.
preload
(
value
)
.
then
(
img
=>
{
this
.
images
.
set
(
key
,
img
);
})
.
catch
(
err
=>
console
.
log
(
err
));
pr
.
push
(
p
);
});
this
.
rawAudios
.
forEach
((
value
,
key
)
=>
{
// 预加载音频
const
a
=
this
.
preloadAudio
(
value
)
.
then
(()
=>
{
// this.images.set(key, img);
})
.
catch
(
err
=>
console
.
log
(
err
));
pr
.
push
(
a
);
});
return
Promise
.
all
(
pr
);
}
preload
(
url
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
img
=
new
Image
();
// img.crossOrigin = "anonymous";
img
.
onload
=
()
=>
resolve
(
img
);
img
.
onerror
=
reject
;
img
.
src
=
url
;
});
}
}
preloadAudio
(
url
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
audio
=
new
Audio
();
audio
.
oncanplay
=
(
a
)
=>
{
resolve
();
};
audio
.
onerror
=
()
=>
{
reject
();
};
audio
.
src
=
url
;
audio
.
load
();
});
}
renderAfterResize
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
init
();
}
checkClickTarget
(
target
)
{
const
rect
=
target
.
getBoundingBox
();
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
return
true
;
}
return
false
;
}
getWorlRect
(
target
)
{
let
rect
=
target
.
getBoundingBox
();
if
(
target
.
parent
)
{
const
pRect
=
this
.
getWorlRect
(
target
.
parent
);
rect
.
x
+=
pRect
.
x
;
rect
.
y
+=
pRect
.
y
;
}
return
rect
;
}
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
;
}
addUrlToAudioObj
(
key
,
url
=
null
,
vlomue
=
1
,
loop
=
false
,
callback
=
null
)
{
const
audioObj
=
this
.
audioObj
;
if
(
url
==
null
)
{
url
=
key
;
}
this
.
rawAudios
.
set
(
key
,
url
);
const
audio
=
new
Audio
();
audio
.
src
=
url
;
audio
.
load
();
audio
.
loop
=
loop
;
audio
.
volume
=
vlomue
;
audioObj
[
key
]
=
audio
;
if
(
callback
)
{
audio
.
onended
=
()
=>
{
callback
();
};
}
}
addUrlToImages
(
url
)
{
this
.
rawImages
.
set
(
url
,
url
);
}
// ======================================================编写区域==========================================================================
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData
()
{
if
(
!
this
.
data
.
pic_url
)
{
this
.
data
.
pic_url
=
'
assets/play/default/pic.jpg
'
;
this
.
data
.
pic_url_2
=
'
assets/play/default/pic.jpg
'
;
}
}
/**
* 添加预加载图片
*/
initImg
()
{
this
.
addUrlToImages
(
this
.
data
.
pic_url
);
this
.
addUrlToImages
(
this
.
data
.
pic_url_2
);
}
/**
* 添加预加载音频
*/
initAudio
()
{
// 音频资源
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url
);
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url_2
);
// 音效
this
.
addUrlToAudioObj
(
'
click
'
,
this
.
rawAudios
.
get
(
'
click
'
),
0.3
);
}
/**
* 初始化数据
*/
initData
()
{
const
sx
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
const
sy
=
this
.
canvasHeight
/
this
.
canvasBaseH
;
const
s
=
Math
.
min
(
sx
,
sy
);
this
.
mapScale
=
s
;
// this.mapScale = sx;
// this.mapScale = sy;
this
.
renderArr
=
[];
}
/**
* 初始化试图
*/
initView
()
{
this
.
initPic
();
this
.
initBottomPart
();
}
initBottomPart
()
{
const
btnLeft
=
new
MySprite
();
btnLeft
.
init
(
this
.
images
.
get
(
'
btn_left
'
));
btnLeft
.
x
=
this
.
canvasWidth
-
150
*
this
.
mapScale
;
btnLeft
.
y
=
this
.
canvasHeight
-
100
*
this
.
mapScale
;
btnLeft
.
setScaleXY
(
this
.
mapScale
);
this
.
renderArr
.
push
(
btnLeft
);
this
.
btnLeft
=
btnLeft
;
const
btnRight
=
new
MySprite
();
btnRight
.
init
(
this
.
images
.
get
(
'
btn_right
'
));
btnRight
.
x
=
this
.
canvasWidth
-
50
*
this
.
mapScale
;
btnRight
.
y
=
this
.
canvasHeight
-
100
*
this
.
mapScale
;
btnRight
.
setScaleXY
(
this
.
mapScale
);
this
.
renderArr
.
push
(
btnRight
);
this
.
btnRight
=
btnRight
;
}
initPic
()
{
const
maxW
=
this
.
canvasWidth
*
0.7
;
const
pic1
=
new
MySprite
();
pic1
.
init
(
this
.
images
.
get
(
this
.
data
.
pic_url
));
pic1
.
x
=
this
.
canvasWidth
/
2
;
pic1
.
y
=
this
.
canvasHeight
/
2
;
pic1
.
setScaleXY
(
maxW
/
pic1
.
width
);
this
.
renderArr
.
push
(
pic1
);
this
.
pic1
=
pic1
;
const
label1
=
new
Label
();
label1
.
text
=
this
.
data
.
text
;
label1
.
textAlign
=
'
center
'
;
label1
.
fontSize
=
50
;
label1
.
fontName
=
'
BRLNSDB
'
;
label1
.
fontColor
=
'
#ffffff
'
;
pic1
.
addChild
(
label1
);
const
pic2
=
new
MySprite
();
pic2
.
init
(
this
.
images
.
get
(
this
.
data
.
pic_url_2
));
pic2
.
x
=
this
.
canvasWidth
/
2
+
this
.
canvasWidth
;
pic2
.
y
=
this
.
canvasHeight
/
2
;
pic2
.
setScaleXY
(
maxW
/
pic2
.
width
);
this
.
renderArr
.
push
(
pic2
);
this
.
pic2
=
pic2
;
this
.
curPic
=
pic1
;
}
btnLeftClicked
()
{
this
.
lastPage
();
}
btnRightClicked
()
{
this
.
nextPage
();
}
lastPage
()
{
if
(
this
.
curPic
==
this
.
pic1
)
{
return
;
}
this
.
canTouch
=
false
;
const
moveLen
=
this
.
canvasWidth
;
tweenChange
(
this
.
pic1
,
{
x
:
this
.
pic1
.
x
+
moveLen
},
1
);
tweenChange
(
this
.
pic2
,
{
x
:
this
.
pic2
.
x
+
moveLen
},
1
,
()
=>
{
this
.
canTouch
=
true
;
this
.
curPic
=
this
.
pic1
;
});
}
nextPage
()
{
if
(
this
.
curPic
==
this
.
pic2
)
{
return
;
}
this
.
canTouch
=
false
;
const
moveLen
=
this
.
canvasWidth
;
tweenChange
(
this
.
pic1
,
{
x
:
this
.
pic1
.
x
-
moveLen
},
1
);
tweenChange
(
this
.
pic2
,
{
x
:
this
.
pic2
.
x
-
moveLen
},
1
,
()
=>
{
this
.
canTouch
=
true
;
this
.
curPic
=
this
.
pic2
;
});
}
pic1Clicked
()
{
this
.
playAudio
(
this
.
data
.
audio_url
);
}
pic2Clicked
()
{
this
.
playAudio
(
this
.
data
.
audio_url_2
);
}
mapDown
(
event
)
{
if
(
!
this
.
canTouch
)
{
return
;
}
if
(
this
.
checkClickTarget
(
this
.
btnLeft
)
)
{
this
.
btnLeftClicked
();
return
;
}
if
(
this
.
checkClickTarget
(
this
.
btnRight
)
)
{
this
.
btnRightClicked
();
return
;
}
if
(
this
.
checkClickTarget
(
this
.
pic1
)
)
{
this
.
pic1Clicked
();
return
;
}
if
(
this
.
checkClickTarget
(
this
.
pic2
)
)
{
this
.
pic2Clicked
();
return
;
}
}
mapMove
(
event
)
{
}
mapUp
(
event
)
{
}
update
()
{
// ----------------------------------------------------------
this
.
animationId
=
window
.
requestAnimationFrame
(
this
.
update
.
bind
(
this
));
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
// tween 更新动画
TWEEN
.
update
();
// ----------------------------------------------------------
this
.
updateArr
(
this
.
renderArr
);
}
}
}
yarn.lock
0 → 100644
View file @
c3a447fa
This source diff could not be displayed because it is too large. You can
view the blob
instead.
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