5

In this jsfiddle I have a Fabric (version 1.x) Textbox that has a red border when it's selected and a blue border when the text is editable. What I need is a border when the TextBox is not selected. How to achieve that?

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);
ps0604
  • 1,227
  • 23
  • 133
  • 330

2 Answers2

7

You can override render method of textbox object. And draw border for text object.

DEMO

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>
Durga
  • 15,263
  • 2
  • 28
  • 52
  • I found a problem with your answer. If you first click on the Textbox to select it, and then call a function to deselect all, then the border disappears. Please see [here](http://jsfiddle.net/Pgschr/chp72vuj/1/). First click on the Textbox and then on the button. – ps0604 Jul 13 '18 at 17:25
  • 1
    @ps0604 as `deactivateAll()` doesn't fire the events, so it fails. use `deactivateAllWithDispatch()`. Here is updated [fiddle](http://jsfiddle.net/chp72vuj/4/) – Durga Jul 13 '18 at 17:36
  • Please see [here](http://jsfiddle.net/Pgschr/4d3rL5ok/), I still have a problem. If you select two objects and then deselect by clicking on the button, the first object loses the border. – ps0604 Jul 13 '18 at 18:56
  • @ps0604 here is updated [fiddle](http://jsfiddle.net/4d3rL5ok/2/), added active to cache property. I don't think it will fail again ;) – Durga Jul 13 '18 at 20:01
  • The this.active conditional is not working in newer fabricjs versions – Ivan Nov 28 '19 at 21:17
0

Can't you just add something like this to it?

border-style: solid;
border-color: coral;
user3272686
  • 853
  • 2
  • 11
  • 23