时间戳

首页 > 解决方案 > 如何在fabric.js中调整组中某些对象的大小？

javascript - 如何在fabric.js中调整组中某些对象的大小？

问题描述

我有一组两个对象，我想要的是在调整组大小时，其中一个对象不会改变大小，但位置会改变。

我已经搜索了文档，但找不到解决此问题的参考资料。

var r = 15;
var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: 'blue',
    width: 100,
    height: 100

});
var linkBtn = new fabric.Circle({
    left: 50 + rect.width / 2 - r,
    top: 50 - r,
    strokeWidth: 1,
    radius: r,
    fill: '#fff',
    stroke: '#666'
});
var g = new fabric.Group([rect, linkBtn]);
g.hasRotatingPoint = false;
canvas.add(g);

当我拉伸组的宽度时，对象“linkBtn”像椭圆形一样变形，它的高度也一样。我希望在更改大小时，对象“linkBtn”的大小始终相同，并且始终是对象“rect”宽度的一半。

标签： javascriptfabricjs

解决方案

添加 {lockUniScaling : true} 作为此行的第二个参数

var g = new fabric.Group([rect, linkBtn], {lockUniScaling : true});

lockUniScaling 防止在 X 或 Y 方向上缩放，但不能同时在两个方向上缩放。换句话说，防止对象的非比例缩放。

推荐阅读