Programming with JavaScript

Re: Center ScaleTransform Zoom Control

pragati_sd — Sat, 27 Jun 2009 05:21:32 GMT

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

Re: Center ScaleTransform Zoom Control

pragati_sd — Thu, 11 Jun 2009 10:14:13 GMT

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

andrieso — Tue, 11 Nov 2008 10:05:12 GMT

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

Kermit75 — Sun, 21 Sep 2008 22:53:34 GMT

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

Yi-Lun Luo - MSFT — Thu, 18 Sep 2008 08:57:26 GMT

Hello, you're getting the global coordinates while your ScaleTransform applies on the canvasInner. You should get the position relative to the canvasInner instead.

Create a global variable and assign its value in handleLoad, and then get the mouse position relative to the canvasInner:

var canvasInner;canvasInner = plugIn.content.findName("canvasInner");

mouseX = mouseEventArgs.getPosition(canvasInner).x;

mouseY = mouseEventArgs.getPosition(canvasInner).y;

For your concern of CenterX/Y is 0 in handleLoad, that's because you haven't assigned any value to them.

Center ScaleTransform Zoom Control

Kermit75 — Tue, 16 Sep 2008 21:52:09 GMT

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 ---

--- 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;
}