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.
Related
I have a very simple 9x9 grid. I know how to handle the rectangles on this grid. What I want is when I click on one of the grid rectangles, this rectangle should now be marked with a fill or border around it.
I can draw a rectangle, with a blue fill at exact the correct rectangle on the grid.
But with the next click on the grid, the new rectangle is drawn but the old rectangle is still there and will stay there. And so on.
My question is now, how can I paint always exact on rectangle at the click position?
Is maybe a class the right way?
Creating every time a new rectangle and destroy the old one?
var nullx = 140;
var nully = 50;
var breite = 65;
var hoehe = 65;
var pressed = false;
function setup() {
createCanvas(800, 1200);
}
function draw() {
//background(220);
noFill();
//strokeWeight(2);
sudokulines();
numberstorect();
if(pressed == true){
sqMark();
}
if (mousePressed == true){
console.log("click...")
sqMark();
}
}
function mousePressed(){
pressed = true;
}
function sqMark(){
var tempX;
var tempY;
//console.log(tempX,tempY);
tempX = (floor((mouseX - nullx) / breite) * breite) + nullx;
tempY = (floor((mouseY - nully) / hoehe) * hoehe) + nully;
console.log(tempX,tempY);
if (tempX > 139 && tempY > 49 ){
if (tempX < 661 && tempY < 571){
strokeWeight(0.7);
fill(0,0,255);
rect(tempX+2,tempY+2,breite-4,hoehe-4);
pressed = false;
}
}
}
function sudokulines(){
//The vertical lines
for (var i = 1; i <= 8; i++){
if (i == 3 || i == 6){
strokeWeight(3);
}else{
strokeWeight(1);
}
line(nullx + breite * i, nully, nullx + breite * i, nully+ 9*hoehe);
}
//The horizontal lines
for (var i = 1; i <= 8; i++){
if (i == 3 || i == 6){
strokeWeight(3);
}else{
strokeWeight(1);
}
//The big rectangle around
line(nullx , nully + hoehe * i, nullx + 9*breite, nully + hoehe * i);
}
strokeWeight(3);
rect(nullx,nully,9*breite,9*hoehe);
}
function numberstorect(){
textAlign(CENTER,CENTER);
fill(0);
textSize(breite/1.3);
text(2,nullx + breite/2, nully + hoehe/2);
}
It's important to understand that p5.js draws in immediate mode, so each element, once drawn, is not removable unless intentionally drawn over or cleared. This simplest solution to your specific problem is to simply save to location to be highlighted when the user presses the mouse, and then always clear the canvas and redraw everything (including the selected square) in the draw function. Because there's no animation, you can optimize this by disabling looping in your setup function, and then explicitly calling redraw when something happens that effects the display (i.e. the mouse is pressed).
var nullx = 140;
var nully = 50;
var breite = 65;
var hoehe = 65;
let selectedX = -1;
let selectedY = -1;
function setup() {
createCanvas(800, 1200);
// By default don't re draw every frame
noLoop();
}
function draw() {
background(255);
noFill();
//strokeWeight(2);
sudokulines();
numberstorect();
sqMark();
}
function mousePressed() {
// Set the selection
selectedX = (floor((mouseX - nullx) / breite) * breite) + nullx;
selectedY = (floor((mouseY - nully) / hoehe) * hoehe) + nully;
// Only redraw when something changes.
redraw();
}
function sqMark() {
if (selectedX > 139 && selectedY > 49) {
if (selectedX < 661 && selectedY < 571) {
strokeWeight(0.7);
fill(0, 0, 255);
rect(selectedX + 2, selectedY + 2, breite - 4, hoehe - 4);
pressed = false;
}
}
}
function sudokulines() {
//The vertical lines
for (var i = 1; i <= 8; i++) {
if (i == 3 || i == 6) {
strokeWeight(3);
} else {
strokeWeight(1);
}
line(nullx + breite * i, nully, nullx + breite * i, nully + 9 * hoehe);
}
//The horizontal lines
for (var i = 1; i <= 8; i++) {
if (i == 3 || i == 6) {
strokeWeight(3);
} else {
strokeWeight(1);
}
//The big rectangle around
line(nullx, nully + hoehe * i, nullx + 9 * breite, nully + hoehe * i);
}
strokeWeight(3);
rect(nullx, nully, 9 * breite, 9 * hoehe);
}
function numberstorect() {
textAlign(CENTER, CENTER);
fill(0);
textSize(breite / 1.3);
text(2, nullx + breite / 2, nully + hoehe / 2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
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.
Trying to create a simple breakout game, I've written all the code, except i dont understand why the ball is on the side of the screen boundaries instead of on top the paddle(player).
Breakout game, ball on side
class Ball
{
int Width => texture.Width;
int Height => texture.Height;
public Rectangle BoundingBox =>
new Rectangle((int)position.X, (int)position.Y, Width, Height);
Texture2D texture;
Vector2 position;
Vector2 speed;
public void SetStartBallPosition(Rectangle rec)
{
position.X = rec.X + (rec.Width - Width);
position.Y = rec.Y - Height;
if (Game1.RandomNumber.Next(0, 2) < 1)
{
speed = new Vector2(-200.0f, -200.0f);
}
else
{
speed = new Vector2(200.0f, -200.0f);
}
}
public void Draw(SpriteBatch sb)
{
sb.Draw(texture, position, Color.White);
}
public void Update(GameTime gt)
{
position += speed * (float)gt.ElapsedGameTime.TotalSeconds;
if (position.X + Width > Game1.ScreenBounds.Width)
speed.X *= -1;
position.X = Game1.ScreenBounds.Width - Width;
if (position.X < 0)
{
speed.X *= -1;
position.Y = 0;
}
if (position.Y < 0)
{
speed.Y *= -1;
position.Y = 0;
}
}
TL;DR.
My ball spawns at the side instead of middle.
Thanks for Help!
In the SetStartBallPosition(Rectangle rec), You've set the ball position at the full width of the boundary box, minus the full width of the ball:
position.X = rec.X + (rec.Width - Width);
Assuming that rec is empty, then in order to get the center, you need to divide both width's there in half. Like this:
position.X = rec.X + (rec.Width/2 - Width/2);
Be aware that when dividing, that they shouldn't have decimals.
Let me know if it works.
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);
}
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!