JSFiddle - React, Tailwind, and code Playground

by brightertools

HTML

<canvas id="canvas" width="600" height="600"></canvas>

CSS

canvas{border: 1px solid red; }

JavaScript

var line, isDown;
		var arr = new Array();
		var startx = new Array();
		var endx = new Array();
		var starty = new Array();
		var endy = new Array();
		var temp = 0;
		var graphtype; trigger = "1";
        var text;
				 
        var canvas = this.__canvas = new fabric.Canvas('canvas', {  hoverCursor: 'pointer',selection: false});     
		fabric.Object.prototype.transparentCorners = false;      		
					
		canvas.on('mouse:down', function(o){			
			if(trigger=="1"){
				 isDown = true;
				 var pointer = canvas.getPointer(o.e);

				 var points = [pointer.x, pointer.y, pointer.x, pointer.y];
				 startx[temp] = pointer.x;
				 starty[temp] = pointer.y;
				 line = new fabric.Line(points, {
					 strokeWidth: 2,			
					 stroke: 'red',
					 originX: 'center',
					 originY: 'center'					
				 });
				 canvas.add(line);
			}else{		
				canvas.forEachObject(function(o){ 
					o.setCoords(); 
					
				});
			}			
		});

		canvas.on('mouse:move', function(o){
            canvas.remove(text);
            canvas.renderAll();
			if (!isDown) return;
			var pointer = canvas.getPointer(o.e);
			line.set({ x2: pointer.x, y2: pointer.y });
			
			endx[temp] = pointer.x;
			endy[temp] = pointer.y;		
            
            
            
			if(trigger=="1"){
				var px = Calculate.lineLength(startx[temp], starty[temp], endx[temp], endy[temp]).toFixed(2);	
				text = new fabric.Text('Length ' + px, { left: endx[temp], top: endy[temp], fontSize: 12 });					
				canvas.add(text);				
			}
			
			canvas.renderAll();
		});	
 
		
		canvas.on('mouse:up', function(o){
			 var pointer = canvas.getPointer(o.e);			
			 isDown = false;			
				
		});
		
		canvas.on('mouse:over', function(e) {			
			e.target.setStroke('blue');
			canvas.renderAll();
		});
		
		canvas.on('mouse:out', function(e) {			
			e.target.setStroke('red');
			canvas.renderAll();
		});   
		
		var Calculate={
			lineLength:function(x1, y1, x2,y2){//线长    
				//console.log(x1 + ", "+ y1 +", " + x2 + ", " +...