Center ScaleTransform Zoom Control

09-16-2008 5:52 PM |

Hello!
I am trying to  center a canvas during zoom, but the coordinates seems to missmatch somehow.

The mouse coordinates does not match the CenterX and CenterY of the "ZoomTransform" object.
Setting some kind of offset does not seem to work either.

Confused. See code below.
 

--- XAML --- 

 <Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="1200" Height="600"
    Background="#FFFFFFFF"
    x:Name="Page"
    MouseMove="mouseMove"
    >
    <Canvas x:Name="canvasInner">
        <Canvas.RenderTransform>
            <ScaleTransform x:Name="ZoomTransform"/>
        </Canvas.RenderTransform>

        <Canvas x:Name="One">
            <Path Data="F1M367.94,255.39L360.02,255.39" x:Name="ObjA" Loaded="StyleL"/>
        </Canvas>
        
        <Canvas Name="Two">
            <Path Data="M394.10,296.43L396.74,296.43L396.74,297.15L394.10,297.15L394.10,296.43z" x:Name="ObjB" Loaded="StyleS"/>
            <Path Data="M246.01,162.50L248.65,162.50L248.65,162.98L246.01,162.98L246.01,162.50z" x:Name="ObjC" Loaded="StyleS"/>
        </Canvas>        
        
        <Canvas Name="Three">
            <Ellipse x:Name="ObjD" Canvas.Left="360.35" Canvas.Top="287.4" Loaded="StyleTE"/>
            <Path x:Name="ObjE" Data="F1M245.77,275.19L245.77,277.47" Loaded="StyleTP"/>
        </Canvas>
    </Canvas>

    <TextBlock x:Name="CoordBox" FontSize="10" Foreground="#FF000000" TextWrapping="Wrap" Text="0 : 0"/>
</Canvas>

--- JS ---

var ZoomObj;
var KeyToken;
var mouseX;
var mouseY;

MouseEnter_ToolTip.Page.prototype =
{
    handleLoad: function(control, userContext, rootElement)
    {
        this.control = control;
   
        //Get globel zoom object
        ZoomObj = control.content.findName("ZoomTransform");
        ZoomObj.ScaleX=1.6;
        ZoomObj.ScaleY=1.6;

        //  ---  !!! This returns ZERO !!!  ---
        alert(ZoomObj.CenterX);
        alert(ZoomObj.CenterY);
       
        // Set the root Canvas object to a KeyDown event-handler function.
        KeyToken = rootElement.addEventListener("keyDown", onKeyDown);
    }
}


function ZoomIn()
{
    CenterMap();
    ZoomObj.ScaleX += 0.1;
    ZoomObj.ScaleY += 0.1;
}

function ZoomOut()
{
        CenterMap();
        ZoomObj.ScaleX -= 0.1;
        ZoomObj.ScaleY -= 0.1;
}
function CenterMap()
{
    ZoomObj.CenterX = mouseX;
    ZoomObj.CenterY = mouseY;
}

function onKeyDown(sender, keyEventArgs)
{
    //Q
    if ((keyEventArgs.key == 46))
    {
        ZoomOut();
    }
    //W
    if ((keyEventArgs.key == 52))
    {
        ZoomIn();
    }
    //C
    if ((keyEventArgs.key == 32))
    {
        CenterMap();
    }
}

function mouseMove(sender, mouseEventArgs){
    mouseX = mouseEventArgs.getPosition(null).x;
    mouseY = mouseEventArgs.getPosition(null).y;
   
    var toolTipTxtObj = sender.findName("CoordBox");
    toolTipTxtObj.Text = mouseX +" : "+ mouseY;
}

Re: Center ScaleTransform Zoom Control

09-21-2008 6:53 PM |

Thanks, that helped a lot. :D

The vectors (figure) are still not centered though, and the zoom in/out center is closer to the upper left corner than the screen center.
I have tried setting the CenterX/Y and getting the width/height, but can not seem to find the right properties.
 

Re: Center ScaleTransform Zoom Control

11-11-2008 5:05 AM |

Any luck on calculating the CenterX and CenterY correctly on your path objects? This is quite simple should you know the container width and height, and also if you elements are postioned within the positive X and Y locations.

However, applying a scaletransform on a path objects where the translateX and Y is not at (0,0), say (-36000, 28000), finding a solution seems to be impossible if the translatetranform is set, and the scaling is changed afterwards.

Any luck on this?

Re: Center ScaleTransform Zoom Control

06-11-2009 6:14 AM |

Hi!

I'm trying the zoom with mouse wheel & mouse drag - with the ScaleTransform  - Canvas within canvas.

The problem is when I tried wheel zoom - then drag - then again wheel zoom, it is not getting the expected result. I tried it by resetting the CenterX & CenterY of ScaleTransform.

I've refered the code from this link, but with many changes for validation - http://www.cyberkruz.com/category/Silverlight.aspx

Will you plz help me. 

If possible plz share the sample code on the id - pragati.dukale@revalanalytics.com

Thanks in advance.

Pragati 

 

 

Re: Center ScaleTransform Zoom Control

06-27-2009 1:21 AM |

Hello,

Thanks for the help, the sample project you sent me helped a lot.

Actually, I'm trying the heatmap zoom - drag on a specific, height - width canvas.

The problem is, when I go for zoom in, the borders of each item of HeatMap get zoomed. I've done the calculation like this with the StrokeThickness property of HeatMap -

HeatMap.StrokeThickness = 0.05 / scaleFactor;

so that whatever is the scale, it should remain 0.05. But, still its not working, the borders are just get zoomed in & it looks really bad.

Do I need to redraw the heatmap again on the canvas setting -> HeatMap.StrokeThickness = 0.05; 

Will you please help me..

 Thanks in advance.

Pragati