I am having trouble flipping or mirroring the object horizontally when the object itself is clicked on the FabricJS canvas.

I came close but it was mirroring the object when it was being resized too, which I didn't want.

I would guess I need to add the 'flipX: true' attribute to object on the first click and on the next click remove that attribute and so on with each click. Or maybe that is over plicating it and it can be done much easier with a flipX function I do not know.

I did find a Fiddle that flipped the object, but it was onclick of a button not the object itself.

I am struggling to solve this :\

My Fiddle

HTML:

<canvas id="canvas" width="400" height="300"></canvas>

JS:

var canvas = this.__canvas = new fabric.Canvas('canvas');

canvas.on('object:selected', function() {
  toggle('flipX');
});

// create a rectangle
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 50,
  angle: 20,
  fill: 'red'
});
canvas.add(rect);
canvas.renderAll();

I am having trouble flipping or mirroring the object horizontally when the object itself is clicked on the FabricJS canvas.

I came close but it was mirroring the object when it was being resized too, which I didn't want.

I would guess I need to add the 'flipX: true' attribute to object on the first click and on the next click remove that attribute and so on with each click. Or maybe that is over plicating it and it can be done much easier with a flipX function I do not know.

I did find a Fiddle that flipped the object, but it was onclick of a button not the object itself.

I am struggling to solve this :\

My Fiddle

HTML:

<canvas id="canvas" width="400" height="300"></canvas>

JS:

var canvas = this.__canvas = new fabric.Canvas('canvas');

canvas.on('object:selected', function() {
  toggle('flipX');
});

// create a rectangle
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 50,
  angle: 20,
  fill: 'red'
});
canvas.add(rect);
canvas.renderAll();

• javascript
• jquery
• canvas
• fabricjs

Share Improve this question Follow asked Apr 29, 2017 at 18:29 GoldenGonazGoldenGonaz 1,17633 gold badges1919 silver badges4343 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You could acplish that in the following way ...

var canvas = this.__canvas = new fabric.Canvas('canvas');

// mouse event
canvas.on('mouse:down', function(e) {
    if (e.target) {
        if (!e.target.__corner) {
            e.target.toggle('flipX');
            canvas.renderAll();
        }
        e.target.__corner = null;
    }
});

// create a rectangle
var rect = new fabric.Rect({
    left: 50,
    top: 50,
    width: 100,
    height: 50,
    angle: 20,
});

// set gradient (for demonstration)
rect.setGradient('fill', {
    type: 'linear',
    x1: -rect.width / 2,
    y1: 0,
    x2: rect.width / 2,
    y2: 0,
    colorStops: {
        0: '#ffe47b',
        1: 'rgb(111,154,211)'
    }
});

canvas.add(rect);
rect.set('flipX', true);
canvas.renderAll();

body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #ccc}

<script src="http://cdnjs.cloudflare./ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="208" height="208"></canvas>

Same from above, different case.

Apply flip to background image

fabric.Image.fromURL('../' +ImageUrl, function (img02) {
                    
                    Backcanvas.setBackgroundImage(img02, Backcanvas.renderAll.bind(Backcanvas), {
                        backgroundImageStretch: false,
                        top: 0,
                        left: 0,
                        originX: 'left',
                        originY: 'top',
                        flipY:'true'
                    });

                    Backcanvas.renderAll();
                    Backcanvas.backgroundImage.setCoords();    


                    canvas.renderAll();
                    Backcanvas.renderAll();


                }, { crossOrigin: 'anonymous' });