Diagram Image Zoombox

7 posts, 1 answers
  1. Mike
    Mike avatar
    16 posts
    Member since:
    Mar 2018

    Posted 20 Mar 2018 Link to this post

    Hello,

    I am trying to create an image reviewer where an image is displayed and reviewed.  Right now the image is displayed in a radDiagram as a radDiagramShape.

    What I am trying to do is create a feature where a box can be moved over the original image and the portion of the image that the box is over be displayed in a separate shape object.  That way the user can have a "zoomed" look over the original image without needing to zoom and pan over the original image.

    Can this be done?

    Thanks for any suggestions!

     

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3479 posts

    Posted 23 Mar 2018 Link to this post

    Hello, Mike, 

    According to the provided information, RadDiagram doesn't seem to be the suitable approach for managing an image in this way. We already have a feature request for an ImageEditor control which will support this functionality. 

    You can track its progress, subscribe for status changes and add your comments on the following link - feedback item. Currently, it is in our roadmap so we will do our best to introduce it in the upcoming releases. 

    Meanwhile, I can suggest you a custom implementation for pan/zoom  functionality of an image. Note that this is just a sample implementation and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Mike
    Mike avatar
    16 posts
    Member since:
    Mar 2018

    Posted 23 Mar 2018 Link to this post

    Hi Dess,

    Thanks for the help!

    This solution actually works very well.  I have placed a PanImage control next to the diagram with the target image which allows for a full size image display as well as a "zoom" view.

    I have 2 questions,

    1. I would like the user to be able to save an image with the original and "zoomed" fields together. Can I incorporate this control into the diagram directly?  

    2. I have found how to locate the size of the zoomed area, however I am not able to determine the "location" of that area over the original image.  The idea  is to place a box over the original image to a location corresponding to the "zoomed" field of view.

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3479 posts

    Posted 27 Mar 2018 Link to this post

    Hello, Mike, 
      
    1. The custom ImageElement is a derivative of LightVisualElement. hence, if you need to embed it inside a shape in RadDiagram it is just necessary to add the ImageElement to the Children collection of the shape. However, note that in order to be able to pan and zoom the image, the selection functionality of the shape should be disabled: 
    PanImageElement img = new PanImageElement();
    img.ImageElement.Image = Properties.Resources.World_physical_map_1970;
    ((RadDiagramShape)this.radDiagram1.Shapes[0]).Children.Add(img);
    this.radDiagram1.SelectionMode = Telerik.Windows.Diagrams.Core.SelectionMode.None;

    2. In the OnMouseDown method of the ImageElement you can use the Offset property in order to determine the zoomed area. 

    I would like to note that the provided ImageElement demonstrates just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.


    I hope this information helps.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Mike
    Mike avatar
    16 posts
    Member since:
    Mar 2018

    Posted 28 Mar 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi Dess,

    This works perfectly.  I was able to embed a PanImageElement into the diagram, figure out it's location and size relative to the original image and feed that back to the main form via a delagate which moves a box around another radshape containing the full scale image on mouse move and zoom.  It works better then I expected... Thanks for all the help!!!

    The last and final thing I would like to do which has been escaping me would be for it to work the other way around as well.  Being able to drag the box around the full image and then setting the "zoom" area accordingly.  I've already figured out the translation of the size/location between the two, however I am not able to set the raddiagramshape containing the box to drag.

    I have tried setting the isdragenabled property "box.IsDraggingEnabled = true;" but this doesn't seem to be doing the trick.

    Any advice on how to set a single shape object to draggable while fixing the rest of the diagram layout?

    I really appreciate all the help.

     

     

     

  6. Mike
    Mike avatar
    16 posts
    Member since:
    Mar 2018

    Posted 28 Mar 2018 in reply to Mike Link to this post

    I figured it out, it was rather easy to do. It's working better then I thought when I set out to do it.

    Thanks again!

  7. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3479 posts

    Posted 29 Mar 2018 Link to this post

    Hello, Mike,  

    I am glad that the problem you were facing is now resolved. Have in mind that in order a certain shape to be draggable it is necessary to be selected first. However, the SelectionMode of RadDiagram is set to None in order to enable the pan and zoom functionality of the custom PanImageElement that is embedded into the shape. 

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top