Question

In this jsfiddle我有一个Fabric（版本1.x）文本框，该文本框在选中时具有红色边框，在文本可编辑时具有蓝色边框。当文本框未选中时，我需要一个边框。如何实现？

HTML

<canvas id="c" width="300" height="300"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');

var text = new fabric.Textbox("Some Text", {
  left: 50,
  top: 50,
  width: 100,
  fontSize: 12,
  fontFamily: 'Arial',
  backgroundColor: 'yellow',
  borderColor: 'red',
  editingBorderColor: 'blue',
  padding: 2
});

canvas.add(text);

Answer 1

您可以重写文本框对象的渲染方法。并为文本对象绘制边框。

演示

var canvas = new fabric.Canvas('c');

var originalRender = fabric.Textbox.prototype._render;
fabric.Textbox.prototype._render = function(ctx) {
  originalRender.call(this, ctx);
  //Don't draw border if it is active(selected/ editing mode)
  if (this.active) return;
  if(this.showTextBoxBorder){
    var w = this.width,
      h = this.height,
      x = -this.width / 2,
      y = -this.height / 2;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + w, y);
    ctx.lineTo(x + w, y + h);
    ctx.lineTo(x, y + h);
    ctx.lineTo(x, y);
    ctx.closePath();
    var stroke = ctx.strokeStyle;
    ctx.strokeStyle = this.textboxBorderColor;
    ctx.stroke();
    ctx.strokeStyle = stroke;
  }
}
fabric.Textbox.prototype.cacheProperties = fabric.Textbox.prototype.cacheProperties.concat('active');

var text = new fabric.Textbox("Some Text\n some more text", {
  left: 50,
  top: 50,
  width: 100,
  fontSize: 12,
  fontFamily: 'Arial',
  backgroundColor: 'yellow',
  borderColor: 'red',
  editingBorderColor: 'blue',
  padding: 2,
  showTextBoxBorder: true,
  textboxBorderColor: 'green'
});
canvas.add(text);

canvas{
 border : 2px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>

Answer 2

您不能只添加类似的内容吗？

border-style: solid;
border-color: coral;

未选中时在Fabric Textbox上绘制边框

2 个答案: