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);
}
}
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/.
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);
}
}
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/.