FabricJS FlipX 对象

Question

当在 FabricJS 上单击对象本身时，我无法水平翻转或镜像对象 canvas。

我接近了，但它也在调整对象大小时镜像对象，这是我不想要的。

我想我需要在第一次单击时将 'flipX: true' 属性添加到对象，然后在下一次单击时删除该属性，依此类推。或者这可能使它过于复杂，使用我不知道的 flipX 函数可以更容易地完成它。

我确实找到了翻转对象的 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();

Answer 1

您可以通过以下方式完成...

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.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width="208" height="208"></canvas>

Answer 2

同上，不同情况。

将翻转应用到背景图片

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

FabricJS FlipX 对象

FabricJS FlipX object

javascript

jquery

canvas

fabricjs