Question

我需要能够显示一个带有文本的矩形，但我需要它来处理自动换行。我在fabric.js github issue #187中找到了关于我需要的确切内容。也可以在fabric.js pull request 725中找到与此问题相关的提交。另外，我在当前的源代码中找到了源代码的textbox.class.js现在已经存在，但它还没有在fabricjs site的任何演示或文档中。

在我试图展示

的形状中，我需要做一些事情

必须显示调整大小时处理自动换行的文本
必须显示背景颜色
必须显示边框颜色

项目1使用源代码中现在可用的TextBox形状进行处理。创建对象时，我可以使用backgroundColor选项来解决第2项。我需要的是应用边框的能力。我可以使用fabric.Rect使用笔划执行此操作，但由于fabric.Textbox扩展fabric.IText，因此应用笔划会影响文本，但我并不需要。我确实发现我可以使用fabric.Shadow得到一些我需要的东西，但它仍然不够明显，因为它也将阴影应用于文本，所以我无法增加它。

我已经整理了 plunk here，其中显示了示例我目前所尝试的内容。对边框的需求是在框中给出更多的分离，因为你在示例中注意到它们是叠加在一起的，并且我一次可能在屏幕上有几十个。

我想尝试使用fabric.Group，但我无法正确地将fabric.Rect和fabric.Textbox放在一起，调整文本框的大小并不会; t处理自动换行，就像不在组中一样。

有关我如何展示边框的任何建议？我想尽可能地使用fabric.Textbox及其选项来减少形状数量，但主要关注的是添加边框。感谢您的输入。

Answer 1

你需要做这样的事情

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

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

Answer 2

在更新边框属性后，通过调用_renderTextBoxBackground来扩展文本框并在上下文中绘制边框 - borderWidth和borderColors

Answer 3

我也在尝试做同样的事情。想为 IText 添加 Border，尝试在互联网上搜索它，然后最终决定覆盖 IText 的渲染方法，如下所示。

     var container = document.getElementById("container")
            var canvas = window._canvas = new fabric.Canvas('c');
            var text =  fabric.util.createClass(fabric.IText, {
  
            
            render: function(ctx) {
              this.clearContextTop();
              this.callSuper('render', ctx);
              this.cursorOffsetCache = { };
              this.renderCursorOrSelection();
              /*var bound = this.getBoundingRect();
              ctx.strokeStyle = this.fill;  
              ctx.strokeRect(
            bound.left + 0.5,
            bound.top + 0.5,
            bound.width,
            bound.height
              );*/
              ctx.strokeStyle = this.fill;  
            let coords = this.calcCoords();
            ctx.beginPath();
            ctx.moveTo(coords.tl.x, coords.tl.y);
            ctx.lineTo(coords.tr.x, coords.tr.y);
            ctx.lineTo(coords.br.x, coords.br.y);
            ctx.lineTo(coords.bl.x, coords.bl.y);
            ctx.closePath();
            ctx.stroke();


              /*ctx.rect(this.left , this.top , this.width*this.scaleX , this.height*this.scaleY); 
              ctx.stroke();*/

            },
            /**
             * @private
             * @param {CanvasRenderingContext2D} ctx Context to render on
             */
            _render: function(ctx) {
              this.callSuper('_render', ctx);
            },
        });     
           let textt = new text('Baka',{
        bgColor: 'transparent',
        fill: 'red'
        });
canvas.add(textt);
canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.js"></script>
<div id="container">
  <canvas id="c" width="600" height="600"></canvas>
</div>

如何在面料js iText处于非活动状态时添加边框

3 个答案: