Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable the edit of the text in a textbox, but still be able to select it. Fabric 1.6

Tags:

fabricjs

I want the user to be able to select a fabric.Textbox and do the rotation, move, resizing etc but not the editing of the text. To edit the text the user must select the textbox object and then activate the textediting (not in fabric). So what I want is to avoid that the user can edit the text in fabric (like fabric.Text). Is there any way to do this?

like image 952
Jacob Westh Avatar asked Oct 19 '15 13:10

Jacob Westh


2 Answers

canvas = new fabric.Canvas('canvas');
var shape = new fabric.Textbox('I am a not editable textbox', {width: 200, top:0, left:0, editable: false, cursorWidth: 0});
canvas.add(shape);
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

Fabric.js Textbox subclasses IText. From the IText documentation you can see:

/**
 * Indicates whether a text can be edited
 * @type Boolean
 * @default
 */
editable: true,

Why the cursors still appear is a mystery to me. So I applied a cursorWidth = 0 to temporarily patch the problem. It is probably an issue with the library itself.

like image 62
AndreaBogazzi Avatar answered Nov 26 '22 18:11

AndreaBogazzi


var textboxObj = new fabric.Textbox(selectValue, {

    fontSize: 24,
    originX: 'center',
    originY: 'center',
    top: center.top,
    left: center.left,
    editable: false,
});
like image 32
Sandeep Kunaparaju Avatar answered Nov 26 '22 18:11

Sandeep Kunaparaju