angularjs - 如何设置织物组的边界框旋转和尺寸与其对象相同

版本fabricjs 4.2.0

正如您在图片中看到的，我在组中有文本和矩形。text 和 Rectangle 都被旋转。所以我相信应该旋转组的边界框。但事实并非如此。相反，边界框根本不旋转。

注意：我已经将旋转文本和矩形添加到组中。我尝试使用 addWithUpdate() 但不起作用。我也尝试给 Group 一个角度，但它再次旋转子对象。我想要的是组的边界框应该与子对象的大小相同（充当边框的矩形）并且具有相同的对象旋转角度。

标签： angularjsfabricjs

这里的问题基本上是当在画布中选择多个对象时，Fabric 会动态地为它们创建一个组。因此，它假定对象边界框的旋转应为 0，因为这是一个合理的默认值。因此，如果我们想解决这个问题，我们需要在将项目添加到画布之前创建自己的组，以便 Fabric 知道将它们视为同一事物的一部分。

为了做到这一点，我们首先创建一个fabric.Group，将我们想要添加到画布的对象添加到该对象，然后将该组添加到画布。例如，

const text = ...;
const rectangle = ...;

const group = new fabric.Group();
group.initialize([text, rectangle]);
canvas.add(group);

请注意，这会创建一个静态组 - 添加到该组的对象不能通过用户输入彼此分开。除非有其他代码明确分解组，否则fabric 将继续将它们视为一个实体。

链接的 JSFiddle 有一个橙色方块与一个蓝色方块组合在一起，以演示该边界框如何正确地粘在该组上。