fabric.js Group members' properties don't update?

StackOverflow https://stackoverflow.com/questions/23548608

  •  18-07-2023
  •  | 
  •  

Question

I'm using fabric.js to create objects on a canvas. I have a couple of objects together in a Group. When the group is selected, an event is triggered, which creates and adds a circle, centered at the end of a line. When a selection is cleared, another event is triggered, which removes the circle.

What I don't understand is why the circle doesn't change position to the line's new end point, when I move the group, deselect it, and then re-select it.

<html>
  <head>
    <script type="text/javascript" src="path/to/fabric.1.4.5.js"></script>
  </head>
  <body>
    <canvas id="c" width="800" height="600"></canvas>
    <script type="text/javascript">
      fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
      var canvas = new fabric.Canvas('c');
      var circle;

      var text = new fabric.Text('hello world', {
        fontSize: 30,
        originX: 'left',
        originY: 'top',
        left: 25,
        top: 30
      });

      var line = new fabric.Line([10,10, 100,100], {
        stroke: 'green',
        strokeWidth: 2
      });

      var group = new fabric.Group([line, text], {
      });

      group.on('selected', function() {
        circle = new fabric.Circle({
          strokeWidth: 5,
          radius: 28,
          fill: 'rgba(200,200,200,0.4)',
          stroke: '#666',
          left: line.get('x2'),
          top: line.get('y2')
        })
        canvas.add(circle);
      });

      canvas.add(group);
      canvas.renderAll();

      canvas.on('selection:cleared', function () {
        group._objects.length = 2;      
        canvas.remove(circle);
      });

    </script>
  </body>
</html>

Here's the same code on jsFiddle: http://jsfiddle.net/Tqmdw/

Was it helpful?

Solution

The position of your line actually doesn't change. Have a look at the groups tutorial. http://fabricjs.com/fabric-intro-part-3/#groups. In a group items are positioned relative to the groups center and the group is handled as a single entity. That means moving the group will only update the groups top and left position. You can use these new top/left values and calculate the endpoint of the line. 

group.on('selected', function() {
    circle = new fabric.Circle({
        strokeWidth: 5,
        radius: 28,
        fill: 'rgba(200,200,200,0.4)',
        stroke: '#666',
        left: group.left + line.get('x2'),,
        top: group.top + line.get('y2'),
    })
    canvas.add(circle);
});

I created an updated fiddle: http://jsfiddle.net/2e9B9/5/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top