This is a migrated thread and some comments may be shown as answers.

RadImageEditor: Adjust to the available area and only for show.

5 Answers 157 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Eusebio
Top achievements
Rank 1
Veteran
Eusebio asked on 19 Oct 2020, 08:49 AM

Hi,

How do adjust the image in the available area?

Considering that the image can be little or big.

I attach an image.

Thanks,


5 Answers, 1 is accepted

Sort by
0
Nadya | Tech Support Engineer
Telerik team
answered on 21 Oct 2020, 01:41 PM

Hello, Eusebio,

In order to adjust the image size to fit the boundaries of RadImageEditor, it is necessary to handle the RadImageEditor.ImageLoaded event and calculate the zoom factor. Please refer to the following code snippet: 

 public RadForm1()
 {
     InitializeComponent();
     this.radImageEditor1.ImageLoaded += this.RadImageEditor1_ImageLoaded;
 }

 private void RadImageEditor1_ImageLoaded(object sender, AsyncCompletedEventArgs e)
 {
     float factor = this.GetAutoZoomFactor();
     this.radImageEditor1.ImageEditorElement.ZoomFactor = new SizeF(factor, factor);
 }

 protected virtual float GetAutoZoomFactor()
 {
     float factorX = (this.radImageEditor1.ImageEditorElement.Size.Width - this.radImageEditor1.ImageEditorElement.CommandsElementWidth) / (float)System.Convert.ToSingle(this.radImageEditor1.ImageEditorElement.CurrentBitmap.Width);
     float factorY = (this.radImageEditor1.ImageEditorElement.Size.Height - this.radImageEditor1.ImageEditorElement.ZoomElementHeight) / (float)System.Convert.ToSingle(this.radImageEditor1.ImageEditorElement.CurrentBitmap.Height);
     return Math.Min(factorX, factorY);
 }

I hope this helps. Should you have other questions do not hesitate to contact me.

Regards,
Nadya
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Eusebio
Top achievements
Rank 1
Veteran
answered on 21 Oct 2020, 03:25 PM

Thanks Nadya,

My control RadImageEditor is size 350 x 350.

Also, I have added these lines:

            this.rieImagen.ImageEditorElement.CommandsElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
            this.rieImagen.ImageEditorElement.CommandsElementWidth = 0;

            //------------probando...
            this.rieImagen.ImageEditorElement.ZoomElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
            this.rieImagen.ImageEditorElement.ZoomElementHeight = 0;


            // Inicializa RIE 2:

            //-----------
            this.rieImagen2.ImageEditorElement.CommandsElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
            this.rieImagen2.ImageEditorElement.CommandsElementWidth = 0;

            //------------probando...
            this.rieImagen2.ImageEditorElement.ZoomElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
            this.rieImagen2.ImageEditorElement.ZoomElementHeight = 0;

Figure 1: With you code. But i Add ....

            float factorX = (this.rieImagen.ImageEditorElement.Size.Width - this.rieImagen.ImageEditorElement.CommandsElementWidth + 170
                / (float)System.Convert.ToSingle(this.rieImagen.ImageEditorElement.CurrentBitmap.Width);
            float factorY = (this.rieImagen.ImageEditorElement.Size.Height - this.rieImagen.ImageEditorElement.ZoomElementHeight + 170
                / (float)System.Convert.ToSingle(this.rieImagen.ImageEditorElement.CurrentBitmap.Height);

Figure 2: With you code.

 

0
Accepted
Nadya | Tech Support Engineer
Telerik team
answered on 26 Oct 2020, 10:08 AM

Hello, Eusebio,

Thank you for the additional information. According to the provided code snippets and a picture, it seems that you hide commands and zoom elements in RadImageEditor. Thus, only the opened image should be visible. 

Please refer to the updated code snippet:

 public RadForm1()
 {
     InitializeComponent();

     this.radImageEditor1.ImageEditorElement.CommandsElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
     this.radImageEditor1.ImageEditorElement.CommandsElementWidth = 0;

     //------------probando...
     this.radImageEditor1.ImageEditorElement.ZoomElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
     this.radImageEditor1.ImageEditorElement.ZoomElementHeight = 0;

     this.radImageEditor1.ImageEditorElement.ImageLoaded += this.RadImageEditor1_ImageLoaded;
     this.radImageEditor1.ImageEditorElement.OpenImage(Resources.newyork);


 }

 private void RadImageEditor1_ImageLoaded(object sender, AsyncCompletedEventArgs e)
 {
     float factor = this.GetAutoZoomFactor();
     this.radImageEditor1.ImageEditorElement.ZoomFactor = new SizeF(factor, factor);

 }

 protected virtual float GetAutoZoomFactor()
 {
     float factorX = (this.radImageEditor1.Size.Height - 2) / (float)System.Convert.ToSingle(this.radImageEditor1.ImageEditorElement.CurrentBitmap.Width);
     float factorY = (this.radImageEditor1.Size.Width - 2) / (float)System.Convert.ToSingle(this.radImageEditor1.ImageEditorElement.CurrentBitmap.Height);

     return Math.Min(factorX, factorY);
 }


Below is a picture showing the in RadImageEditor control:

I hope this helps. Should you have other questions do not hesitate to contact me.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Eusebio
Top achievements
Rank 1
Veteran
answered on 25 Jan 2021, 02:47 PM

It works!!.

And i call also RadImageEditor_ImageLoaded() from MyForm_Resize().

 

 

 

0
Nadya | Tech Support Engineer
Telerik team
answered on 25 Jan 2021, 02:59 PM

Hello, Eusebio,

I am really glad that the suggested solution works for you. Should you have any other questions do not hesitate to contact us.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ImageEditor
Asked by
Eusebio
Top achievements
Rank 1
Veteran
Answers by
Nadya | Tech Support Engineer
Telerik team
Eusebio
Top achievements
Rank 1
Veteran
Share this question
or