用實時測量畫出線條fabric.js

Question

我在繪製線條時遇到了Fabric.Js中的這個問題。

當我拖動線條時，它必須在線條的末端或中間顯示更改的測量。

我現在可以測量線的長度，但以錯誤的方式顯示測量結果。請幫忙。謝謝..

繼承人的小提琴鏈接：http://jsfiddle.net/ydtt94zm/

$(function(){ 
    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 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){ 
     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); 
      var text = new fabric.Text('Length ' + px, { left: endx[temp], top: endy[temp], fontSize: 12 });  

      canvas.add(text); 
      if(canvas.getActiveObject().get('type')==="text") 
      { 
       canvas.remove(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(); 
    });   

    $("#selec").click(function(){   
     if(trigger == "1"){ 
      trigger = "0";    
     }else{ 
      trigger = "1"; 
     }   
    }); 

    var Calculate={ 
     lineLength:function(x1, y1, x2,y2){//線長  
      //console.log(x1 + ", "+ y1 +", " + x2 + ", " + y2); 
      //clearRect(x2, y2); 
      return Math.sqrt(Math.pow(x2*1-x1*1, 2)+Math.pow(y2*1-y1*1, 2)); 
     } 
    } 


}); 

Answer 1

您需要重新添加刪除文本元素。

canvas.remove(text); 

檢查此更新fiddler