Adding texts to flipped System.Windows.Controls Image - c#

I have a wpf image and want to flip it then add to some texts to the image. My below code flips the image but when i add some texts to the image after flipping, the texts also is flipped. How can i avoid this situation ?
//Rotate image in xaml, named 'shipBackImage'
shipBackImage.RenderTransformOrigin = new Point(0.5, 0.5);
ScaleTransform flipTransform = new ScaleTransform();
flipTransform.ScaleX = -1;
shipBackImage.RenderTransform = flipTransform;
//Below method 'SetComponentsOnImage' adds some texts to the image.
shipBackImage.Source = ImageHandler.GetInstance().SetComponentsOnImage((RenderTargetBitmap)shipBackImage.Source, BitmapType.Back);
I expected no rotation to texts

Related

UWP change canvas view based on (x,y)Coordinates of canvas?

I have a Canvas having width=200000,height=200000.My screensize height and width is 700 and 1400 respectively.If I display the canvas it won't show entire canvas.So i have used pointerWheelChanged event of canvas and I had calculate how much it was scrolled when scrolling the wheel of mouse.i.e.,new (x,y)coordinates of canvas.Still this it worked fine.But i Don't know how to show the canvas from my new coordinates.
Canvas c=new Canvas();
Image img1=new Image();
Image img2=new Image();
c.Children.Add(img1);
c.Children.Add(img2);
Canvas.SetLeft(img1,100);
Canvas.SetTop(img1,200);
Canvas.SetLeft(img2,2000);
Canvas.SetTop(img2,1500);
My Canvas has two Images ,one at (100,200) and the other at (2000,1500).If my screen height and width are 700 and 1400 respectively.When I run it ,it shows only the first image in the screen ,because second image was in some other place .i.e.,out of screen(It was hidden).How can I show second image ,based on the data calculate from the mousewheelchanged event.I had calculated it,but i don't know how to show canvas from the calculated value??
In PointerWheelChangedEvent i have added it,
Canvas layout = sender as Canvas;
int wheelDelta = e.GetCurrentPoint(layout).Properties.MouseWheelDelta;
Boolean isHorizontalSwipe =
e.GetCurrentPoint(layout).Properties.IsHorizontalMouseWheel;
Point scrollPoint = e.GetCurrentPoint(layout).Position;
The wheelDelta is added or subracted from current canvas Point based on horizontal or vertical swipe.
what I'm trying to do is?
You can assign a new Translation to Canvas to update position of the Canvas based on the wheelDelta. For example:
private void Canvas_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
Canvas layout = sender as Canvas;
int wheelDelta = e.GetCurrentPoint(layout).Properties.MouseWheelDelta;
Boolean isHorizontalSwipe =
e.GetCurrentPoint(layout).Properties.IsHorizontalMouseWheel;
if (horizontal swipe)
{
layout.Translation = new Vector3(layout.Translation.X + wheelDelta, layout.Translation.Y, layout.Translation.Z);
}
else
{
layout.Translation = new Vector3(layout.Translation.X, layout.Translation.Y + wheelDelta, layout.Translation.Z);
}
}

Strech image to fill the transparent background using Magick.NET

I have an image (attached).
I want the image to be stretched out to cover the yellow area.
I am using c#, magick.net
What will be the best approach?
I propose the following approach:
read input image saving original size
remove the transparent* area using trim
stretch the (now smaller) image to the original size
*If the yellow area in your sample image is actually transparent you can leave fuzz = 0 in the following code, otherwise you'll have to adjust the value to be sure to remove all the unwanted area.
string srcImageFullPath = "c:\input.png";
int fuzz = 0;
string destImageFullPath = "c:\output.png";
// Read image from file
using (MagickImage image = new MagickImage(srcImageFullPath))
{
//save height/width of the original image
int height = image.Page.Height;
int width = image.Page.Width;
//set fuzz percentage
image.ColorFuzz = new ImageMagick.Percentage(fuzz);
//trim borders
image.Trim();
//resize image to original size
MagickGeometry size = new MagickGeometry(width, height);
size.IgnoreAspectRatio = true;
image.Resize(size);
// Save the result
image.Write(destImageFullPath);
}
In the following picture you can see the original image on the left, and the image after resizing on the right:
Notes
Trim removes any border that has the same color of the pixels in the corner of you image (see here for the details)
Since the yellow border in your sample image is not made of a single color you can use Fuzz to remove "similar" colors (more info here). As said before if your border is transparent just leave fuzz = 0

Extract Clip from WPF Canvas

