オブジェクトのサイズ変更時のFabric.jsラインレンダリング

Question

オブジェクトのサイズ変更時にラインレンダリングに問題があります。 円の終点位置を円上の正確な点に固定しました。移動、拡大縮小、回転などのときは、現在の円に接続された線を編集する必要があります。

Here is fiddle

ただ、円のサイズを変更すると、いくつかの点であなたはレンダリングがラインに対応するビットをクラッシュしていることがわかりますしてみてください。それを助けが必要なのかもしれません。 それともそれはあなたのラインオブジェクトのプロパティに追加

var circlesData = [{ 
    id: 1, 
    x: 80, 
    y: 80, 
    r: 60 
    }, { 
    id: 2, 
    x: 440, 
    y: 190, 
    r: 90 
    }]; 
    var connectionsData = [{ 
    from: {id: 1, angle: 0, rdist: .8}, 
    to: {id: 2, angle: 0, rdist: .4}, 
    }] 

    var fcircles = []; 
    var fconnections = []; 
    var fcanvas; 
    init(); 

    function init() { 
    fcanvas = new fabric.Canvas('c', { 
     imageSmoothingEnabled: false, 
     allowTouchScrolling: true, 
    }); 
    fcanvas.preserveObjectStacking = true; 
    fcanvas.selection = false; 
    fcanvas.setBackgroundColor('#fff'); 
    fcircles = circlesData.map(function(circleData) { 
     var circle = new fabric.Circle({ 
     left: circleData.x, 
     top: circleData.y, 
     radius: circleData.r, 
     fill: 'rgba(100,100,255,0.2)', 
     originX: 'center', 
     originY: 'center' 
     }); 
     circle.initialData = circleData; 
     circle.setControlsVisibility({ 
      mt: false, 
      mb: false, 
      ml: false, 
      mr: false, 
      mtr: false, 
     }); 
     return circle; 
    }); 
    fconnections = connectionsData.map(function(connectionData) { 
     var line = new fabric.Line([0,0,0,0], { 
     strokeWidth: 6, 
     strokeLineCap: 'round', 
     fill: 'red', 
     stroke: 'red', 
     originX: 'center', 
     originY: 'center' 
     }); 
     line.from = copyJson(connectionData.from); 
     line.to = copyJson(connectionData.to); 
     line.selectable = false; 
     return line; 
    }); 
    fcircles.concat(fconnections).forEach(function(fobj){ 
     fcanvas.add(fobj) 
    }); 
    updateConnections(fconnections); 
    fcanvas.renderAll(); 
    console.log(fcanvas.getObjects()) 
    fcanvas.on('object:moving', onObjChange); 
    fcanvas.on('object:scaling', onObjChange); 
    fcanvas.on('object:rotating', onObjChange); 
    } 

    function onObjChange(e) { 
    if(['line'].indexOf(e.target.type) > -1) { 
     return; 
    } 
    var circle = e.target; 
    updateConnections(fconnections.filter(function(fconnection){ 
     return fconnection.from.id === e.target.initialData.id || fconnection.to.id === e.target.initialData.id; 
    })) 
    } 
    function updateConnections(fconnections) { 
    fconnections.forEach(function(fconnection) { 
     var from = fcircles.filter(function(c){return c.initialData.id === fconnection.from.id})[0]; 
     var to = fcircles.filter(function(c){return c.initialData.id === fconnection.to.id})[0]; 
     var fromAngle = fconnection.from.angle - from.angle/180 * Math.PI; 
     var toAngle = fconnection.to.angle - from.angle/180 * Math.PI; 
     debugger; 
     fconnection.set({ 
     x1: from.left + fconnection.from.rdist * from.radius * Math.cos(fromAngle), 
     y1: from.top + fconnection.from.rdist * from.radius * Math.sin(fromAngle), 
     x2: to.left + fconnection.to.rdist * to.radius * Math.cos(toAngle), 
     y2: to.top + fconnection.to.rdist * to.radius * Math.sin(toAngle) 
     }); 
     fconnection.setCoords(); 
    }); 
    } 

    function copyJson(obj) { 
    return JSON.parse(JSON.stringify(obj)); 
    } 

Answer 1

fabric.jsの問題です：

objectCaching: false 

fabricjsドキュメントから：

objectCaching：ブールtrue、オブジェクトが上のキャッシュされています追加の キャンバス。 1.7.0以降のデフォルトはtrue