CODEWITHSUNDEEP
fabricjs
ps0604
ps0604

Reputation: 1081

Fabricjs: entering IText with click on canvas

The objective of this jsfiddle is the following:

I tried to use IText enterEditing method right after the user clicks on the canvas, but the cursor does not show up, so the user don't know they can enter text. In addition, in Chrome and Firefox the user cannot enter text at all. Any ideas?

Javascript

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

canvas.on('mouse:down', function(options) {
    if (options.target == null) 
         addText(options.e);
});


function addText(e) {

        var text = new fabric.IText('',{
            left: e.offsetX,
            top: e.offsetY
        });

        canvas.add(text);
        text.enterEditing();
}

Upvotes: 2

Views: 3946

Answers (2)

Vel
Vel

Reputation: 81

Try the following code, you need to set your text object as active object in canvas.

var text = new fabric.IText('',{
  left: e.offsetX,
  top: e.offsetY
});
canvas.add(text).setActiveObject(text);
text.enterEditing();

Upvotes: 6

Rakhi
Rakhi

Reputation: 929

Try this fiddle i upaded using this code,Hope it can help you somewhat

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

canvas.on('mouse:down', function(options) {

    if (options.target == null) 
        addText(options.e);
});


function addText(e) {

  var custontxt=new fabric.IText('Tap and Type', { 
  fontFamily: 'helvetica',
  fontSize:30,
  fontWeight:400,
  fill:'red', 
  fontStyle: 'normal', 
  top:250,
  cursorDuration:500,    
  left:250,    
});  
canvas.add(custontxt);
}

http://jsfiddle.net/hsLwjtbx/16/

Upvotes: 1

Related Questions