1. Home
  2. Forum
  3. Xamarin.Forms
  4. edit & display text outside of image editor control

edit & display text outside of image editor control

I'm trying to utilize the Image Editor control to create a digital business card creator/editor (similar to how the Vistaprint image editor works.)
In my case, the image editor will be pre-populated with some text to be displayed on the business card image (phone, email, title, etc.) I would like a list of the text fields to be populated below the image editor control, and to be able to edit the text in the Image Editor via said text fields.  
In the attached file, the top element will be the Image Editor control and the text fields below I would like to be able to display the text. \
Thanks.

Attachment: Edit_Card_Page_pic_7dd9d947.zip

5 Replies 1 reply marked as answer
RS Ramya Soundar Rajan Syncfusion Team July 27, 2020 11:22 AM UTC

 
Greetings from Syncfusion. 
  
We have analyzed you reported query and we suspect that add a text a on image when the SfImageEditor control loaded. When entering the value in editor framework control the value need to update in text added in the SfImageEditor. We can achieve this requirement by adding text using AddText method by setting the text and bounds as a parameter. We have prepared a sample based on this after entering value in the editor select ok button to update text in SfImageEditor. Please find the sample below. 
 
 
For more information, please refer the below help document link. 
  
  
Please revert us if provided solution is not meet your requirement, with more information like demo video. This will be helpful for us to provide better solution at the earliest. 
 
Regards, 
Ramya S 


CG Cody Gordon July 27, 2020 11:55 AM UTC

Ramya, thank you for the reply, but this does is not quite what I'm looking for.
I'd like to be able to edit the text in the Image Editor via the text fields below.

for example:
When a user modifies the text in the text field below the image editor, the text in the image editor matches.

Essentially, what I'm asking for is if your control provides the ability to alter the text objects dynamically. 

Here's a screenshot of Vistaprint's editor. If you edit the text in the text field to the left of the editor, the text inside the editor reflects those changes
https://imgur.com/a/fj27lwT

Thanks.

RS Ramya Soundar Rajan Syncfusion Team July 28, 2020 11:39 AM UTC

  
Thanks for your update.  
  
In previously provided workaround is based on, updating the text through AddText() method in ImageEditor only when completed its editing.  
  
Now modified the sample to update the text whenever the typing involved using the same method with TextChanged event of Entry and invoke the Delete () for removing the previously shown text in Image editor as shown in below code snippet  
  
Code snippet: 
 
[C#] 
private void NameEntry_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (e.OldTextValue == textValue && e.OldTextValue!=null)
            {
                imageeditor.Delete();
            }
            imageeditor.AddText(e.NewTextValue, new TextSettings() { Bounds = new Rectangle(40, 10, 30, 10) });
            textValue = e.NewTextValue;
        } 
 
[XAML] 
   … 
 
<imageeditor:SfImageEditor x:Name="imageeditor" Grid.Row="0">
        </imageeditor:SfImageEditor> 
    … 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Ramya S 


CG Cody Gordon July 28, 2020 12:03 PM UTC

Thanks for the reply, but this still is not the functionality I'm aiming for. Your solution just deletes the currently selected text object and adds a new object.  

What I would like to do is for example:
1) Create text object in Image Editor
2) Store text object in a variable for future reference
- There will be multiple text objects (EmailText, NameText, PhoneNumerText, etc.)
3) When a user edits the input field (below the image control) the respective text object can be referenced and edited with the edits being reflected on the Image Editor.

Is this functionality supported or possible?

RS Ramya Soundar Rajan Syncfusion Team July 29, 2020 01:32 PM UTC

 
We would like to inform you that when adding the text on image and on selecting the text in SfImageEditor ItemSelected event will be triggered. From this event we can get the selected text from the event argument SelectedItemName property. Please refer the below help document link for more information of ItemSelected event. 
 
 
We can add a text on image using the AddText method and edit the added text by double tapping on the text then the popup will be shown to edit that text. In your requirement you need add the text on image initially. You can store the text value in a local variable by triggering the ItemSelected event argument SelectedItemName while adding/selecting the text. You have to select the text on the image and then edit the value in the corresponding framework Editor control to reflect the edited value on SfImageEditor text. This can be achieved only by using Delete method we need to delete the previous text before update the text on image using the AddText method. Added text on image will be selected only by tapping the text manually. We have modified the sample based on this. Please refer the below sample location. 
 
 
 
Regards, 
Ramya S 


Marked as answer
Loader.
Up arrow icon