Fabricjs 对象控件在画布外部可见答案

【问题标题】：Fabricjs object controls visible outside canvasFabricjs 对象控件在画布外部可见
【发布时间】：2014-09-03 09:14:28
【问题描述】：

我正在将 fabric.js 用于 html 5 交互式画布应用程序。如果对象的缩放比例大于画布，则控件在画布外不可见。如何使其在画布外可见，或者有没有办法在 css 中设置这些控制器的样式。

【问题讨论】：

为控件制作第二个 fabric.Canvas 怎么样？
你能帮我弄一下吗？我不知道怎么做。
如何创建第二个画布：var controlsCanvas=new fabric.Canvas('myControlCanvasElement'); 然后只需将您的控件放在第二个画布上，就像您在主画布上所做的那样。用户界面在第二个画布上，但代码指向主画布。
没关系。但是控件是与对象一起创建的。如何将控件与对象分离以放入其他画布？
也许我的错 :-/...您是否使用 fabricjs 对象创建了自己的用户界面控件，或者您在谈论内置的 fabricjs resizer-rotator 控件？如果是后者，则不能强制内置控件始终在画布上可见。如果是前者，您可以引用主画布以响应用户对辅助画布上的控件的操作。

【解决方案1】：

您可以做的最好的事情是制作更大的画布，但将绘图区域限制在有限的部分，例如边距。不容易，因为在那之后你在进行其他计算时总是需要考虑边距，但这是可能的。

【讨论】：

【解决方案2】：

因此，在 fabricjs 中，控件呈现在画布上，因此无法在画布之外拥有控件。

这样还是可以得到效果的，这只是一个痕迹。

使画布与窗口的 100% 一样大，或者比绘图区域大得多。然后你可以用一个矩形来剪裁绘图画布。如果您需要边框来定义绘图区域，您仍然可以在 fabricjs 允许的情况下放置叠加图像。

如果您需要在绘图画布附近放置控件，则必须将它们放置在画布的非绘图部分上方。

这会给你一些额外的任务：当您创建一些对象时，您必须确保它们进入绘图区域。如果您考虑对象的位置，则必须考虑必须应用平移，因为您具有绝对位置，而用户将定位对象以观看绘图区域的假左上角而不是画布的左上角。

【讨论】：