-
Notifications
You must be signed in to change notification settings - Fork 0
/
MouseTrace.js
33 lines (29 loc) · 906 Bytes
/
MouseTrace.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';
class MouseTrace extends Component {
constructor(props) {
super(props);
this.points = [];
this.state = {plPoints: ""};
}
mouseMove(e) {
this.pushCoord(e.clientX, e.clientY)
}
pushCoord(x, y) {
this.points.push([x, y]);
if (this.points.length > this.props.n) {
this.points.shift();
}
this.setState({
plPoints: this.points.reduce((s, pair) => s+=(','+pair.join(',')))
});
}
render() {
return (
<svg width="100%" height="100%" style={{position:"absolute", zIndex:5000, top:0, left:0, height:"100%", width:"100%"}}
onMouseMove={this.mouseMove.bind(this)}>
<polyline fill="none" stroke="red" points={this.state.plPoints}/>
</svg>
);
}
}
export default MouseTrace;