Unplanned
Last Updated: 07 Sep 2020 12:45 by Luc
Luc
Created on: 24 Aug 2020 12:24
Category: ImageEditor
Type: Feature Request
1
RadImageEditor: give an opportunity to set a fixed aspect ratio and size for Crop
Currently, RadImageEditor does not support setting a fixed aspect ratio or size like ImageEditor for WPF
4 comments
Luc
Posted on: 07 Sep 2020 12:45

my final production code is caculating the scale factor using the real cropping rectangle, and applying this to the RelativeCroptRect.
Then it works perfect.

 protected override void ResizeCropRect(Point location)
        {
            base.ResizeCropRect(location);
            if (CropRatio > float.Epsilon)
            {
                var r = this.GetCropRectangle();
                float h = RelativeCropRect.Height * r.Width / this.CropRatio / r.Height;
                this.RelativeCropRect = new RectangleF(this.RelativeCropRect.X, this.RelativeCropRect.Y, this.RelativeCropRect.Width, h);
            }
        }

ADMIN
Nadya
Posted on: 25 Aug 2020 12:39

Hello, Luc,

I am glad that the suggested solution works for you. Thank you for sharing your custom implementation of crop functionality for RadImageEditor with the community.

If you have any other questions or concerns please let me know.

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/.

Luc
Posted on: 25 Aug 2020 12:28

Ok, it works . Thanks

 

    public class MyImageEditor : RadImageEditor
    {

        private float _CropRatio = 0F;
        public float CropRatio
        {
            get { return _CropRatio; }
            set
            {
                _CropRatio = value; ((MyCanvasElement)ImageEditorElement.CanvasElement).CropRatio = _CropRatio;
            }
        }

        protected override RadImageEditorElement CreateImageEditorElement()
        {
            MyImageEditorelement element = new MyImageEditorelement();
            return element;
        }

        public override string ThemeClassName
        {
            get
            {
                return typeof(RadImageEditor).FullName;
            }
        }
    }
    public class MyImageEditorelement : RadImageEditorElement
    {

        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(MyImageEditorelement);
            }
        }
        protected override ImageEditorCanvasElement CreateCanvasElement()
        {
            return new MyCanvasElement(this);
        }
    }
    public class MyCanvasElement : ImageEditorCanvasElement
    {

        public float CropRatio { get; set; }
        public MyCanvasElement(MyImageEditorelement imageEditorElement) : base(imageEditorElement)
        {
            if (CropRatio==0F) CropRatio = 0.5F;
        }

        protected override void ResizeCropRect(Point location)
        {
            base.ResizeCropRect(location);
            float h = this.RelativeCropRect.Height;
            if (CropRatio>float.Epsilon)
                h = this.RelativeCropRect.Width / this.CropRatio;
            this.RelativeCropRect = new RectangleF(this.RelativeCropRect.X, this.RelativeCropRect.Y, this.RelativeCropRect.Width, h);
        }
    }

                   
ADMIN
Nadya
Posted on: 24 Aug 2020 14:00

Hello,

The possible solution is to create a custom RadImageEditor control and override some methods. In the ImageEditorCanvasElement there is ResizeCropRect method that can be overridden in order to implement your custom resing logic. I prepared a sample demonstration of how you can achieve it. The achieved result is demonstrated in the attached gif file.

public class MyImageEditor : RadImageEditor
{
    protected override RadImageEditorElement CreateImageEditorElement()
    {
        MyImageEditorelement element = new MyImageEditorelement();
        return element;
    }
    public override string ThemeClassName
    {
        get
        {
            return typeof(RadImageEditor).FullName;
        }
    }
}

public class MyImageEditorelement : RadImageEditorElement
{
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(MyImageEditorelement);
        }
    }
    protected override ImageEditorCanvasElement CreateCanvasElement()
    {
        return new MyCanvasElement(this);

    }
}
public class MyCanvasElement : ImageEditorCanvasElement
{
    public MyCanvasElement(RadImageEditorElement imageEditorElement) : base(imageEditorElement)
    {
    }

    protected override void ResizeCropRect(Point location)
    {
        base.ResizeCropRect(location);

        this.RelativeCropRect = new RectangleF(this.RelativeCropRect.X, this.RelativeCropRect.Y, this.RelativeCropRect.Width, this.RelativeCropRect.Width);
    }

    protected override ResizeType GetResizeType(Point location)
    {
        ResizeType resizeType = base.GetResizeType(location);

        if (resizeType == ResizeType.Top || resizeType == ResizeType.Bottom)
        {
            resizeType = ResizeType.None;
        }

        return resizeType;
    }
}

I hope this helps.

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/.

Attached Files: