本文介绍了在fabric js中缩放时如何保持Rect的圆角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是 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的圆角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!