Question

在使用测量绘制线时，我在Fabric.Js中遇到此问题。

当我拖动线时，它必须在线的末端或中间显示变化的测量值。

我现在可以测量线的长度，但是以错误的方式显示测量值。请帮忙。感谢..

$(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

用实时测量fabric.js画线

1 个答案: