文章/答案/技术大牛

发布

社区首页 >问答首页 >FabricJS FlipX对象

问FabricJS FlipX对象
EN

Stack Overflow用户

提问于 2017-04-29 18:29:09

回答 2查看 3.2K关注 0票数 3

当对象本身在FabricJS画布上被单击时，我很难水平地翻转或镜像对象。

我走得很近，但当对象被调整大小时，它也在镜像，而我不想这样做。

我想我需要在第一次单击时将'flipX: true‘属性添加到object，在下一次单击时删除该属性等等。或者，这已经使它复杂化了，用一个我不知道的flipX函数可以轻松得多。

我确实找到了一个翻转对象的小提琴，但是它是按一下按钮而不是对象本身。

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

我的小提琴

HTML：

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

联署材料：

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

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-29 19:18:08

你可以通过以下方式实现这一点..。

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>

票数 8

Stack Overflow用户

发布于 2020-12-18 06:37:29

从上面看一样，不同的情况。

将翻转应用于背景图像

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43699136

复制

相似问题

问FabricJS FlipX对象
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FabricJS FlipX对象EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FabricJS FlipX对象
EN