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

6 posts, 0 answers
  1. Sree
    Sree avatar
    3 posts
    Member since:
    Apr 2013

    Posted 19 Aug 2013 Link to this post

    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
  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 21 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sree
    Sree avatar
    3 posts
    Member since:
    Apr 2013

    Posted 21 Aug 2013 Link to this post

    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
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 26 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Sree
    Sree avatar
    3 posts
    Member since:
    Apr 2013

    Posted 26 Aug 2013 Link to this post

    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
  7. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 27 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017