FabricJs FlipX FlipY testing

Fliping X and Y grouped object

by Keyur Patel

HTML

<h1>FabricJs flipX and flipY work differently than I expected</h1>
<h2>They don't take into account any orientation changes of an object, like angle</h2>
<canvas id="c" width="600" height="300"></canvas>
<button id="flipY">flipY</button>
<button id="flipX">flipX</button>
<button id="flipYTri">flipY Triangle</button>

JavaScript

(function() {
    // Code from FabricJs tutorial - http://fabricjs.com/fabric-intro-part-1/#objects
    var canvas = new fabric.Canvas('c');
    
    // create a rectangle object
    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 80,
      height: 40
    });
    
    var triangle = new fabric.Triangle({
      left: 100,
      top: 100,
      width: 40,
      height: 40,
      fill: 'blue'
    });
    
    var group = new fabric.Group([ rect, triangle ], {
      left: 150,
      top: 100,
      lockScalingFlip:true
    });
    
    // "add" rectangle onto canvas
    //canvas.add(rect);
    canvas.add(group);
    
    
    //rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
    //rect.set('angle', 15).set('flipY', true); // doesn't work
    group.set('flipX', true);
    canvas.renderAll(); // this wasn't mentioned in the tutorial, but I'm pretty sure it's needed
    
    
    
    // Just toggling flipX and flipY
    document.getElementById('flipY').addEventListener('click', function () {
        group.toggle('flipY');
        console.log("FlipY is " + rect.getFlipY());
        canvas.renderAll();
    });
    
    document.getElementById('flipX').addEventListener('click', function () {
        group.toggle('flipX');
        console.log("FlipX is " + rect.getFlipX());
        canvas.renderAll();
    });
    
     document.getElementById('flipYTri').addEventListener('click', function () {
        triangle.toggle('flipY');
        console.log("FlipY is " + triangle.getFlipX());
        canvas.renderAll();
    });
})();