Extending the image editor?

[Kristoffer]

Hi,

The image editor seems to suit my needs, but I need certain functionality that isn't there. Is it possible to extend your RadImageEditor class? More specifically, I want to add the following:

1. Zooming should use Nearest Neighbor instead of bilinear.
2. Image overlay. E.g. Some text printed above the image.
3. Additional input:
   • Mousewheel should zoom instead of scrolling.
   • Horizontal mousewheel scrolling.
   • Left/right mouse click handling.
   • Keyboard commands.

Also, I'm wondering if this control is hardware accelerated. Performance will be crucial in my case. Am I better off using some other image viewer?

[Boby]

Hello Kristoffer,
We'll try to answer your questions one by one:

1. Zooming is implemented as setting width and height to an internal Image element. You can edit the default template of the RadImageEditor and set the RenderOptions.BitmapScalingMode property of this element to the appropriate value:

   <Image x:Name="MainImage" RenderOptions.BitmapScalingMode="NearestNeighbor" />

2. We are not sure what you mean here. If you want to insert a static overlay, this could be done again by adding a suitable (semi-transparent) UI component to control's template. On the other side, there is an online example demonstrating how to create custom tool which inserts a watermark into the edited image.
3. The implemented behavior is to zoom with Ctrl+Mouse Scroll and scroll with Mouse Scroll. These cannot be changed for now. By default, there are two keyboard shorcuts defined: Undo and Redo. You can add your custom ones using the InputBindings property:

   <telerik:RadImageEditor>
       <telerik:RadImageEditor.InputBindings>
           <KeyBinding Gesture="Ctrl+O" Command="telerik:ImageEditorRoutedCommands.Open"/>
       </telerik:RadImageEditor.InputBindings>
   </telerik:RadImageEditor>

   For a list of the available commands, you can check the ImageEditorRoutedCommands class properties.Current implementation uses ScrollViewer for scrolling the image, which seems to handle the MouseLefButtonDown events. You can add event handler to the handled events, or use the tunneling event PreviewMouseDown, but can you first share more details about what are you trying to achieve, so that we can try to suggest better approach?

Most of the RadImageEditor tools use pixel shaders, which are executed on the GPU and are extremely fast.

Kind regards,
Boby
the Telerik team

[Kristoffer]

Thanks for your answer.

Please let me clarify our needs.
The question is, is ImageEditorUI/ImageEditor suitable or should we implement our own image viewer?

We want to show a large 16-bit grayscale image (where we have our custom converter to 8-bit). Tools for annotating the image (e.g. draw a line on it, without altering the image buffer) will be needed, hence your editor toolbox is a welcome feature - if the framework allows for drawing tools. Horizontal scrolling must be supported (i.e. handling of WM_MOUSEHWHEEL). Zooming is a very common operation and we must therefore be able to toggle the mousewheel mode between scroll and zoom, avoiding the need for the Ctrl key. Also, "pinch to zoom" and "swipe to scroll" on touch-enabled devices is desirable.

Edit: I forgot. Panning using the mouse (left mouse button down/up) is also a required feature.
Edit #2: One more thing! Mousewheel-zooming must center towards the mouse pointer! This is standard in most image viewers!

In any case, I think your image editor lacks horizontal scrolling as described above. The same goes for the Ctrl key. There should be a property like "EnableZoomOnMouseWheel" (does not affect horizontal scrolling).

[Boby]

Hello Kristoffer,
After the additional details you shared I am not sure whether RadImageEditor will suit your needs. Actually annotation layers are not supported, and all the tools directly edit the underlying image object. Considering this it become more or less pointless to use the control and take advantage only of the zooming/scrolling capabilities, which doesn't exactly fulfill your requirements.
Right now we are in the process of introducing touch support for some of the controls in the suites, and we will make sure to add RadImageEditor to this list.
Panning functionality is in our to-do list - you can vote and track the development progress of this feature in our Public Issue Tracking System here.
Thanks for the other suggestion too - we will consider change in the zooming implementation, so that the zoom to be performed towards the mouse cursor.

All the best,
Boby
the Telerik team