JSFiddle - React, Tailwind, and code Playground

by justme_march

HTML

<div id="draw">
            

        </div>

CSS

#draw{height: 480px;position: absolute;width: 640px;left:0;top:0;}

JavaScript

//容器ID，宽度，高度
         var r = Raphael("draw", 620, 420),
             circleAttr = {fill: "#ccc", stroke: "#999"},
             radius = 5,
             //当前移动的id，方便及时更新points数组信息
             changeID = 0,
             //移动两条线的节点的时候无需改变ox，oy值
             //移动一根线的时候需要变
             oPointNoChange = false,
             _path = [],
             curves = [],
             points = [],
             circles = [],
             controls = [],
             _rect = document.getElementById("draw");
         //绘制矩形
         //x，y，宽度，高度，边角弧度(radius属性)
          r.rect(0,0,619,419,10).attr({stroke:"#666"});
          r.text(310, 20, "Drag the points to change the curves").attr({fill: "#666", "font-size": 16});
          //上一个坐标x，y值；当前坐标x，y值
          var ox,oy,nx,ny,
                moving = false;
        

          function curve(_x,_y){

                  var _temp;
                      
                  if(!ox && !oy){
                      ox = _x,oy=_y;
                      //画圆，坐标x，y，半径
                      _temp = r.circle(ox,oy,radius).attr(circleAttr);
                      //保存
                      circles.push(_temp);

                      controls = r.set(circles);
                      
                      //保存坐标
                      points.push({"x":_x,"y":_y,"id":_temp.id});

                  }else if(ox && oy){
                      nx = _x,ny=_y;
                      _path = [["M",ox,oy],["L",nx,ny]];

                      _temp = r.circle(nx,ny,radius).attr(circleAttr);
                      //保存
                      circles.push(_temp);

                      //画线，保存
                      curves.push(r.path(_path).attr({"color":"hsb(.1, .75, .75)","stroke-width": 2,"stroke-linecap": "round"}));
                      //坐标，保存,id
                      points.push({"x":nx,"y":ny,"id":_temp.id});
                      //画圈，保存
                      controls = r.set(circles);
                  }
                  
              

                 ...