Best Fit - When you write using pencil the written part moves on the image

[Sree]

Hello,
How can I make the loaded image to be a best fit on page load (dimensions of the image to fit the editor size when the image is bigger than the editor)?
Once I load the image and I re-size to best fit and try to annotate using the pencil tool or line tool or circle or rectangle the annotation moves to the right and does not stay in the place I write. Is there a way it can stay at the place I wrote and will increase in size accordingly on the main large image. Please help me how to do that.

Thanks
Sree

[Vessy]

Hello Sree,

You could use the ImageEditor's zoomBestFit() Client-side property in order to make the loaded image fit best the viewport of the control. I would suggest you to do it into the handler of the ImageEditor's ClientImageLoad, ensuring that the editable element is loaded correctly:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/Chrysanthemum.jpg" OnClientImageLoad="OnClientImageLoad"></telerik:RadImageEditor>
<script type="text/javascript">
    function OnClientImageLoad(imageEditor, args) {
        imageEditor.zoomBestFit();
    }
</script>

Note, though, that this method will make the loaded image occupy the whole available space even if it is smaller than it. If you want the image to be zoomed only if it is bigger, you could implement a similar logic:

function OnClientImageLoad(imageEditor, args) {
    var editorWidth = imageEditor.get_width().substring(0, imageEditor.get_width().lastIndexOf("px"));
    var editorHeight = imageEditor.get_height().substring(0, imageEditor.get_height().lastIndexOf("px"));
    var imageWidth = imageEditor.getEditableElement().width;
    var imageHeight = imageEditor.getEditableElement().height;

    if (imageWidth > editorWidth || imageHeight > editorHeight) {
        imageEditor.zoomBestFit();
    }
}

I hope this helps. Let me know if I could be of any further assistance.

Regards,
Veselina Raykova
Telerik

[Sree]

Thank you Veselina, zoombestfit worked perfectly but my main concern is that once I have an image to zoombestfit, if I have to annotate using the pencil, line, rectangle or circle on the image the annotations move to the right. they do not stay where I write. It works fine if the image is in full size. Is there a way I can handle it in such a way that the annotations stay where I annotate in zoombestfit mode.

Thank you
Sree

[Vessy]

Hi Sree,

Thank you for the clarification.

I managed to reproduce the described issue and I have logged it into our bug tracking system for a further investigation. You can track its progress here: feedback. Unfortunately I cannot provide any suitable workaround for the moment.

As a small token of gratitude I have updated your Telerik points.

Regards,
Veselina Raykova
Telerik

[Sree]

Veselina,
I did fix it. What you have to do is make sure all the top containers of the ImageEditor element is aligned to left. It works well if you do so. But if they are aligned to center, the image is displayed in the center and the annotations move by the empty space to the left and you can't annotate to the right side of the image by that much length.

Thank you for your help.
Regards,
Sree

[Vessy]

Hello Sree,

I am glad that you have managed to solve the issue by your own and you are sharing the solution with us. I will make sure that the provided information will reach our developers as well.

All the best,
Veselina Raykova
Telerik