Diagram Image Zoombox

[Mike]

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!

 

[Dess | Tech Support Engineer, Principal]

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

[Mike]

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.

[Dess | Tech Support Engineer, Principal]

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

[Mike]

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.

 

 

 

[Mike]

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!

[Dess | Tech Support Engineer, Principal]

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