CODEWITHSUNDEEP
fabricjs
Thomas
Thomas

Reputation: 1149

Fabric.js / Text Edit on mobile

I'm trying to use TUI Image Editor (https://github.com/nhn/tui.image-editor) in my Cordova app on Android.

It is based on Fabric.js and overall working reasonably, however I have major problems with the text annotation: If the edited text is in the lower part of the screen, the Android softkeyboard is covering the text input and doesn't scroll it into view. This also happens when I run the page in the normal Android Chrome browser.

Are there any recipes or examples how to get that working with Fabric.js?

Upvotes: 0

Views: 1129

Answers (1)

Oro
Oro

Reputation: 2586

I had the same problem, and I just avoided using the IText and Textbox objects. I just used the html input field and object with type Text in fabric.js without editing inside canvas, and editing inside input and changing text object to input value. Because if you will use the IText and Textbox objects, you will face problems with editing text on small texts, or text objects with a small scale, where editing inside canvas will be difficult and annoying.

If you still want to scroll to text object I can't give you a full solution. But I think you can use canvas events for text

canvas.on('text:editing:entered', (textObject) => {
  // calculate canvas offset and textObject offset and scroll to this position
})

Upvotes: 1

Related Questions