Question

在调整对象大小时遇到线渲染问题。我已经将线条结尾位置锁定在圆圈上的精确点上，当移动，缩放，旋转等时，我必须编辑连接到当前圆圈的线条。

只是尝试调整圆圈的大小，在某些时候，您会看到渲染会与线条相对应。需要帮助，也许是重新渲染或者其他什么。或者这是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

添加到您的Line对象属性：

objectCaching: false

来自fabricjs文档：

objectCaching：Boolean当true时，对象被缓存在另一个上帆布。自1.7.0以来默认为true

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

1 个答案: