时间戳

首页 > 解决方案 > FabricJS 4.4 新手，寻找布局一组对象的最佳方式

javascript - FabricJS 4.4 新手，寻找布局一组对象的最佳方式

问题描述

我对 FabricJS (4.4.0) 很陌生，我希望以“正确”的方式做事，所以我正在寻求建议：

想象一下，我正在编写一个 JS 函数createHouse(options)，它接受一堆选项并返回一个fabric.Group简单的房子图片，其中选项给出了房子实际布局的各个方面：前门位置、楼层数、烟囱、等等例如：

    let myHouse = createHouse({ x:200, y:100, 
                                color:'blue', floors:2, width:100, labelParts:true,
                                stairs:true, garage:false, chimney:true, doorSide:'left', fence:false);
    fabricCanvas.add(myHouse);

我想要调用者提供的任何 x,y 坐标来指定房屋前门的门把手将放置在哪里——即，我不希望它位于房屋组的中心或左上角。如果我孤立地考虑这个房屋组，我会将门把手视为原点坐标，房屋的其余部分在门把手的上方、下方、左侧和右侧延伸。我希望我的代码从门把手开始，然后从那里“向外建造房子”——所以我不知道这个小组实际上会有多“大”。

让事情变得更复杂，如果labelParts是真的，那么房子将被指向门、烟囱等的标签包围——这些也会使群体变大，数量不详。

所以，问题：

  1. 您将如何定义关于 originX、originY 等的组和子对象？

  2. 有没有一种方法可以让我的房子坐标系在我定义形状时围绕 (0,0) 的门把手旋转，其中最终转换到所需的 (x,y) 门把手位置是在将组返回给调用者之前完成的? 这会由主 House Group 内的 Group 来完成吗？

  3. 由于文本的长度，可选的标签簇可以使整体 Group 尺寸不可预测，但我不想考虑这一点：我只想让调用者指定门把手位置，并从那里向外构建。那可能吗？

提前致谢！

标签： javascriptfabricjs

解决方案

推荐阅读