Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
hw_003
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
hw_003
Commits
855bcb2d
Commit
855bcb2d
authored
Feb 20, 2021
by
范雪寒
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: 4个图片选项时错位问题
parent
fb9eb3a6
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
112 additions
and
109 deletions
+112
-109
play.component.ts
src/app/play/play.component.ts
+112
-109
No files found.
src/app/play/play.component.ts
View file @
855bcb2d
import
{
Component
,
ElementRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
}
from
'
@angular/core
'
;
import
{
Component
,
ElementRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
}
from
'
@angular/core
'
;
import
{
getAngleByPos
,
...
...
@@ -17,15 +17,15 @@ import {
ColorSpr
,
removeItemFromArr
,
ShapeRect
,
alphaItem
,
circleMove
,
ShapeCircle
,
Wheel
,
delayCall
,
RichText
,
getMinScale
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
*
as
_
from
'
lodash
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
del
}
from
'
selenium-webdriver/http
'
;
import
{
text
}
from
"
@angular/core/src/render3
"
;
import
{
del
}
from
'
selenium-webdriver/http
'
;
import
{
text
}
from
"
@angular/core/src/render3
"
;
@
Component
({
...
...
@@ -210,7 +210,7 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnInit
()
{
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
getData
((
data
)
=>
{
if
(
data
&&
typeof
data
==
'
object
'
)
{
...
...
@@ -219,7 +219,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
data
=
{};
}
console
.
log
(
'
data:
'
,
data
);
console
.
log
(
'
data:
'
,
data
);
if
(
!
this
.
data
.
contentObj
)
{
this
.
data
.
contentObj
=
{};
}
...
...
@@ -252,7 +252,7 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
!
picArr
||
picArr
.
length
==
0
)
{
const
picArr
=
[];
for
(
let
i
=
0
;
i
<
4
;
i
++
)
{
for
(
let
i
=
0
;
i
<
4
;
i
++
)
{
const
data
=
{
answerId
:
"
1
"
,
...
...
@@ -269,18 +269,18 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
i
%
2
==
0
)
{
data
.
answerType
=
'
A
'
;
answerArr
.
push
(
{
id
:
"
A
"
,
text
:
"
This is option A.
"
},
{
id
:
"
B
"
,
text
:
"
This is option B.
"
},
{
id
:
"
C
"
,
text
:
"
This is option C.
"
},
{
id
:
"
D
"
,
text
:
"
This is option D.
"
},
{
id
:
"
A
"
,
text
:
"
This is option A.
"
},
{
id
:
"
B
"
,
text
:
"
This is option B.
"
},
{
id
:
"
C
"
,
text
:
"
This is option C.
"
},
{
id
:
"
D
"
,
text
:
"
This is option D.
"
},
);
}
else
{
data
.
answerType
=
'
B
'
;
answerArr
.
push
(
{
id
:
"
A
"
,
pic_url
:
"
assets/play/ball_1.png
"
},
{
id
:
"
B
"
,
pic_url
:
"
assets/play/ball_2.png
"
},
{
id
:
"
C
"
,
pic_url
:
"
assets/play/ball_3.png
"
},
{
id
:
"
D
"
,
pic_url
:
"
assets/play/ball_4.png
"
}
{
id
:
"
A
"
,
pic_url
:
"
assets/play/ball_1.png
"
},
{
id
:
"
B
"
,
pic_url
:
"
assets/play/ball_2.png
"
},
{
id
:
"
C
"
,
pic_url
:
"
assets/play/ball_3.png
"
},
{
id
:
"
D
"
,
pic_url
:
"
assets/play/ball_4.png
"
}
);
}
data
[
'
answerArr
'
]
=
answerArr
;
...
...
@@ -488,8 +488,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const
addPicUrl
=
(
url
)
=>
{
if
(
url
)
{
this
.
rawImages
.
set
(
url
,
url
);
}
this
.
rawImages
.
set
(
url
,
url
);
}
};
...
...
@@ -497,8 +497,8 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
arr
)
{
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
addPicUrl
(
arr
[
i
].
pic_url
);
addPicUrl
(
arr
[
i
].
question_pic_url
);
addPicUrl
(
arr
[
i
].
pic_url
);
addPicUrl
(
arr
[
i
].
question_pic_url
);
const
answerArr
=
arr
[
i
].
answerArr
;
for
(
let
j
=
0
;
j
<
answerArr
.
length
;
j
++
)
{
...
...
@@ -530,11 +530,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
init
();
this
.
update
();
}
addServerListener
()
{
const
c
=
(
<
any
>
window
).
courseware
;
const
c
=
(
<
any
>
window
).
courseware
;
if
(
!
c
||
!
c
.
onEvent
)
{
return
;
}
...
...
@@ -876,7 +876,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
answerTitleArr
=
[];
const
picBgW
=
236
;
const
disW
=
(
w
-
picBgW
*
4
)
/
3
;
for
(
let
i
=
0
;
i
<
4
;
i
++
)
{
for
(
let
i
=
0
;
i
<
4
;
i
++
)
{
const
key
=
'
pic_bg_
'
+
keyArr
[
i
];
const
picBg
=
new
MySprite
(
this
.
ctx
);
picBg
.
init
(
this
.
images
.
get
(
key
));
...
...
@@ -1018,8 +1018,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const
saveRect
=
data
.
rect
;
const
item
=
new
ShapeRect
(
this
.
ctx
);
item
.
setSize
(
saveRect
.
width
,
saveRect
.
height
);
item
.
x
=
saveRect
.
x
;
item
.
y
=
saveRect
.
y
;
item
.
x
=
saveRect
.
x
;
item
.
y
=
saveRect
.
y
;
item
[
'
data
'
]
=
data
;
this
.
renderArr
.
push
(
item
);
...
...
@@ -1084,7 +1084,7 @@ export class PlayComponent implements OnInit, OnDestroy {
card
.
data
=
curData
;
this
.
picIndex
++
;
this
.
picIndex
++
;
if
(
this
.
picIndex
>=
this
.
picArr
.
length
)
{
this
.
picIndex
=
0
;
}
...
...
@@ -1253,7 +1253,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
ballArr
=
[];
let
ballId
=
1
;
const
ballLen
=
len
*
1.1
;
const
addAngle
=
Math
.
round
(
360
/
16
*
100
)
/
100
;
const
addAngle
=
Math
.
round
(
360
/
16
*
100
)
/
100
;
let
ballGroupObj
=
{};
for
(
let
i
=
0
;
i
<
16
;
i
++
)
{
...
...
@@ -1264,8 +1264,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const
key
=
'
ball_
'
+
ballId
;
const
ball
=
new
MySprite
(
this
.
ctx
);
ball
.
init
(
this
.
images
.
get
(
key
));
ball
.
x
=
wheel
.
x
;
// - 2;
ball
.
y
=
wheel
.
y
;
// - 5;
ball
.
x
=
wheel
.
x
;
// - 2;
ball
.
y
=
wheel
.
y
;
// - 5;
ball
.
x
+=
pos
.
x
;
ball
.
y
+=
pos
.
y
;
this
.
renderArr
.
push
(
ball
);
...
...
@@ -1282,7 +1282,7 @@ export class PlayComponent implements OnInit, OnDestroy {
ballGroupObj
[
key
].
arr
.
push
(
light
);
ballId
++
;
ballId
++
;
if
(
ballId
>
4
)
{
ballId
=
1
;
}
...
...
@@ -1338,7 +1338,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
arm2
.
page2
.
visible
=
false
;
this
.
picIndex
++
;
this
.
picIndex
++
;
if
(
this
.
picIndex
>=
this
.
picArr
.
length
)
{
this
.
picIndex
=
0
;
...
...
@@ -1864,7 +1864,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const
petal
=
new
MySprite
(
this
.
ctx
);
const
id
=
Math
.
ceil
(
Math
.
random
()
*
3
);
const
id
=
Math
.
ceil
(
Math
.
random
()
*
3
);
petal
.
init
(
this
.
images
.
get
(
'
petal_
'
+
id
));
const
randomS
=
(
Math
.
random
()
*
0.4
+
0.6
)
*
this
.
mapScale
;
...
...
@@ -2039,14 +2039,14 @@ export class PlayComponent implements OnInit, OnDestroy {
const
rateArea
=
0.9
;
const
num
=
this
.
picArr
.
length
;
const
id
=
this
.
getNextItemIndex
();
const
angle
=
360
/
num
;
// this.picArr.length;
const
angle
=
360
/
num
;
// this.picArr.length;
const
targetAngle
=
360
*
4
+
id
*
angle
-
90
-
(
angle
*
(
1
-
rateArea
)
/
2
+
angle
*
rateArea
*
Math
.
random
());
console
.
log
(
'
id:
'
,
id
);
this
.
picIndex
=
id
;
this
.
lightDelayTime
=
0
;
rotateItem
(
this
.
wheel
,
360
*
11
,
2.2
,
()
=>
{
rotateItem
(
this
.
wheel
,
360
*
11
,
2.2
,
()
=>
{
this
.
wheel
.
rotation
=
this
.
wheel
.
rotation
%
360
;
rotateItem
(
this
.
wheel
,
targetAngle
,
1.6
,
()
=>
{
...
...
@@ -2055,7 +2055,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
showAllLight
();
this
.
playAudio
(
'
tip
'
);
moveItem
(
this
.
arrow
,
this
.
arrow
.
x
,
this
.
arrow
.
y
-
20
*
this
.
mapScale
,
0.5
,
(
)
=>
{
moveItem
(
this
.
arrow
,
this
.
arrow
.
x
,
this
.
arrow
.
y
-
20
*
this
.
mapScale
,
0.5
,
()
=>
{
setTimeout
(()
=>
{
this
.
showQuestionWindow
();
...
...
@@ -2067,7 +2067,7 @@ export class PlayComponent implements OnInit, OnDestroy {
});
moveItem
(
this
.
arrow
,
this
.
arrow
.
x
,
this
.
arrow
.
baseY
,
0.3
,
(
)
=>
{
moveItem
(
this
.
arrow
,
this
.
arrow
.
x
,
this
.
arrow
.
baseY
,
0.3
,
()
=>
{
},
TWEEN
.
Easing
.
Cubic
.
Out
);
...
...
@@ -2201,9 +2201,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const
offX
=
-
this
.
questionBg
.
width
/
2
+
75
const
picBgW
=
236
;
const
disW
=
(
w
-
picBgW
*
maxAnswerLength
)
/
3
;
picBg
.
x
=
offX
+
picBg
.
width
/
2
+
i
*
(
picBgW
+
disW
);
picBg
.
x
=
((
i
+
1
)
/
(
maxAnswerLength
+
1
)
-
1
/
2
)
*
(
this
.
questionBg
.
width
);
if
(
maxAnswerLength
==
4
)
{
picBg
.
x
=
offX
+
picBg
.
width
/
2
+
i
*
(
picBgW
+
disW
);
}
else
{
picBg
.
x
=
((
i
+
1
)
/
(
maxAnswerLength
+
1
)
-
1
/
2
)
*
(
this
.
questionBg
.
width
);
}
const
picUrl
=
answerArr
[
i
].
pic_url
;
if
(
picUrl
)
{
...
...
@@ -2283,9 +2286,9 @@ export class PlayComponent implements OnInit, OnDestroy {
const
tx
=
offX
-
(
arm1
.
width
)
*
arm1
.
scaleX
+
this
.
pageOffX
*
arm1
.
scaleX
;
moveItem
(
this
.
arm1
,
tx
,
arm1
.
y
,
0.8
,
()
=>
{
this
.
canTouch
=
true
;
this
.
clickLeft
();
}
);
this
.
canTouch
=
true
;
this
.
clickLeft
();
});
}
moveArm2
()
{
...
...
@@ -2298,9 +2301,9 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
canTouch
=
false
;
moveItem
(
arm2
,
this
.
canvasWidth
-
tx
,
arm2
.
y
,
0.8
,
()
=>
{
this
.
canTouch
=
true
;
this
.
clickRight
();
}
);
this
.
canTouch
=
true
;
this
.
clickRight
();
});
}
...
...
@@ -2324,7 +2327,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const
down
=
()
=>
{
const
targetY
=
this
.
stick
.
y
+
this
.
stick
.
height
;
tweenChange
(
this
.
ball
,
{
y
:
targetY
},
0.8
,
()
=>
{
tweenChange
(
this
.
ball
,
{
y
:
targetY
},
0.8
,
()
=>
{
up
();
},
TWEEN
.
Easing
.
Quadratic
.
In
,
()
=>
{
this
.
stick
.
scaleY
=
(
this
.
stick
.
y
-
this
.
ball
.
y
)
/
this
.
stick
.
height
;
...
...
@@ -2338,7 +2341,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const
up
=
()
=>
{
const
targetY
=
this
.
stick
.
y
-
this
.
stick
.
height
;
tweenChange
(
this
.
ball
,
{
y
:
targetY
},
0.8
,
()
=>
{
tweenChange
(
this
.
ball
,
{
y
:
targetY
},
0.8
,
()
=>
{
this
.
canTouch
=
true
;
},
TWEEN
.
Easing
.
Quadratic
.
Out
,
()
=>
{
this
.
stick
.
scaleY
=
(
this
.
stick
.
y
-
this
.
ball
.
y
)
/
this
.
stick
.
height
;
...
...
@@ -2377,7 +2380,7 @@ export class PlayComponent implements OnInit, OnDestroy {
showItem
(
curPic
);
hideItem
(
this
.
mask
);
this
.
picIndex
++
;
this
.
picIndex
++
;
if
(
this
.
picIndex
>=
this
.
picArr
.
length
)
{
this
.
picIndex
=
0
;
}
...
...
@@ -2475,19 +2478,19 @@ export class PlayComponent implements OnInit, OnDestroy {
this
.
canTouch
=
false
;
const
data
=
{
y
:
this
.
arm1
.
y
};
const
tween
=
tweenChange
(
data
,
{
y
:
this
.
arm1
.
y
+
this
.
canvasHeight
},
1
,
const
data
=
{
y
:
this
.
arm1
.
y
};
const
tween
=
tweenChange
(
data
,
{
y
:
this
.
arm1
.
y
+
this
.
canvasHeight
},
1
,
()
=>
{
this
.
canTouch
=
true
;
this
.
resetArm
();
},
this
.
canTouch
=
true
;
this
.
resetArm
();
},
TWEEN
.
Easing
.
Quadratic
.
In
,
(
item
,
progress
)
=>
{
this
.
arm1
.
y
=
item
.
y
;
this
.
arm2
.
y
=
item
.
y
;
this
.
arm1
.
y
=
item
.
y
;
this
.
arm2
.
y
=
item
.
y
;
});
});
}
...
...
@@ -2548,82 +2551,82 @@ export class PlayComponent implements OnInit, OnDestroy {
if
(
this
.
IsPC
())
{
if
(
this
.
IsPC
())
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapDown
(
event
);
});
setMxMyByMouse
(
event
);
this
.
mapDown
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousemove
'
,
(
event
)
=>
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousemove
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapMove
(
event
);
});
setMxMyByMouse
(
event
);
this
.
mapMove
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapUp
(
event
);
});
setMxMyByMouse
(
event
);
this
.
mapUp
(
event
);
});
const
setMxMyByMouse
=
(
event
)
=>
{
const
setMxMyByMouse
=
(
event
)
=>
{
this
.
mx
=
event
.
offsetX
;
this
.
my
=
event
.
offsetY
;
};
this
.
mx
=
event
.
offsetX
;
this
.
my
=
event
.
offsetY
;
};
}
else
{
}
else
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchstart
'
,
(
event
)
=>
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchstart
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapDown
(
event
);
});
setMxMyByTouch
(
event
);
this
.
mapDown
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchmove
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapMove
(
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
(
'
touchend
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapUp
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchcancel
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapUp
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchcancel
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapUp
(
event
);
});
const
setMxMyByTouch
=
(
event
)
=>
{
const
setMxMyByTouch
=
(
event
)
=>
{
// console.log('in setMxMyByTouch', event);
if
(
event
.
touches
.
length
<=
0
)
{
return
;
}
// console.log('in setMxMyByTouch', event);
if
(
event
.
touches
.
length
<=
0
)
{
return
;
}
if
(
this
.
canvasLeft
==
null
)
{
setParentOffset
();
}
if
(
this
.
canvasLeft
==
null
)
{
setParentOffset
();
}
this
.
mx
=
event
.
touches
[
0
].
pageX
-
this
.
canvasLeft
;
this
.
my
=
event
.
touches
[
0
].
pageY
-
this
.
canvasTop
;
};
this
.
mx
=
event
.
touches
[
0
].
pageX
-
this
.
canvasLeft
;
this
.
my
=
event
.
touches
[
0
].
pageY
-
this
.
canvasTop
;
};
const
setParentOffset
=
()
=>
{
const
setParentOffset
=
()
=>
{
const
rect
=
this
.
canvas
.
nativeElement
.
getBoundingClientRect
();
this
.
canvasLeft
=
rect
.
left
;
this
.
canvasTop
=
rect
.
top
;
};
}
const
rect
=
this
.
canvas
.
nativeElement
.
getBoundingClientRect
();
this
.
canvasLeft
=
rect
.
left
;
this
.
canvasTop
=
rect
.
top
;
};
}
...
...
@@ -2771,7 +2774,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const
x
=
Math
.
sin
(
radian
)
*
len
;
const
y
=
Math
.
cos
(
radian
)
*
len
;
return
{
x
,
y
};
return
{
x
,
y
};
}
...
...
@@ -2779,7 +2782,7 @@ export class PlayComponent implements OnInit, OnDestroy {
const
_x
=
ex
-
sx
;
const
_y
=
ey
-
sy
;
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
}
...
...
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