Кривая Безье с использованием холста Fabri cJS или HTML - PullRequest
Новая
       107

Кривая Безье с использованием холста Fabri cJS или HTML

0 голосов
/ 28 апреля 2020

Я хочу нарисовать кривую Безье, которая соединяет два узла. Хотите реализовать это, используя события мыши в HTML Canvas или Fabri cJS, например: https://i.stack.imgur.com/CHreS.png

До сих пор я мог реализовать это ( приведено ниже), в котором dr aws первая кривая, но когда я пытаюсь нарисовать вторую кривую, она стирает первую. 

import React, {Component} from 'react';
class CurveBoard extends Component{


  componentDidMount(){
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#ac0000';

    let isDrawing = false;
    let startX, startY, x2, y2;
    let endX = 0;
    let endY = 0;
    canvas.addEventListener("mousedown", (e) => {
        isDrawing = true;
        [startX, startY] = [e.offsetX, e.offsetY];
    })

    canvas.addEventListener("mousemove", (e) => {
        if(isDrawing){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            [endX, endY] = [e.offsetX, e.offsetY]
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.strokeStyle = "black";
            ctx.quadraticCurveTo(20, 10, endX, endY);
            ctx.stroke();
        }

    })

    canvas.addEventListener("mouseup", (e) => {
        isDrawing = false;
    })

  }

  render(){
    return (
        <div>
            <canvas id="c" width="1000px" height="1000px"/>
        </div>
    );
  }
}

export default CurveBoard;
...