在fabric js中缩放时如何保持Rect的圆角 [英] How to maintain rounded corner of Rect when scaling in fabric js

问题描述

我使用的是 Fabric js 版本 1.7.22.

I am using fabric js version 1.7.22.

原始对象:

当前结果:

预期结果:

推荐答案

一种方法是监视 scaling 事件并将 Rect 的缩放重置为 1，修改其width 和 height 代替:

One way would be to watch for scaling events and reset the Rect's scale to 1, modifying its width and height instead:

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>

这篇关于在fabric js中缩放时如何保持Rect的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！