I am new to SL. I am trying to make Google Image like Application.
Where i have to plot some points in a 2D Image.
My Image is just a single JPG file.
I have a Canvas control
I have a set the Canvas Background as a 2D map ( a JPG Image)
I am trying to draw some rectangles as a child of Canvas to display some 2D Points (x , Y cordinates) pulled from Database.
No i am trying to give a Zoom feature to it.
I found a code that helps me Zoom.
It works fine.
But i find the Image while Zoming get cut.
After Zooming by 0.1 Scale
I loose the Complete Picture.
All other Canvas objects (Rectangles) i find retains the scale value.
But the Image gets cut .
I am not sure if i am doing correct.
if (e.GetProperty("wheelDelta") != null) // IE and Opera
{
delta = ((double)e.GetProperty("wheelDelta"));
if (HtmlPage.Window.GetProperty("opera") != null)
delta = -delta;
}
else if (e.GetProperty("detail") != null) // Mozilla and Safari
{
delta = -((double)e.GetProperty("detail"));
}
Hi Thanks for going through my Code. I mean if u zoom only once then part of the Image gets Cut . Even i scroll down / right , i can only see the truncated image. The Image is Zoomed , along with that Rectangle also gets Zoomed.
Only one difference I can notice is the below block
if (scale.ScaleX > 1) // I find no scale element in your xaml
{
// Zoom out
ZoomMe.ScaleX -= 0.1;
ZoomMe.ScaleY -= 0.1;
//canvas.Width = canvas.ActualWidth / 1.1;
//canvas.Height = canvas.ActualHeight / 1.1;
}
}
I replace the scale with ZoomMe.
Best Regards
Min-Hong Tang
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
I am sorry i noticed that early , sorry for the Wrong Code . It should be ZoomMe only. But why r u saying the image gets Truncated. The image if zoomed , i cannot scroll & get the truncated Image.
Debashish Gupta
Member
10 Points
20 Posts
Google Image like application
Jul 26, 2010 10:06 AM | LINK
Hi ,
I am new to SL. I am trying to make Google Image like Application.
Where i have to plot some points in a 2D Image.
My Image is just a single JPG file.
I have a Canvas control
I have a set the Canvas Background as a 2D map ( a JPG Image)
I am trying to draw some rectangles as a child of Canvas to display some 2D Points (x , Y cordinates) pulled from Database.
No i am trying to give a Zoom feature to it.
I found a code that helps me Zoom.
It works fine.
But i find the Image while Zoming get cut.
After Zooming by 0.1 Scale
I loose the Complete Picture.
All other Canvas objects (Rectangles) i find retains the scale value.
But the Image gets cut .
I am not sure if i am doing correct.
Regards
Debashish
------------------------------------------------------Dashboard . XMAL------------------------------------------------------------
<UserControl x:Class="UGTML.View.DashBoard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="900" Height="680">
<Grid x:Name="LayoutRoot" Background="LightGray" Margin="5">
<Border Margin="5" Padding="5" Background="LightYellow"
BorderBrush="SteelBlue" BorderThickness="3" CornerRadius="15">
<ScrollViewer Background="AliceBlue" HorizontalScrollBarVisibility="Visible"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Canvas x:Name="canvas" Width="1000" Height="1000" Cursor="Hand" >
<Canvas.Background>
<ImageBrush x:Name="imageBrush" ImageSource="../Images/MineMap.jpg" />
</Canvas.Background>
<ItemsControl ItemsSource="{Binding Path=MinerList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas x:Name="innerCanvas">
<Rectangle x:Name="{Binding Path=Name}" Canvas.Left="{Binding Path=XCordinate}"
Canvas.Top="{Binding Path=YCordinate}"
Height="10" Width="10" Stroke="Black" Fill="{Binding Path=Fill}"
ToolTipService.ToolTip="{Binding Path=ToolTip}">
</Rectangle>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ZoomMe"></ScaleTransform>
</TransformGroup>
</Canvas.RenderTransform>
</Canvas>
</ScrollViewer>
</Border>
</Grid>
</UserControl>
---------------------------------------DASHBOARD.CS----------------------------------------------------------------------------
public DashBoard()
{
InitializeComponent();
HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheelTurned);
}
private void OnMouseWheelTurned(Object sender, HtmlEventArgs args)
{
double delta = 0; ScriptObject e = args.EventObject;
if (e.GetProperty("wheelDelta") != null) // IE and Opera
{
delta = ((double)e.GetProperty("wheelDelta"));
if (HtmlPage.Window.GetProperty("opera") != null)
delta = -delta;
}
else if (e.GetProperty("detail") != null) // Mozilla and Safari
{
delta = -((double)e.GetProperty("detail"));
}
if (delta > 0)
{
// Zoom in
ZoomMe.ScaleX += 0.1;
ZoomMe.ScaleY += 0.1;
//canvas.Width = canvas.ActualWidth * 1.1;
//canvas.Height = canvas.ActualHeight * 1.1;
}
else if (delta < 0)
{
if (scale.ScaleX > 1)
{
// Zoom out
ZoomMe.ScaleX -= 0.1;
ZoomMe.ScaleY -= 0.1;
//canvas.Width = canvas.ActualWidth / 1.1;
//canvas.Height = canvas.ActualHeight / 1.1;
}
}
if (delta != 0)
{
args.PreventDefault();
e.SetProperty("returnValue", false);
}
}
Min-Hong Tan...
All-Star
28750 Points
3295 Posts
Re: Google Image like application
Jul 28, 2010 09:44 AM | LINK
Hi,
I tested your code , do you mean if you zoom in to a very big level.
And then zoom back , your canvas will take smaller place.
I monitored it's because when you zoom in very large and zoom in , there will be some float in the ScaleX value.
For instance , your scaleX is 1.00000002 and your if statement is ScaleX > 1 then do stuff.
You can use Math.Round here.
if (Math.Round(ZoomMe.ScaleX,6) > 1 )
Best Regards
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Debashish Gupta
Member
10 Points
20 Posts
Re: Google Image like application
Jul 29, 2010 11:37 AM | LINK
Hi Thanks for going through my Code. I mean if u zoom only once then part of the Image gets Cut . Even i scroll down / right , i can only see the truncated image. The Image is Zoomed , along with that Rectangle also gets Zoomed.
Please suggest , me what will be the right way.
Regards
Debashish.
Min-Hong Tan...
All-Star
28750 Points
3295 Posts
Re: Google Image like application
Jul 30, 2010 02:43 AM | LINK
Hi,
My Image does not get cut.
I basically copied your code.
Only one difference I can notice is the below block
if (scale.ScaleX > 1) // I find no scale element in your xaml
{
// Zoom out
ZoomMe.ScaleX -= 0.1;
ZoomMe.ScaleY -= 0.1;
//canvas.Width = canvas.ActualWidth / 1.1;
//canvas.Height = canvas.ActualHeight / 1.1;
}
}
I replace the scale with ZoomMe.
Best Regards
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Debashish Gupta
Member
10 Points
20 Posts
Re: Google Image like application
Jul 30, 2010 01:06 PM | LINK
Hi Min ,
I am sorry i noticed that early , sorry for the Wrong Code . It should be ZoomMe only. But why r u saying the image gets Truncated. The image if zoomed , i cannot scroll & get the truncated Image.
If i uncomment the below code
//canvas.Width = canvas.ActualWidth / 1.1;
//canvas.Height = canvas.ActualHeight / 1.1;
My Rectangle Element gets shifted from the original position with ZoomMe.Scale(X/Y) not changing with the Canvas.(Width/height) Proportionately.
Regards
Debashish