javascript - FabricJS FlipX 对象

Question

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

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

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

我确实找到了 Fiddle翻转了对象，但它是单击按钮而不是对象本身。

我正在努力解决这个问题:\

我的 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>