Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to activate the cursor for a fabric js IText?

I'd like to be able to add text to the canvas and have it go directly into editing text mode where the cursor is visible and you can start typing.

So far I've got this code that adds the text and sets it as active, but I'm not sure on how to go to the edit text mode. Any ideas? Thanks!

    var fabicText = new fabric.IText('Click to change Text', { left: 100, top: 100 });
   fabicText.set({ fill: getSelectedColorText() });
   _fabicCanvas.add(fabicText);

  _fabicCanvas.setActiveObject(fabicText);
like image 552
NullReference Avatar asked Jun 03 '15 23:06

NullReference


1 Answers

You have to use enterEditing() method and then set focus on hiddenTextArea like this

fabicText.enterEditing();
fabicText.hiddenTextarea.focus();

var _fabicCanvas;

$(function () {
    _fabicCanvas = window._canvas = new fabric.Canvas('canvas');
    var fabicText = new fabric.IText('Click to change Text', {
        left: 100,
        top: 100
    });
    _fabicCanvas.add(fabicText);
    fabicText.set({ fill: 'blue' });
    _fabicCanvas.setActiveObject(fabicText);
    fabicText.enterEditing()
    fabicText.hiddenTextarea.focus();

});
<script src="https://rawgit.com/kangax/fabric.js/v1.4.5/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>
like image 112
Dhiraj Avatar answered Sep 21 '22 00:09

Dhiraj