I'm having issues trying to not only clip, but to "extract" a portion of a WPF Canvas. So basically I would like the "Clip" to expand to the full size of the window, or convert the clipped item to separate UI Element for exporting to PNG. I write pseudocode because the real code comes from an Autocad model.
double oPrintWidth=1169;
Canvas c = new Canvas();
c.Width = oPrintWidth * 2.54;
c.Height = c.Width * ratio;
// Define the path to clip
string thisPathData = "M12233 M222333 M3443" // fake
c.Clip = Geometry.Parse(thisPathData);
At this point I have the same size canvas but everything other than my path is now black. And the path is still in the original position. I need to now make the clip the entire canvas.
I have played with RenderTransform but I'm lost as what to do next, I'm not so good with matrix calculations.
Original Canvas (Collection of UI Elements)
AFTER CLIP
DESIRED RESULT
Ultimately this would be printed but would prefer to keep it in WPF until last minute to retain VECTOR properties for translating to SVG/XPS/ETC
To make a Clip of the entire Canvas and then apply that Clip to the Canvas I recommend you let WPF do it for you be setting the ClipToBounds property:
Canvas c = new Canvas();
c.ClipToBounds = true;
If that doesn't suit your needs, I would look at the Margin, ActualWidth, and ActualHeight properties to determine the clip region. Then create a RectangleGeometry that matches the size of your Canvas.
EDIT in response to your comments.
Well, I've had some time to work at it some more. What I have been able to do is create a clip region, then I transformed the canvas so that the clip region filled the canvas as much as possible. I think this is what you are after...
First of all I needed to measure the clipped region:
Rect bounds = canvas.Clip.Bounds;
double scaleX = c.Width / (bounds.Right - bounds.Left);
double scaleY = c.Height / (bounds.Bottom - bounds.Top);
This scaling information is used to make the clipped region fit exactly to the size of the canvas.
Now, we need to apply transformations to the canvas:
TransformGroup group = new TransformGroup();
TranslateTransform move = new TranslateTransform(-bounds.Left, -bounds.Top);
ScaleTransform scale = new ScaleTransform(scaleX, scaleY);
group.Children.Add(move);
group.Children.Add(scale);
canvas.RenderTransform = group;
So what is happening here? First of all, the objective is to apply a couple transformations. We need to center the clipped region (translation) and we need to make the clipped region larger (scale). Now, when I say clipped region, I mean the contents of that region. In actuality, we are moving the canvas's rendered output. Moving the region bounds is not what we want to do.
To do this in WPF, we need to add each transformation we want to a child of a TransformGroup.
In this case, we are translating the canvas's output so that its top-left corner is (0, 0) This is necessary because afterwards we will scale the rendered output. So, now, we need to scale the canvas's output so that the image fits as large as it can. To do this, we need to create a ratio that compares the canvas size to the clipped region size.
Here is the formula for scaling the output:
ratio = canvasSize / clippedSize
scaledSize = clippsedSize * ratio
Now, scaling the canvas's output will allow the clipped region to appear as large as possible.
Take a look at the results. Here are images demonstrating the canvas's output before and after the transformations are applied:
Before
After
I figure I might as well give you all the code I used:
Canvas c = new Canvas();
double oPrintWidth=100;
double ratio = .89;
c.Width = oPrintWidth * 2.54;
c.Height = c.Width * ratio;
c.Background = new ImageBrush((ImageSource)FindResource("TestImage")) { Stretch = Stretch.UniformToFill };
// Define the path to clip
string newPath = "M 64,64 L 64,128 128,128, 128,64 Z";
c.Clip = Geometry.Parse(newPath);
Rect bounds = c.Clip.Bounds;
double scaleX = c.Width / (bounds.Right - bounds.Left);
double scaleY = c.Height / (bounds.Bottom - bounds.Top);
TransformGroup group = new TransformGroup();
TranslateTransform move = new TranslateTransform(-bounds.Left, -bounds.Top);
ScaleTransform scale = new ScaleTransform(scaleX, scaleY);
group.Children.Add(move);
group.Children.Add(scale);
c.RenderTransform = group;
MyBorder.Child = c;
And the XAML:
<Window.Resources>
<BitmapImage UriSource="uvtest.jpg" x:Key="TestImage"/>
</Window.Resources>
<Grid Background="Gray">
<Border x:Name="MyBorder" Background="White" BorderBrush="Black" BorderThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

Animation AutoReverse = false but does it anyway and starts from the wrong starting point

