while trying to implement logic that show current user location i encountered an issue.
<Maps:Pushpin Location="{Binding MyLocation}" Canvas.ZIndex="1000" PositionOrigin="Center" >
<Maps:Pushpin.Template>
<ControlTemplate>
<Grid>
<Ellipse Width="{Binding MyAccuracyViewSize}" Height="{Binding MyAccuracyViewSize}"
Fill="#60008000" Stroke="Green" StrokeThickness="3"/>
<Ellipse Width="18" Height="18" Fill="#A0FF4500" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Maps:Pushpin.Template>
</Maps:Pushpin>
Bigger green circle shows accuracy area. Its size in pixels varies depending on zoom. If zoom level is big - it becomes rather big (> 480 pixels). At that point it gets cropped by screen resolution. AFAIK WP7 restriction is 2000x2000 px for control size.
Seems that this is a kind of a map control restriction.
Any ideas how to remove this restriction to show ellipse of size up to 2000x2000 px?
Thanks!
How about MapPolygon?
void OnPositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)
{
SecondsCounter = 0; //reset counter
double accuracy = e.Position.Location.HorizontalAccuracy;
if (accuracy < e.Position.Location.VerticalAccuracy)
{
accuracy = e.Position.Location.VerticalAccuracy;
}
if (PolyCircle == null)
{
PolyCircle = new MapPolygon();
PolyCircle.Opacity = 0.7;
//Set the polygon properties
PolyCircle.Fill = new SolidColorBrush(Colors.Orange);
PolyCircle.Stroke = new SolidColorBrush(Colors.Purple);
PolyCircle.StrokeThickness = 4;
map1.Children.Add(PolyCircle);
}
PolyCircle.Locations = CreateCircle(e.Position.Location, accuracy);
map1.Center = e.Position.Location;
}
public static double ToRadian(double degrees)
{
return degrees * (Math.PI / 180);
}
public static double ToDegrees(double radians)
{
return radians * (180 / Math.PI);
}
public static LocationCollection CreateCircle(GeoCoordinate center, double radius)
{
var earthRadius = 6367000; // radius in meters
var lat = ToRadian(center.Latitude); //radians
var lng = ToRadian(center.Longitude); //radians
var d = radius / earthRadius; // d = angular distance covered on earth's surface
var locations = new LocationCollection();
for (var x = 0; x <= 360; x++)
{
var brng = ToRadian(x);
var latRadians = Math.Asin(Math.Sin(lat) * Math.Cos(d) + Math.Cos(lat) * Math.Sin(d) * Math.Cos(brng));
var lngRadians = lng + Math.Atan2(Math.Sin(brng) * Math.Sin(d) * Math.Cos(lat), Math.Cos(d) - Math.Sin(lat) * Math.Sin(latRadians));
locations.Add(new GeoCoordinate(ToDegrees(latRadians), ToDegrees(lngRadians)));
}
return locations;
}
More here, in My Map position example. Good luck!
Related
I have an Xamarin project where I am using Skiasharp. I am relatively new to the drawing utility. Ive spent a few days trying to figure out this issue with no luck. After scaling and transforming the canvas, when I touch the skcanvas view on the phone screen and look at the 'location' point in the touch event, its not the same location that the canvas drew something. I need the exact location I drew the rectangle.
Its a lot of code below and granted its not all the code, but its the important parts. I am absolutely baffled why I draw in one (X,Y) location yet when I touch the screen the touch event for the canvas gives me a completely different location than what than the (X,Y) the widget was drawn at.
'''
public static void DrawLayout(SKImageInfo info, SKCanvas canvas, SKSvg svg,
SetupViewModel vm)
var layout = vm.SelectedReticleLayout;
float yRatio;
float xRatio;
float widgetHeight = 75;
float widgetWidth = 170;
float availableWidth = 720;
float availableHeight = 1280;
var currentZoomScale = getScale();
canvas.Translate(info.Width / 2f, info.Height / 2f);
SKRect bounds = svg.ViewBox;
xRatio = (info.Width / bounds.Width) + ((info.Width / bounds.Width) * currentZoomScale);
yRatio = (info.Height / bounds.Height) + ((info.Height / bounds.Height) *
currentZoomScale);
float ratio = Math.Min(xRatio, yRatio);
canvas.Scale(ratio);
canvas.Translate(-bounds.MidX, -bounds.MidY);
canvas.DrawPicture(svg.Picture, new SKPaint { Color = SKColors.White, Style =
SKPaintStyle.Fill });
// now set the X,Y and Width and Height of the large Red Rectangle
float imageCenter = canvas.LocalClipBounds.Width / 2;
layout.RedBorderXOffSet = imageCenter - (imageCenter / 2.0f) +
canvas.LocalClipBounds.Left;
float redBorderYOffSet = (float)(svg.Picture.CullRect.Top +
Math.Ceiling(.0654450261780105f * svg.Picture.CullRect.Bottom));
layout.RedBorderYOffSet = (float)(canvas.LocalClipBounds.Top +
Math.Ceiling(.0654450261780105f * canvas.LocalClipBounds.Bottom));
layout.RedBorderWidth = canvas.LocalClipBounds.Width / 2.0f;
layout.RedBorderWidthXOffSet = layout.RedBorderWidth + layout.RedBorderXOffSet;
layout.RedBorderHeight = (float)(canvas.LocalClipBounds.Bottom -
Math.Ceiling(.0654450261780105f * canvas.LocalClipBounds.Bottom * 2)) -
canvas.LocalClipBounds.Top;
layout.RedBorderHeightYOffSet = layout.RedBorderYOffSet + layout.RedBorderHeight;
// draw the large red rectangle
canvas.DrawRect(layout.RedBorderXOffSet, layout.RedBorderYOffSet, layout.RedBorderWidth,
layout.RedBorderHeight, RedBorderPaint);
// clear the tracked widgets, tracked widgets are updated every time we draw the widgets
// base widgets contain the default size and location relative to the scope. base line
widgets
// will need to be multiplied by the node scale height and width
layout.TrackedWidgets.Clear();
var widget = new widget
{
X = layout.RedBorderXOffSet + 5;
Y = layout.RedBorderYOffSet + layout.TrackedReticleWidgets[0].Height + 15;
Height = layout.RedBorderHeight * (widgetHeight / availableHeight);
Width = layout.RedBorderWdith * (widgetWidth / availableWidth);
}
// define colors for text and border colors for small rectangles (widgets)
public static SKPaint SelectedWidgetColor => new SKPaint { Color = SKColors.LightPink,
Style = SKPaintStyle.StrokeAndFill, StrokeWidth = 3 };
public static SKPaint EmptyWidgetBorder => new SKPaint { Color = SKColors.DarkGray,
Style = SKPaintStyle.Stroke, StrokeWidth = 3 };
public static SKPaint EmptyWidgetText => new SKPaint { Color = SKColors.Black, TextSize
= 10, FakeBoldText = false, Style = SKPaintStyle.Stroke, Typeface =
SKTypeface.FromFamilyName("Arial") };
public static SKPaint DefinedWidgetText => new SKPaint { Color = SKColors.DarkRed,
FakeBoldText = false, Style = SKPaintStyle.Stroke };
// create small rectangle (widget) and draw the widget
var widgetRectangle = SKRect.Create(widget.X, widget.Y, widget.Width, widget.Height);
canvas.DrawRect(widgetRectangle, widget.IsSelected ? SelectedWidgetColor :
EmptyWidgetBorder);
// now lets create the text to draw in the widget
string text = EnumUtility.GetDescription(widget.WidgetDataType);
float textWidth = EmptyWidgetText.MeasureText(text);
EmptyWidgetText.TextSize = widget.Width * GetUnscaledWidgetWith(widget) *
EmptyWidgetText.TextSize / textWidth;
SKRect textBounds = new SKRect();
EmptyWidgetText.MeasureText(text, ref textBounds);
float xText = widgetRectangle.MidX - textBounds.MidX;
float yText = widgetRectangle.MidY - textBounds.MidY;
canvas.DrawText(text, xText, yText, EmptyWidgetText);
'''
I am using this pinchGestureRecognizer in order to zoom on an image, but the problem is that after zooming I am not able to scroll the image vertically, even though I've wrapped my image in a scrollView with Orientation="Both"
Here is the PinchToZoomContainer class:
public class PinchToZoomContainer : ContentView
{
double currentScale = 1;
double startScale = 1;
double xOffset = 0;
double yOffset = 0;
public PinchToZoomContainer()
{
var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += OnPinchUpdated;
GestureRecognizers.Add(pinchGesture);
}
void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
{
if (e.Status == GestureStatus.Started)
{
// Store the current scale factor applied to the wrapped user interface element,
// and zero the components for the center point of the translate transform.
startScale = Content.Scale;
Content.AnchorX = 0;
Content.AnchorY = 0;
}
if (e.Status == GestureStatus.Running)
{
// Calculate the scale factor to be applied.
currentScale += (e.Scale - 1) * startScale;
currentScale = Math.Max(1, currentScale);
// The ScaleOrigin is in relative coordinates to the wrapped user interface element,
// so get the X pixel coordinate.
double renderedX = Content.X + xOffset;
double deltaX = renderedX / Width;
double deltaWidth = Width / (Content.Width * startScale);
double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;
// The ScaleOrigin is in relative coordinates to the wrapped user interface element,
// so get the Y pixel coordinate.
double renderedY = Content.Y + yOffset;
double deltaY = renderedY / Height;
double deltaHeight = Height / (Content.Height * startScale);
double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;
// Calculate the transformed element pixel coordinates.
double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);
// Apply translation based on the change in origin.
Content.TranslationX = targetX.Clamp(-Content.Width * (currentScale - 1), 0);
Content.TranslationY = targetY.Clamp(-Content.Height * (currentScale - 1), 0);
// Apply scale factor
Content.Scale = currentScale;
}
if (e.Status == GestureStatus.Completed)
{
// Store the translation delta's of the wrapped user interface element.
xOffset = Content.TranslationX;
yOffset = Content.TranslationY;
}
}
}
This the Clamp method:
public static class DoubleExtensions
{
public static double Clamp(this double self, double min, double max)
{
return Math.Min(max, Math.Max(self, min));
}
}
And this is the image in my XAML file:
<StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="3">
<ScrollView x:Name="imageScroll" Orientation="Both" VerticalOptions="FillAndExpand">
<entry:PinchToZoomContainer>
<entry:PinchToZoomContainer.Content>
<Image x:Name="zoomImage" Source="{images:EmbeddedImage Vebko.Images.CB_Edite_Vb1_2.jpg}" Margin="0,0,0,10" HorizontalOptions="Center" VerticalOptions="Center"/>
</entry:PinchToZoomContainer.Content>
</entry:PinchToZoomContainer>
</ScrollView>
</StackLayout>
Can anybody please help?
What i guess is that while you scale the Content, the PinchToZoomContainer : ContentView size remains the same that is why scrollview doesn't react = change control's size with height/width requests in code when its content gets scaled.
I need these images rendered in html5 canvas to be centered, rotated and resized depending on the size of the bounding box. I managed to rotate and resize the images but they are not centered anymore.
Can someone help me to fit these images in bounds and keep them in the center of the boxes? (fiddle updated)
http://jsfiddle.net/owtwv1a5/6/
var renderSprite = function(img, x, y, width,height, degree, scale){
var rads = degree * Math.PI/180;
var heightRatio = height/img.height;
var widthRatio = width/img.width;
var isRotated = (degree==90 || degree==270);
if (isRotated) {
var scale_ratio = height/img.width;
} else {
var scale_ratio = heightRatio;
}
var scaledImgHeight = img.height*scale_ratio;
var scaledImgWidth = img.width*scale_ratio;
var offsetX = width - scaledImgWidth;
if ((scaledImgHeight) < height) {
y += parseInt((height-scaledImgHeight)/2);
if (isRotated) {
x -= (scaledImgWidth - scaledImgHeight) / 2;
}
}
if ((scaledImgWidth) < width) {
x += parseInt((width-scaledImgWidth)/2);
if (isRotated) {
x -= (scaledImgWidth - scaledImgHeight) / 2;
}
}
ctx.save();
var centerX = x + scaledImgWidth * 0.5;
var centerY = y + scaledImgHeight * 0.5;
ctx.translate(centerX, centerY);
ctx.rotate(rads);
//ctx.scale(scale,scale);
ctx.translate(-centerX, -centerY);
ctx.drawImage(img, x,y, scaledImgWidth ,scaledImgHeight);
ctx.restore();
};
I am trying to crop an image. Inorder to select the crop area I am using an rectangle element.
The initial width and height of the rectangle are set to 100 respectively. On pinch the size of the rectangle will be increased. How can i obtain the size of this rectangle, which is enlarged?
The code I am using is as follows:
private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e)
{
ImageTransformation.ScaleX = _initialScale * e.DistanceRatio;
ImageTransformation.ScaleY = ImageTransformation.ScaleX;
cropRectangle.Width = cropRectangle.Width + e.DistanceRatio;
cropRectangle.Height = cropRectangle.Height + e.DistanceRatio;
}
I am unable to obtain the size of the enlarged rectangle
RenderTransforms won't change Width & Height of your Control because it affects only the rendering. Not sure there is a better way but you can simply calculate the render size by using the original size and the scale factor.
Here is a very basic example
xaml
<Canvas x:Name="cnv" Grid.Row="1">
<Rectangle Canvas.Top="150" Canvas.Left="150"
Width="200" Height="200" x:Name="myrect"
Fill="AliceBlue"
ManipulationStarted="myrect_ManipulationStarted"
ManipulationDelta="myrect_ManipulationDelta"
ManipulationCompleted="myrect_ManipulationCompleted">
</Rectangle>
</Canvas>
code
public MainPage()
{
InitializeComponent();
transformGroup = new TransformGroup();
translation = new TranslateTransform();
scale = new ScaleTransform();
transformGroup.Children.Add(scale);
transformGroup.Children.Add(translation);
myrect.RenderTransform = transformGroup;
}
private TransformGroup transformGroup;
private TranslateTransform translation;
private ScaleTransform scale;
private void myrect_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
//change the color of the Rectangle to a half transparent Red
myrect.Fill = new SolidColorBrush(Color.FromArgb(127, 255, 0, 0));
}
private void myrect_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
translation.X += e.DeltaManipulation.Translation.X;
translation.Y += e.DeltaManipulation.Translation.Y;
//Scale the Rectangle
if (e.DeltaManipulation.Scale.X != 0)
scale.ScaleX *= e.DeltaManipulation.Scale.X;
if (e.DeltaManipulation.Scale.Y != 0)
scale.ScaleY *= e.DeltaManipulation.Scale.Y;
}
private void myrect_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
myrect.Fill = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
Debug.WriteLine(myrect.Width * scale.ScaleX);
Debug.WriteLine(myrect.Height * scale.ScaleY);
}
I have quadratic images (arround 2000x2000). I want to show them fullcreen on a page with the possibility to zoom in with "pintch to zoom". So the initial image would have a sice of 768 x 768.
<Image Name="displayImage" VerticalAlignment="Center" MinHeight="768" HorizontalAlignment="Center" Source="{Binding Image}" Stretch="UniformToFill" CacheMode="BitmapCache" ImageOpened="OnImageOpened">
<Image.RenderTransform>
<CompositeTransform x:Name="transform" ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchDelta="OnPinchDelta" PinchStarted="OnPinchStarted" DragDelta="OnDragDelta" />
</toolkit:GestureService.GestureListener>
</Image>
.
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
var image = sender as Image;
if (image == null) return;
initialScale = transform.ScaleX;
Point firstTouch = e.GetPosition(image, 0);
Point secondTouch = e.GetPosition(image, 1);
center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X)/2.0,
firstTouch.Y + (secondTouch.Y - firstTouch.Y)/2.0);
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
var image = sender as Image;
if (image == null) return;
if (initialScale*e.DistanceRatio > 4 || (initialScale != 1 && e.DistanceRatio == 1) ||
initialScale*e.DistanceRatio < 1)
return;
if (e.DistanceRatio <= 1.08)
{
transform.CenterY = 0;
transform.CenterY = 0;
transform.TranslateX = 0;
transform.TranslateY = 0;
}
transform.CenterX = center.X;
transform.CenterY = center.Y;
transform.ScaleX = (Orientation == PageOrientation.Landscape)
? initialScale*(1 + (e.DistanceRatio - 1)*2)
: initialScale*e.DistanceRatio;
transform.ScaleY = transform.ScaleX;
}
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
var image = sender as Image;
if (image == null || transform.ScaleX <= 1.1) return;
double centerX = transform.CenterX;
double centerY = transform.CenterY;
double translateX = transform.TranslateX;
double translateY = transform.TranslateY;
double scale = transform.ScaleX;
double width = image.ActualWidth;
double height = image.ActualHeight;
if (centerX - scale*centerX + translateX + e.HorizontalChange < 0 &&
centerX + scale*(width - centerX) + translateX + e.HorizontalChange > width)
{
transform.TranslateX += e.HorizontalChange;
}
if (centerY - scale*centerY + translateY + e.VerticalChange < 0 &&
centerY + scale*(height - centerY) + translateY + e.VerticalChange > height)
{
transform.TranslateY += e.VerticalChange;
}
return;
}
Basically what I have now is a picture, with no borders (fullscreen) and I can zoom in. But the problem is, that the images is quadratic, so on the left and right there is something missing and I can't "scroll" (or better move the picture) to the left or right. Moving the picture arround only works when I have zoomed in, but I never see the missing parts of the image. Any ideas how to solve this?
I am not sure if it solves your problem. But is your image on a GRID or on a CANVAS?When it is on a grid the content is clipped. A Canvas can be much larger.