当在 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();
最佳答案
您可以通过以下方式完成...
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>
关于javascript - FabricJS FlipX 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43699136/