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 20 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
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
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: