react 鼠标移入放大_ReactJS鼠标移动|触摸移动事件处理

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

class Drawing extends React.Component {

constructor(props) {

super(props);

this.state = {

points: []

};

}

move(evt) {

if (evt.target.tagName.toLowerCase() === 'svg') {

evt.preventDefault();

var svgPos = this.refs.svg.getBoundingClientRect();

var x = evt.clientX,

y = evt.clientY;

if (evt.type==='touchmove') {

x = evt.touches[0].pageX,

y = evt.touches[0].pageY;

}

x = x - svgPos.left;

y = y - svgPos.top;

var points = this.state.points;

if (points.length > 50) {

points.shift();

}

points.push({

x: x,

y: y

});

this.setState(points);

}

}

render() {

var points = ;

if (this.state.points.length > 0) {

var allPoints = this.state.points,

d = '';

points = allPoints.map(function(point, i) {

var last = (i === allPoints.length - 1);

var first = (i === 0);

if (first) {

d += 'M ';

}

d += ' ' + point.x + ' ' + point.y;

if (first) {

d += ' L ';

}

if (last) {

return

};

});

}

return (

{points}

)

}

}

ReactDOM.render(

, document.querySelector('.app'));