Fabric.js对象控件在画布外部可见 [英] Fabricjs object controls visible outside canvas

问题描述

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

I am using fabric.js for html 5 interactive canvas app. If the object scales larger than the canvas, the controls go invisible outside canvas. How to make it visible outside the canvas or is there a way to style those controllers in css.

推荐答案

因此，在fabricjs中，控件是在画布上呈现的，因此无法在画布外设置控件.

So, in fabricjs controls are rendered on the canvas, so having controls outside canvas it is not possible.

您仍然可以通过这种方式获得效果，这只是一个痕迹.

You can still obtain the effect in this way, this is just a trace.

使画布大到窗口的100％，或者要比绘图区域大得多. 然后，您可以使用矩形裁剪绘图画布. 如果需要边框来定义绘图区域，您仍然可以在fabricjs允许的情况下放置覆盖图像.

Make canvas big as 100% of window, or anyway very bigger than drawing area. Then you can clip the drawing canvas with a rectangle. If you need borders to define the drawing area you can still put an overlay image as fabricjs allow you.

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

If you need to have controls near the drawing canvas you will have to position them OVER the non drawing part of the canvas.

这将为您提供一些其他任务: 创建某些对象时，必须确保它们位于绘图区域中.如果考虑对象的位置，则必须考虑必须应用平移，因为您具有绝对位置，而用户将放置对象时注意绘图区域的假左上角，而不是画布的左上角.

This will give you some additional tasks: When you create some object you have to be sure that they go in the drawing area. If you consider position of objects, you have to consider that a translation has to be applied, because you have absolute position while user will position the object watching a fake top left corner of a drawing area and not the top left corner of the canvas.

这篇关于Fabric.js对象控件在画布外部可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！