AB4D Forum

Full Version: Ability to Rotate the image
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello, I'm just starting to integrate the control into my application and need the ability to rotate. Has someone done this yet? I need to know the outline of where to add the Transform code to make this happen. I've got all the properties mapped to the panel so my appliciation would call it like this:

// Rotate the image
indexImgZoomPanel.Rotate(intRotateAngle);

I'm just not sure where in the DLL to add code that would actually do the rotation. I tried adding code in here but it didn't work:

private Transform GetViewboxTransform

thanks,

Jim
Rotation can be added to ZoomPanel and ViewboxEx with the following code change (this can be only done if you have purchased ZoomPanel with source code).

First you need to add Rotate DependencyProperty to ViewboxEx.
Add the following before the constructor:

Code:
public static readonly DependencyProperty RotateProperty = DependencyProperty.Register("Rotate", typeof(double), typeof(ViewboxEx), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure));

        public double Rotate
        {
            get
            {
                return (double)base.GetValue(RotateProperty);
            }
            set
            {
                base.SetValue(RotateProperty, value);
            }
        }

Now you have to change the GetViewboxTransform method (as you have correctly found out). After "transformGroup = new TransformGroup();" add the following:

Code:
if (this.Rotate != 0)
    transformGroup.Children.Add(new RotateTransform(this.Rotate, objectCenter.X / scaleXFactor, objectCenter.Y / scaleYFactor));


Note that this line rotates the content of the ViewboxEx around the center of the ViewboxEx control. It can be rotated by simply changing the Rotate property.


Now we need to add the Rotate property to ZoomPanel as well:

Add the following before ZoomPanel constructor:

Code:
public static readonly DependencyProperty RotateProperty = DependencyProperty.Register("Rotate", typeof(double), typeof(ZoomPanel), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure));

        public double Rotate
        {
            get
            {
                return (double)base.GetValue(RotateProperty);
            }
            set
            {
                base.SetValue(RotateProperty, value);
            }
        }

You also need to change the template for the ZoomPanel - change the Generic.xaml in Themes folder. The line 12 should look like:

Code:
<local:ViewboxEx Name="PART_ZoomViewboxEx" Stretch="Uniform" Rotate="{TemplateBinding Rotate}">

The Rotate property of ViewboxEx was binded to the ZoomPanel Rotate property.


That is it :cool:

Now also ZoomPanel has a Rotate property that can rotate its content.

You can simply test this by adding a Slider to the ZoomPanelSample.xaml:
Add the following into the top right StackPanel:

Code:
<Slider Name="RotateSlider" Minimum="0" Maximum="360" Value="0" Width="160"/>

Now you can bind the slider to the ZoomPanel with adding the following attribute to the ZoomPanel:
Rotate="{Binding ElementName=RotateSlider, Path=Value}"
Perfect, that's what I needed, thank you so much :)
Hello again, I"m having a new problem that has been there from the beginning. When the image comes in initially rotated sideways and I execute the rotate commands based on the above help. What the view box does is not re-size the current window based on the new rotation orientation. It affects moving via mouse also, the mouse drags in the wrong direction along with the movement keys and the top and bottom of the image is chopped off. How do I get the view window to re-calculate the new image proportions based on the newly rotated image? It only fails on images that start out sideways. If the image was correctly oriented I have no problem.

here's the example, i marked out some of the image for security:

before:

http://i54.tinypic.com/1zyeujc.jpg

after doing a 90 degree rotate:

http://i54.tinypic.com/10h66mf.jpg

what's interesting is if I drag the resizer to a portrait view all the way over to the left, it brings back the image as you see below. I want that to happen seemlessly somehow. It's not calculating the correct height top to bottom for some reason. it's clipping top/bottom. And the mouse drag movement going in the wrong directory is like it needs some type of orientation property added?

http://i52.tinypic.com/15n6m4h.jpg
First I would like to apologize to not replayed to you sooner.

If I understand you correctly than you would like to have a button on page that user can click to rotate the image by 90 degress (for images that come in rotated).

This can be done without changing the existing ZoomPanel code (adding Rotate property) but with using LayoutTransform on the Image. For example:

The XAML part:
Code:
<Window x:Class="WpfApplication3.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ab2d="clr-namespace:Ab2d.Controls;assembly=Ab2d.Controls.ZoomPanel"
    Title="Window1" Height="500" Width="700">
    <Grid>
        <ab2d:ZoomPanel Name="ZoomPanel1" ZoomMode="Move">
            <Image Source="Document1.tif">
                <Image.LayoutTransform>
                    <RotateTransform x:Name="ImageRotate" Angle="0"/>
                </Image.LayoutTransform>
            </Image>
        </ab2d:ZoomPanel>
        <ab2d:ZoomController VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <Button Name="RotateButton" Click="RotateButton_Click" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="100" Content="ROTATE"/>
    </Grid>
</Window>

The code behind part:
Code:
private void RotateButton_Click(object sender, RoutedEventArgs e)
        {
            ImageRotate.Angle += 90;
        }

Here the size measurement and mouse moves work. If RenderTransfrom would be used instead, the size measurement would not work.

Unfortunately the Rotate property that was described in the previous post does not work correctly.

I am working on a new version of ZoomPanel that will also have the Rotate property that will work correctly - its implementation is quite complex so I will not post the needed changes here. If you need the Rotate property (that can be binded and changed for example with a slider), please let me know and I will send you a pre-release version of the ZoomPanel.

But if you only need to show images rotated by 90 degrees I would prefer using LayoutTransfrom.