We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. [HOW TO] SfImageEditor: position text at bottom left corner

[HOW TO] SfImageEditor: position text at bottom left corner

Hello,
how do I position a new text via code-behind at the bottom left corner of the image?
Here is a snippet of my code:

SfImageEditor editor = sender as SfImageEditor;
editor.AddText(DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss"),
new TextSettings() {
Color = FunctionsHelper.GetColorFromHexString("#FFFFD800"),
FontSize = 18,
Angle = 0,
Bounds = new Rectangle(editor.ActualImageRenderedBounds.Width - 20, editor.ActualImageRenderedBounds.Height - 20, 20, 20),
TextEffects = TextEffects.Bold
}
);


Thanks in advance.

Regards,
Matteo

22 Replies
BK Bharathiraja K Syncfusion Team March 12, 2019 06:07 AM UTC

Hi Matteo, 
 
Greetings from Syncfusion. 
 
We can achieve your requirement by using the Bounds property in TextSettings class. Bounds property is used to position the text wherever you want on the image. It takes the value in percentage. The Bounds value should fall between 0 and 100. 
 
Please refer the following UG link for more information. 
 
Code Snippet [C#]: 
 imageeditor.AddText("NewText", new TextSettings()
                {
                    Bounds = new Rectangle(0,80,25,10)
                }); 
 
We have prepared the sample based on your requirement. Please find the sample from the following location. 
 
Sample:  
 
Output Image: 
 
 
 
Regards, 
Bharathi.             


MC Matteo Comi March 12, 2019 09:05 AM UTC

Hello Bharathi,
thanks for your sample. The provided code works great, but when I crop or zoom the image the text is added at the center of the image. How can I override this behavior?

I have another question. I need to reset the image of the editor when I click the reset button: how do I achieve this?

Thanks in advance,
Matteo

MC Matteo Comi March 12, 2019 11:35 AM UTC

Hello,
another question: I am adding the text with the above method in the ImageSaving event, but the text is not saved in the final image. There is something missing I should do, like a post or something?

Thanks in advance,
Matteo

BK Bharathiraja K Syncfusion Team March 13, 2019 11:19 AM UTC

Hi Matteo, 
 
Thanks for the update. Please find the response for your queries. 
 
Query 1:  When I crop or zoom the image the text is added at the center of the image. 
We can able to reproduce the issue and currently we are validating the issue. We will update you the status on 15th Fridaty,2019. 
 
Query 2: I need to reset the image of the editor when I click the reset button. 
You can change the image when resetting the ImageEditor by using the ToolbarItemSelected event. ToolBarItemSelected event will be triggered whenever tap on the toolbar item. You can change the default toolbar item behavior or notify the toolbar item by using the Name property from the argument. 
 
You can also change the image when resetting the editor by using the BeginReset and EndReset events in the SfImageEditor. 
 
Please refer the following UG link for information. 
 
We have prepared the sample by using the ToolbarItemSelected event. Please find the sample from the following location. 
 
 
You can get the names of the built-in Toolbar items by using the Name property in the toolbar item. 
 
Please refer the following UG link for information. 
 
Query 3:  text is not saved in the final image 
 
We cannot save the changes when adding the text inside ImageSaving event. ImageSaving event occurs before saving the image. You can control the save functionality only. You should add the text before the saving the image. 
Please refer the following UG link for your reference. 
 
Please let us know if have any concern. 
 
Thanks, 
Bharathi. 


MC Matteo Comi March 18, 2019 11:23 AM UTC

Hello,
first of all thanks for your feedback and your support.

Query 1: do you have any news on this point?

Query 2: done, thank you.

Query 3: how can I add text automatically to the image before saving it? I need to add a timestamp on the file and it must be automatic, without user interaction. I tried the imagesaving event and it didn't work, and I also tried overriding the ToolBarItemSelected event as suggested for the reset event but I had no luck.

Thanks in advance,
Matteo

BK Bharathiraja K Syncfusion Team March 19, 2019 10:56 AM UTC

Hi Matteo, 
 
Thanks for the update. 
 
Please find the response for your queries. 
 
Query 1: When I crop or zoom the image the text is added at the center of the image.  
 
We can able to reproduce the issue and we confirmed “Text not positioned with the bounds value after cropping or zooming the image.” as an issue. We will provide the patch on 29th March,2019. We appreciate your patience until then.  
You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
 
 
Query 2: how can I add text automatically to the image before saving it? 
 
You can add the Text before saving the image by using the ToolbarItemSelected event. In that, you can add the text when clicking the “Save” toolbar item. 
We have modified your sample based on your requirement. Please find the sample from the following location. 
 
 
Regards, 
Bharathi. 


MC Matteo Comi March 21, 2019 10:17 AM UTC

Hello,
I tried your sample but it throws an exception when saving the image, maybe because the app is missing permissions?

I tried the same code in my application but the added text is not saved. The image is saved correctly, if I add text manually it is saved.

BK Bharathiraja K Syncfusion Team March 22, 2019 06:14 AM UTC

Hi Matteo, 
 
Sorry for the inconvenience caused. Please use the below code snippet in ToolbarItemSelected event. 
 
Code Snippet [C#]: 
//Toolbar item selected event 
private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e) 
        { 
            string text = e.ToolbarItem.Text; 
            if (text == "AddText") 
            { 
               //... . . 
               //... . . 
 
            } 
 
            else if (e.ToolbarItem.Name == "Save") 
            { 
                imageeditor.AddText("Saved", new TextSettings()); 
                e.Cancel = true; 
                Device.StartTimer(TimeSpan.FromSeconds(5), () => 
                     { 
                         imageeditor.Save(); 
                         return false; 
                     }); 
            } 
           //... . . 
           //... . . 
     } 
 
Please use the above cod and let us know that your problem was resolved at your end. 
 
Regards, 
Bharathi. 


MC Matteo Comi March 22, 2019 04:01 PM UTC

Hello,
now it works, thank you.

Regards,
Matteo

BK Bharathiraja K Syncfusion Team March 25, 2019 06:05 AM UTC

Hi Matteo, 
 
We are glad that the reported problem resolved at your end. 
 
Regards, 
Bharathi. 


MC Matteo Comi June 28, 2019 10:43 AM UTC

Hello,
I have another issue with this control and this topic.
I load an image in the editor and then I crop it. When I click on the save button, if the image width is smaller than the width of the automatically added text, the control throws an exception.
How can I prevent this behaviour?

The text is added in the code by following your example:
TextSettings textSettings = new TextSettings() { FontSize = 18, Angle = 0, TextEffects = TextEffects.Bold, Bounds = new Rectangle(70, 90, 30, 10)};
imageEditor.AddText(testo, textSettings);

Can I check the width of the image cropped and the width of the text added?

RA Rachel A Syncfusion Team July 1, 2019 01:47 PM UTC

Hi Matteo, 
 
We suspect that the problem is when you save the shapes immediately after adding the shapes without using any delay or timer. In our implementation, we get the bitmap from the view and save the bitmap in the location. We have used the view height and width for converting to bitmap. So that, the exception raises when you try to save the ShapeView(Shapes or Text) before drawing the view. But if you have used the code snippet as provided in the forum, the issue will not be reproduced.  
 
Also, we have provided the sample based on the scenario and if the issue still not resolved. Please revert us by modifying the sample based on your application along with replication procedure. You can download the sample from the below link. 
 
 
Thanks, 
Rachel. 


MC Matteo Comi July 3, 2019 03:35 PM UTC

Hello Rachel,
I downloaded your sample but I cannot save any images when cropping.

If I don't perform any action on the image and save it, it is saved with the shape correctly in the filesystem.
If I crop it by using one of your predefined buttons, the image is saved with the shape in the filesystem but its size is the original one and not the cropped one.
If I crop it by using the free selection, I still get the exception.

Attached you can find my sample and a video of the behaviour.

Thanks in advance,
Matteo

Attachment: ImageEditor_SimpleSample_cf2358e6.zip

RA Rachel A Syncfusion Team July 4, 2019 12:52 PM UTC

Hi Matteo, 
 
We can reproduce the reported issue at our end. We will validate this and update further details on July 8th, 2019. 
 
Thanks, 
Rachel. 


MC Matteo Comi July 8, 2019 01:04 PM UTC

Hi Rachel,
thanks for your reply. I will wait for your feedback.


Regards,
Matteo

RA Rachel A Syncfusion Team July 9, 2019 07:23 AM UTC

Hi Matteo, 
 
Sorry for the inconvenience caused. 
 
We have confirmed “[Android,iOS]Shape not positioned properly when adding the shape on the cropped image and save the image.” as an issue. We will provide the patch on 18th July,2019. We appreciate your patience until then.  
 
You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. Also,if you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal link below.  
 
 
Thanks, 
Rachel. 


VR Vignesh Ramesh Syncfusion Team July 18, 2019 05:38 PM UTC

Hi Matteo, 

Thanks for your patience.  

We have fixed the reported “[Android,iOS]Shape not positioned properly when adding the shape on the cropped image and save the image.” issue and the patch for the same can be downloaded from the below link.  

Please find the patch setup from the below location.  

or  

Please find the patch assemblies from the below location.  

or 

Please find the NuGet from the below location.  

Please let us know if you have any other queries. 

Assembly Version: 17.2.0.34   
   
Disclaimer:  
Please note that we have created this patch for version 17.2.0.34 specifically to resolve the issue reported in the forum 143249. If you have received other patches for the same version for other products, please apply all patches in the order received.  

Also, this fix has been included in our latest Weekly NuGet release (v17.2.0.35). 

Regards, 
Vignesh R 


MC Matteo Comi July 29, 2019 07:52 AM UTC

Hello Vignesh,
I am just updating via nuget your controls to version 17.2.0.36 and I will test them today.
For the exception I get do you have any news or feedback?

Regarding SfImageEditor control I have a few other questions:

  1. Is it possible to remove the "Enter text" placeholder when adding a new text?
  2. Is it possible to disable the save button after it has been clicked?
  3. How can I change the icon of one of the built-in functions and mantain its functionality?

Thanks in advance,
Matteo

RA Rachel A Syncfusion Team July 31, 2019 03:42 AM UTC

Hi Matteo, 
 
Query 1: For the exception I get do you have any news or feedback? 
 
In the previous follow-up only one issue has been reported( https://www.syncfusion.com/feedback/7346). The reported issue has been fixed and the fix has been moved to the latest weekly nugget (17.2.0.36). If you face any new exception in SfImageEditor control, please share the replication procedure or the crash log details so that we can give an appropriate solution for the reported issue. 
 
Query 2: Is it possible to remove the "Enter text" placeholder when adding a new text? 
 
We don't have the support for removing the “Enter Text” placeholder but by default the placeholder will be in focus so when we start typing it will be automatically removed. 
 
Query 3: Is it possible to disable the save button after it has been clicked? 
 
Currently, we don’t have the support for disabling the save button, but we can achieve your requirement by hiding the save button in the ToolbarItemSelected event. The ToolbarItemSelected event will be fired when any toolbar item is clicked. So, by setting the true or false boolean value to the SetToolbarItemVisibility property we can make the save button to hide or visible in the toolbar items. The following code snippet shows how to hide or visible the save button in the toolbar. 
 
[C#] 
editor.ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected; 
 
private void ToolbarSettings_ToolbarItemSelected(object sender, Syncfusion.SfImageEditor.XForms.ToolbarItemSelectedEventArgs e) 
        { 
            var headertoolBar = e.ToolbarItem as HeaderToolbarItem; 
            var footertoolBar = e.ToolbarItem as FooterToolbarItem; 
            if (headertoolBar != null) 
            { 
                if (headertoolBar.Name == "Save") 
                { 
                    editor.SetToolbarItemVisibility("Save", false); 
                } 
                else 
                { 
                    editor.SetToolbarItemVisibility("Save", true); 
                } 
            } 
            if (footertoolBar != null ) 
            { 
                editor.SetToolbarItemVisibility("Save", true); 
            } 
        } 
We have prepared a sample in which we made the save button to hide when it is pressed, and we made it visible when we start to edit the image. Please have the sample from the below link. For more details about customizing the toolbar please refer the below link: 
 
 
Query 4: How can I change the icon of one of the built-in functions and maintain its functionality? 
 
The SfImageEditor control has the support for changing the icon for one of the built-in functions by using the below code snippet 
 
editor.ToolbarSettings.ToolbarItems[2].Icon = ImageSource.FromResource("ImageEditorSample.SendBack.png"); 
   
In the attached sample we have changed the default icon for adding the shapes and the sample link is provided below. For more details about Customize toolbar icon please refer the below link: 
 
 
 
Please check our sample and please let us know if you have any queries. 
 
Thanks, 
Rachel. 


MC Matteo Comi August 1, 2019 11:55 AM UTC

Query 1: For the exception I get do you have any news or feedback?
This seems to be fixed.

Query 2: Is it possible to remove the "Enter text" placeholder when adding a new text?
This is not really clear to me. The behaviour is not the one described because the text has to be cancelled by hand.

Query 3: Is it possible to disable the save button after it has been clicked?
Thanks, it works.

Query 4: How can I change the icon of one of the built-in functions and maintain its functionality?
Thanks, it works on Android, but the image disappears after it is clicked. It doesn't work in UWP. I haven't tested it yet on iOS.

VR Vignesh Ramesh Syncfusion Team August 2, 2019 02:08 PM UTC

Hi Matteo, 

Thanks for the update. 

Query 2: Is it possible to remove the "Enter text" placeholder when adding a new text?  
As we have said in our previous update currently we don’t have support to remove the “Enter text” from AddText dialog. Already we have feature enhancement request for “Support to customize text in AddText dialog”. So, we will consider this requirement in it while implementing and please find the feedback task below here. 


Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have immediate plan to implement this feature since we committed with already planned work. So, this feature will be available any of our upcoming release. 

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 

Query 4: How can I change the icon of one of the built-in functions and maintain its functionality? 
Query 4.1: Not works in UWP 
Sorry for the inconvenience caused, we can reproduce the issue in UWP platform and confirmed “[UWP] Toolbar Icon not get updated properly” as an issue. We will provide the patch on 13th August 2019. We appreciate your patience until then.  

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  


Query 4.2: it works on Android, but the image disappears after it is clicked 
We have checked the reported problem in Android platform with the previously provided sample. We are not able to reproduce the reported issue. If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to give better solution in this. 

We have checked in the device Samsung Tab A with Android API version 25. 

Regards, 
Vignesh. 


RA Rachel A Syncfusion Team August 14, 2019 03:36 AM UTC

Hi Matteo, 
 
We are glad to announce that our weekly NuGet was rolled out today and fix for the reported issue “[UWP] Toolbar Icon not get updated properly” was included in the weekly NuGet. 
 
NuGet Version: 17.2.0.41
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Thanks, 
Rachel. 


Loader.
Up arrow icon