如何在调整元素大小时保持纵横比

Question

我有一个椭圆形的自定义元素：

{
size: { width: 160, height: 80 },
attrs: {
body: {
refCx: '50%',
refCy: '50%',
refRx: '50%',
refRy: '50%',
width: 'calc(w)',
strokeWidth: 2,
stroke: '#333333',
fill: '#FFFFFF'
},
label: {
textVerticalAnchor: 'middle',
textAnchor: 'middle',
refX: '50%',
refY: '50%',
fontSize: 14,
fill: '#333333'
}
}
}

markup = [{
tagName: 'ellipse',
selector: 'body'
}, {
tagName: 'text',
selector: 'label'
}]

我已启用ui。光晕元素，允许用户调整它们的大小。问题是，通过使用光晕调整大小，用户可以将椭圆的形状更改为圆形。如何在调整大小期间保持纵横比，使椭圆始终是纵横比为2:1的椭圆？

Answer 1

如果您正在寻找的只是preserveAspectRatio，也许是ui。FreeTransform将是一个更好的选择。它内置了一个preserveAspectRatio选项，因此您的椭圆将保持其大小。