Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
J
JM_4-1
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
JM_4-1
Commits
ca9d44f4
Commit
ca9d44f4
authored
Sep 18, 2021
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 滚动条
parent
def3657a
Changes
3
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
557 additions
and
36 deletions
+557
-36
form.component.html
src/app/form/form.component.html
+1
-1
Unit.ts
src/app/play/Unit.ts
+277
-0
play.component.ts
src/app/play/play.component.ts
+279
-35
No files found.
src/app/form/form.component.html
View file @
ca9d44f4
...
@@ -33,7 +33,7 @@
...
@@ -33,7 +33,7 @@
</div>
</div>
<div
*
ngIf=
"item.sentenceArr && item.sentenceArr.length < 4"
>
<div>
<button
nz-button
nzType=
"dashed"
(
click
)="
addBtnClick
()"
style=
"width: 200px; height: 50px;"
>
<button
nz-button
nzType=
"dashed"
(
click
)="
addBtnClick
()"
style=
"width: 200px; height: 50px;"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
...
...
src/app/play/Unit.ts
View file @
ca9d44f4
...
@@ -310,6 +310,8 @@ export class MySprite extends Sprite {
...
@@ -310,6 +310,8 @@ export class MySprite extends Sprite {
child
.
alpha
=
this
.
alpha
;
child
.
alpha
=
this
.
alpha
;
}
}
child
.
ctx
=
this
.
ctx
;
}
}
removeChild
(
child
)
{
removeChild
(
child
)
{
const
index
=
this
.
children
.
indexOf
(
child
);
const
index
=
this
.
children
.
indexOf
(
child
);
...
@@ -2002,6 +2004,281 @@ export class MyVideo extends MySprite {
...
@@ -2002,6 +2004,281 @@ export class MyVideo extends MySprite {
export
class
ScrollView
extends
MySprite
{
static
ScrollSideType
=
{
VERTICAL
:
'
VERTICAL
'
,
HORIZONTAL
:
'
HORIZONTAL
'
,
}
_offCtx
;
_offCanvas
;
_scrollBar
;
content
;
bgColor
;
barColor
=
'
#fbe9b7
'
scrollSide
=
ScrollView
.
ScrollSideType
.
VERTICAL
;
scorllBarWidth
;
scrollBarHeight
;
constructor
(
ctx
=
null
)
{
super
(
ctx
);
this
.
_createOffCtx
();
this
.
_createScrollBar
();
}
_createOffCtx
()
{
if
(
!
this
.
_offCtx
)
{
this
.
_offCanvas
=
document
.
createElement
(
'
canvas
'
);
// 创建一个新的canvas
this
.
_offCanvas
.
width
=
this
.
width
;
// 创建一个正好包裹住一个粒子canvas
this
.
_offCanvas
.
height
=
this
.
height
;
this
.
_offCtx
=
this
.
_offCanvas
.
getContext
(
'
2d
'
);
this
.
content
=
new
MySprite
(
this
.
_offCtx
);
}
}
_createScrollBar
()
{
this
.
_scrollBar
=
new
ShapeRectNew
();
this
.
_scrollBar
.
anchorY
=
0
;
this
.
_scrollBar
.
anchorX
=
1
;
this
.
_scrollBar
.
setSize
(
10
,
100
,
5
);
this
.
_scrollBar
.
fillColor
=
this
.
barColor
;
this
.
addChild
(
this
.
_scrollBar
);
}
setBgColor
(
color
)
{
this
.
bgColor
=
color
;
}
setShowSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
height
=
h
;
if
(
this
.
content
.
width
<
this
.
width
)
{
this
.
content
.
width
=
this
.
_offCanvas
.
width
=
this
.
width
;
}
if
(
this
.
content
.
height
<
this
.
height
)
{
this
.
content
.
height
=
this
.
_offCanvas
.
height
=
this
.
height
;
}
this
.
refreshScrollBar
();
}
setContentSize
(
w
,
h
)
{
this
.
content
.
width
=
w
;
this
.
content
.
height
=
h
;
this
.
_offCanvas
.
width
=
w
;
this
.
_offCanvas
.
height
=
h
;
}
addItem
(
sprite
)
{
this
.
content
.
addChild
(
sprite
);
sprite
.
ctx
=
this
.
_offCtx
;
this
.
refreshContentSize
();
}
refreshContentSize
()
{
const
children
=
this
.
content
.
children
;
console
.
log
(
'
children:
'
,
children
);
let
maxW
=
0
;
let
maxH
=
0
;
for
(
let
i
=
0
;
i
<
children
.
length
;
i
++
)
{
if
(
children
[
i
]
==
this
.
content
)
{
continue
;
}
const
box
=
children
[
i
].
getBoundingBox
();
console
.
log
(
'
box:
'
,
box
);
const
boxEdgeX
=
box
.
x
+
box
.
width
;
const
boxEdgeY
=
box
.
y
+
box
.
height
;
console
.
log
(
'
boxEdgeY:
'
,
boxEdgeY
);
if
(
boxEdgeX
>
maxW
)
{
maxW
=
boxEdgeX
;
}
if
(
boxEdgeY
>
maxH
)
{
maxH
=
boxEdgeY
;
}
}
console
.
log
(
'
maxW:
'
,
maxW
);
console
.
log
(
'
maxH:
'
,
maxH
);
this
.
content
.
width
=
maxW
;
this
.
content
.
height
=
maxH
;
this
.
refreshScrollBar
();
}
setScrollBarSize
(
w
,
h
)
{
this
.
scorllBarWidth
=
w
;
this
.
scrollBarHeight
=
h
;
}
setContentScale
(
s
)
{
this
.
content
.
setScaleXY
(
1
/
s
);
}
refreshScrollBar
()
{
let
w
=
this
.
scorllBarWidth
;
if
(
!
w
)
{
w
=
this
.
width
/
50
;
}
let
rate
=
this
.
height
*
this
.
scaleY
/
this
.
content
.
height
/
this
.
content
.
scaleY
;
if
(
rate
>=
1
)
{
this
.
_scrollBar
.
visible
=
false
;
rate
=
1
;
}
else
{
this
.
_scrollBar
.
visible
=
true
;
}
const
h
=
rate
*
this
.
height
const
r
=
w
/
2
;
this
.
_scrollBar
.
setSize
(
w
,
h
,
r
);
this
.
_scrollBar
.
x
=
this
.
width
;
}
refreshScrollBarPos
()
{
this
.
_scrollBar
.
y
=
-
this
.
content
.
y
*
(
this
.
height
/
this
.
content
.
height
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
_offScreenRender
();
}
touchStartPos
;
touchStartContentPos
;
onTouchStart
(
x
,
y
)
{
if
(
!
this
.
_scrollBar
.
visible
)
{
return
;
}
this
.
touchStartPos
=
{
x
,
y
};
this
.
touchStartContentPos
=
{
x
:
this
.
content
.
x
,
y
:
this
.
content
.
y
};
}
onTouchMove
(
x
,
y
)
{
if
(
!
this
.
touchStartPos
)
{
return
;
}
if
(
!
this
.
touchStartContentPos
)
{
return
;
}
const
offsetX
=
x
-
this
.
touchStartPos
.
x
;
const
offsetY
=
y
-
this
.
touchStartPos
.
y
;
if
(
this
.
scrollSide
==
ScrollView
.
ScrollSideType
.
VERTICAL
)
{
this
.
content
.
y
=
between
(
this
.
touchStartContentPos
.
y
+
offsetY
,
0
,
this
.
getBoundingBox
().
height
-
this
.
content
.
height
);
}
else
{
this
.
content
.
x
=
between
(
this
.
touchStartContentPos
.
x
+
offsetX
,
0
,
this
.
getBoundingBox
().
width
-
this
.
content
.
width
);
}
this
.
refreshScrollBarPos
();
}
onTouchEnd
(
x
,
y
)
{
this
.
touchStartPos
=
null
;
this
.
touchStartContentPos
=
null
;
}
onWheelUp
(
offsetY
)
{
if
(
!
this
.
_scrollBar
.
visible
)
{
return
;
}
if
(
this
.
scrollSide
==
ScrollView
.
ScrollSideType
.
VERTICAL
)
{
this
.
content
.
y
=
between
(
this
.
content
.
y
+
40
,
0
,
this
.
getBoundingBox
().
height
-
this
.
content
.
height
);
}
else
{
this
.
content
.
x
=
between
(
this
.
content
.
x
+
40
,
0
,
this
.
getBoundingBox
().
width
-
this
.
content
.
width
);
}
this
.
refreshScrollBarPos
();
}
onWheelDown
(
offsetY
)
{
if
(
!
this
.
_scrollBar
.
visible
)
{
return
;
}
if
(
this
.
scrollSide
==
ScrollView
.
ScrollSideType
.
VERTICAL
)
{
this
.
content
.
y
=
between
(
this
.
content
.
y
-
40
,
0
,
this
.
getBoundingBox
().
height
-
this
.
content
.
height
);
}
else
{
this
.
content
.
x
=
between
(
this
.
content
.
x
-
40
,
0
,
this
.
getBoundingBox
().
width
-
this
.
content
.
width
);
}
this
.
refreshScrollBarPos
();
}
setContentSpr
()
{
}
_offScreenRender
()
{
this
.
_offCtx
.
save
();
this
.
_offCtx
.
clearRect
(
0
,
0
,
this
.
_offCanvas
.
width
,
this
.
_offCanvas
.
height
);
if
(
this
.
bgColor
)
{
this
.
_offCtx
.
fillStyle
=
this
.
bgColor
;
this
.
_offCtx
.
fillRect
(
this
.
_offX
,
this
.
_offY
,
this
.
width
,
this
.
height
);
this
.
_offCtx
.
globalCompositeOperation
=
"
source-atop
"
;
}
else
{
this
.
_offCtx
.
fillStyle
=
'
#ffffff
'
this
.
_offCtx
.
fillRect
(
this
.
_offX
,
this
.
_offY
,
this
.
width
,
this
.
height
);
this
.
_offCtx
.
globalCompositeOperation
=
"
xor
"
;
}
this
.
content
.
update
();
this
.
ctx
.
drawImage
(
this
.
_offCanvas
,
this
.
_offX
,
this
.
_offY
);
// this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
// this.ctx.drawImage(this._offCanvas, this._offX, this._offY, this.content.width, this.content.height, this._offX + this.content.x, this._offY + this.content.y, this.width, this.height);
this
.
_offCtx
.
restore
();
}
}
export
function
between
(
a
,
b
,
c
)
{
return
[
a
,
b
,
c
].
sort
((
x
,
y
)
=>
x
-
y
)[
1
];
}
// --------------- custom class --------------------
// --------------- custom class --------------------
src/app/play/play.component.ts
View file @
ca9d44f4
This diff is collapsed.
Click to expand it.
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