Converting Text to Images with Editable Features

[iOSyan]

This library has been incredibly helpful to me, thank you so much!

Is there a way to convert text into an image, and when clicking the image's edit button, allow the text to be re-edited, then convert it back into an image after editing, while maintaining the original scaling ratio of the image?

[hm21]

Thanks for your kind words. It means a lot to me that you appreciate my package.

I'm not sure I understand what you mean. Why would you want to convert text into an image? Wouldn't it be better to keep it as a layer, so you can move and edit it directly?

[iOSyan]

Thank you for your response.
In our project, there is a feature where users can draw their own fonts. The fonts drawn by the users are converted into images by me.
When using the pro_image_editor, users can choose their self-drawn fonts. At that point, I need to manually convert the text into an image of the custom font. However, I also want users to be able to edit the original text and then convert it back into an image of the custom font again.

[hm21]

So, if I understand correctly, you're adding the text as an Sticker-Layer rather than a Text-Layer in the editor, correct? Is it not possible to import it directly as a text layer where the fontFamily is set to the user's custom font?
However, if you prefer to implement your custom logic for editing a sticker, you simply need to add the onTapEditSticker callback. This will automatically include the edit button, just as it does for a text layer.

callbacks: ProImageEditorCallbacks(
  onImageEditingStarted: onImageEditingStarted,
  onImageEditingComplete: onImageEditingComplete,
  onCloseEditor: onCloseEditor,
  stickerEditorCallbacks: StickerEditorCallbacks(
    onTapEditSticker: (editorState, sticker, index) {
      print('Write your logic here');
    },
  ),
),

[iOSyan]

I first use the Text-Layer to edit the text, and then manually replace it with the Sticker-Layer. Is there a way to directly replace it?

[hm21]

If you want to add stickers directly, you can follow this example. If you prefer to add your custom font instead, you can refer to this example.