如何在Fabric JS iText中添加边框，即使它不处于活动状态 [英] How to add border to fabric js iText even when it is not active

问题描述

我需要能够显示一个内部带有文本的矩形，但是我需要它来处理自动换行.我在fabric.js github issue#187 中找到了关于我真正需要什么的讨论这.也可以在fabric.js 拉动请求725 中找到，其中与问题.另外，我在当前的母版中找到了 fabricjs网站上的任何演示或文档中提供.

I have the need to be able to display a rectangle with text inside but I need it to handle word wrap. I found in fabric.js github issue #187 discussion about exactly what I needed for this. Also found in fabric.js pull request 725 where the commits were made relating to the issue. Additionally I found in the current master for the source code is the textbox.class.js that now exists for this,though its not yet in any Demos or Docs on the fabricjs site.

有些事情我需要以我要显示的形状发生

There are a few things I need to happen in the shape I'm trying to display

1. 必须显示在调整大小后可以自动换行的文本
2. 必须显示背景颜色
3. 必须显示边框颜色

第1项使用源代码中现在可用的TextBox形状进行寻址.创建对象时，可以使用 backgroundColor 选项解决项目2.我需要的是能够应用边框的功能.我可以使用笔触使用 fabric.Rect 来做到这一点，但是由于 fabric.Textbox 扩展了 fabric.IText ，因此应用笔触会影响文本，我不会不需要那个.我确实发现使用 fabric.Shadow 可以得到一些所需的东西，但是它仍然不够鲜明，我也无法对其进行很大的增加，因为它也将阴影应用于文本.

Item 1 is addressed with the TextBox shape now available in the source code. I can address item 2 using the backgroundColor option when creating the object. What I need is the ability to apply a border. I can do this with a fabric.Rect using stroke but since fabric.Textbox extends fabric.IText applying a stroke affects the text and I don't need that. I did find I could get somewhat of what I need using a fabric.Shadow but it's still not distinct enough and I can't increase it very much since it applies the shadow to text as well.

我整理了 plunk 此处显示示例我目前正在尝试的操作.边框的需要是在框内提供更多的分隔，如您在示例中所注意到的那样，它们是层叠堆叠在一起的，我可能一次在屏幕上看到数十个.

I've put together a plunk here that shows an example what I currently have been trying. The need for the border is to give more separation in the boxes, as you'll notice in the example they are stacked cascading on top of each other and I will have possibly dozens of these on a screen at a time.

我想尝试使用 fabric.Group ，但是在具有 fabric.Rect 和 fabric.Textbox的情况下，我无法使其正常工作一起使用时，调整文本框的大小不会像不在Group中时那样处理自动换行.

I thought to try and use a fabric.Group but I couldn't get it to work correctly having a fabric.Rect and a fabric.Textbox together, on resize the Textbox wouldn't handle the word wrap as it does when not in a Group.

关于如何显示边框的任何建议?我想尽可能使用 fabric.Textbox 及其选项来减少形状的数量，但主要的问题是添加边框.感谢您的输入.

Any suggestions on how I might be able to show a border? I would like to use fabric.Textbox and its options as much as possible to reduce number of shapes but the primary concern is adding a border. Thanks for your input.

推荐答案

您需要执行以下操作

canvas.getObjects()[0].drawBorders(canvas.getContext())

，并且可以实现您自己的 drawBorders 函数，并在未选择对象时调用它

and may be implement your own drawBorders function and call it whenever the objects are not selected

这篇关于如何在Fabric JS iText中添加边框，即使它不处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！