CODEWITHSUNDEEP
javascriptfabricjs
Danylo Gudz
Danylo Gudz

Reputation: 2656

Fabric.js line rendering when resizing object

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));
  }

Upvotes: 1

Views: 892

Answers (1)

Observer
Observer

Reputation: 3706

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

Upvotes: 3

Related Questions