调整对象大小时的Fabric.js线渲染

Question

Have an issue with line rendering when resizing object. I've locked line endings positions to exact point on circles and when moving, scaling, rotating etc I have to edit lines connected to current circle.

Here is fiddle

Just try to resize circles and at some point you'll see that rendering is crashed a bit which corresponds to lines. Need a help for it, maybe rerender or something. Or that's an issue of fabric.js

  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

Add to your Line object property:

objectCaching: false

From fabricjs documentation:

objectCaching :Boolean When true , object is cached on an additional canvas. default to true since 1.7.0