I'm trying to get an image from the bottom right corner of a canvas to the top left corner of the canvas an repeating this behavior forever. The image should never do the reverse animation from the top left corner to the top right corner. I am new with animation, so I used this example.
At the moment my image is moving from the top left corner to the right bottom corner and back. I tried changing the start position of the image in the canvas, with the result, that the animation used this position as new starting point. I also tried using negative values, to get the image moving to the opposite direction. Reducing the amount of points in the segment got me a shorter animation path, but nothing else. I also set AutoReverse=false, without any changes in the animation behavior.
My ideas are,
- The segment class is building a circle out of the points, but which other class to use?
- The start position has to change, but how do I get the object to move up instead of down the screen?
My Code,
Storyboard animationSB = new Storyboard();
//Image book = createImage(model.keywordCollection[0].cover.small);
Image rope1 = createImage("pack://application:,,,/GUI;component/Resources/rope_trans.png");
rope1.Height = 360.0;
rope1.Width = 185.0;
//Transform to move the book image
TranslateTransform aniRope1 = new TranslateTransform();
this.RegisterName("AnimatedRope1", aniRope1);
rope1.RenderTransform = aniRope1;
Canvas.SetLeft(rope1, 258.659);
Canvas.SetTop(rope1, 583.212);
LeftRope.Children.Add(rope1);
//Anitmation path
PathGeometry animationPath1 = new PathGeometry();
PathFigure pathFigure1 = new PathFigure();
PolyLineSegment lineSegments1 = new PolyLineSegment();
lineSegments1.Points.Add(new Point(LeftRope.ActualWidth, LeftRope.ActualHeight));
lineSegments1.Points.Add(new Point(258.659, 583.212));
lineSegments1.Points.Add(new Point(120.596, 272.665));
lineSegments1.Points.Add(new Point(0, 0));
pathFigure1.Segments.Add(lineSegments1);
animationPath1.Figures.Add(pathFigure1);
animationPath1.Freeze();
//Animate transform to move image along the path on the x-axis
DoubleAnimationUsingPath translateXAnimation1 = new DoubleAnimationUsingPath();
translateXAnimation1.PathGeometry = animationPath1;
translateXAnimation1.Duration = TimeSpan.FromSeconds(6);
translateXAnimation1.Source = PathAnimationSource.X;
translateXAnimation1.AutoReverse = false;
Storyboard.SetTargetName(translateXAnimation1, "AnimatedRope1");
Storyboard.SetTargetProperty(translateXAnimation1, new PropertyPath(TranslateTransform.XProperty));
//Animate transform to move image along the path on the y-axis
DoubleAnimationUsingPath translateYAnimation1 = new DoubleAnimationUsingPath();
translateYAnimation1.PathGeometry = animationPath1;
translateYAnimation1.Duration = TimeSpan.FromSeconds(6);
translateYAnimation1.Source = PathAnimationSource.Y;
translateYAnimation1.AutoReverse = false;
Storyboard.SetTargetName(translateYAnimation1, "AnimatedRope1");
Storyboard.SetTargetProperty(translateYAnimation1, new PropertyPath(TranslateTransform.YProperty));
//Create Storyboard containing and applying the animation
//animationSB.RepeatBehavior = RepeatBehavior.Forever;
animationSB.Children.Add(translateXAnimation1);
animationSB.Children.Add(translateYAnimation1);
animationSB.AutoReverse = false;
The storyboard is started in another method.
I am developing on windows 8.1N with .Net 4.5.1 C# an desktop application.
You should replace the line:
lineSegments1.Points.Add(new Point(LeftRope.ActualWidth, LeftRope.ActualHeight));
with
pathFigure1.StartPoint = new Point(LeftRope.ActualWidth, LeftRope.ActualHeight);
It turns out that if you don't specify the StartPoint for PathFigure, it automatically closes the figure, i.e. connects last and first points from the points collection.

Adding transparent Gif images to list view in c#

I am trying to add a transparent Gif image to list view, I used the following code snippet
to add gif image.
// control as ListView
void AddGiftoListView(Control parent)
{
Bitmap img = (Bitmap)Properties.Resources.madLoader; // Transparent gif image
Size sz = img.Size;
PictureBox pbGif = new PictureBox();
pbGif.Size = img.Size;
pbGif.Image = img;
parent.Controls.Add(pbGif);
Point p = new Point(1, 1);
pbGif.Location = p;
pbGif.Show();
}
But the gif is not transparent, when the list view filled with text, we can see gif on top of that with white background. is there any way ro resolve this issue?
Thanks,
Shiju P K
Try making your form's TransparencyKey as white
this.TransparencyKey = Color.White;

Categories

Resources