Прямая линия с событиями мыши в Reactjs - PullRequest
Новая
       32

Прямая линия с событиями мыши в Reactjs

0 голосов
/ 20 марта 2020

Я работаю над достижением прямой линии с событиями мыши.

Требуется следующее: при первом двойном щелчке линия должна быть активирована, и при перемещении мыши должна быть достигнута прямая линия, при следующем двойном щелчке линия должна заканчиваться.

С помощью следующего кода я могу добиться рисовать на ход мыши.

Но, как я могу достичь прямой линии при движении мыши?

Помощь будет принята с благодарностью. 

import React from 'react';
import "./line.scss";
import Immutable from 'immutable';
var double=0;

export class DrawArea extends React.Component{
    constructor() {
        super();
        this.state = {
          isDrawing: false,
          lines: new Immutable.List(),
        };
        //this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        //this.handleMouseUp = this.handleMouseUp.bind(this);
        this.handleDoubleClick=this.handleDoubleClick.bind(this);
    }

    componentDidMount() {
        document.addEventListener('dblclick', this.handleDoubleClick);

    }

    componentWillUnmount() {
        document.removeEventListener('dblclick', this.handleDoubleClick);
    }

    handleDoubleClick(mouseEvent) {
        //console.log("Double click")
        double++;
        if(double%2!=0)
        {
            /*if (mouseEvent.button !== 0) 
            {
                return;
            }
            */
            const point = this.relativeCoordinatesForEvent(mouseEvent);
            console.log(point)
            this.setState(prevState => {
                return {
                    lines: prevState.lines.push(Immutable.List([point])),
                    isDrawing: true,
                };
            });
        }
        else if(double%2==0)
        {
            this.setState({ isDrawing: false });
        }
    }

    relativeCoordinatesForEvent(mouseEvent) {
        const boundingRect = this.refs.drawArea.getBoundingClientRect();
        return new Immutable.Map({
            x: mouseEvent.clientX - boundingRect.left,
            y: mouseEvent.clientY - boundingRect.top,
        });
    }

    handleMouseMove(mouseEvent) {
        //console.log("Mouse move")
        if (!this.state.isDrawing) {
          return;
        }
        const point = this.relativeCoordinatesForEvent(mouseEvent);
        this.setState(prevState => {
        return {
            lines: prevState.lines.updateIn([prevState.lines.size-1], line => line.push(point)),

        };

    });  
}

    handleMouseUp() {
        this.setState({ isDrawing: false });
    }

    render() {
        return (
            <div className="drawArea" 
                ref="drawArea" 
                onDoubleClick={this.handleMouseDown} 
                onMouseMove={this.handleMouseMove}
            >
                <Drawing lines={this.state.lines} />
            </div>
        );
    }
}

function Drawing({ lines }) {
    return (
        <svg className="drawing">
            {lines.map((line, index) => (
                <DrawingLine key={index} line={line} />
            ))}
        </svg>
    );
}

function DrawingLine({ line }) {
    const pathData = "M " +
      line
        .map(p => {
          return `${p.get('x')} ${p.get('y')}`;
        })
        .join(" L ");

    return <path className="path" d={pathData} />;
}
...