在Fabric JS中缩放时如何保持Rect的圆角

Mayur kukadiya

我正在使用Fabric js版本1.7.22。

原始对象:

在此处输入图片说明

当前结果:

在此处输入图片说明

预期结果 :

在此处输入图片说明

ka

一种方法是监视scaling事件并将Rect的比例重置为1,修改其比例widthheight改为:

const canvas = new fabric.Canvas('c')

const rect = new fabric.Rect({
  left: 10,
  top: 10,
  width: 100,
  height: 100,
  fill: 'blue',
  rx: 10,
  ry: 10,
  objectCaching: false,
})

rect.on('scaling', function() {
  this.set({
    width: this.width * this.scaleX,
    height: this.height * this.scaleY,
    scaleX: 1,
    scaleY: 1
  })
})

canvas.add(rect).renderAll()
canvas {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<canvas id="c" width="300" height="250"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章