I want to clip a Grid by a dynamic PathGeometry and it's PathFigure.
In WPF application UIElement.Clip has some properties like CombinedGeometry,PathGeometry ... But in UWP there's only RectangleGeometry.
I'm very new to .Net and stuck on this right now, does anyone know the equivalent way in UWP?
Thanks.
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.clip
According to MSDN,
Remarks
The clipping geometry for UIElement.Clip in the Windows Runtime API
must be a RectangleGeometry. You can't specify a non-rectangular
geometry, as is permitted in some XAML frameworks like Microsoft
Silverlight. The clipped area is the "outside" of the geometry. In
other words, the content that is shown (not clipped) is the area of
the rectangle that is drawn with Fill if the geometry were used as
data for a Path rather than for clipping. The clipped area is any area
that falls outside the rectangle. The clipped area isn't hit-testable.
As #Jerry pointed out in this answer,
you can apply a Transform to a RectangleGeometry which gives you a
little more insofar as options.
Related
I'm working on an application that has a graphic editor. Aside from some other graphic components the main feature are some shapes (rectangles, triangles, stars etc.). The thing I would like to do is to have the ability to resize them after a double click, so there should be a container shown with points that can be dragged to resize the shape. There are many great tutorials out in the internet but mainly for rectangles or for other shapes that are "packed" into rectangle viewboxes.
The issue is that I need to have my resize points exactly on the vertexes, so for example I can't have a triangle inside a rectangle viewbox, but I need exactly three points - one on every vertex. The same applies for the other shapes like stars and arrows which are much more complicated.
Here's what I mean:
So I think I have two ways. Either pass a dynamic list of points after a double click and display them as separate shapes or binding them with my shape inside my shape class, but I cannot figure out how to add multiple shapes to a viewbox so that they keep their abilities. Here is a simplified snippet of how my shape classes look like:
public class RectangleObject : ShapeObject
{
private Rectangle _rectangle;
private Viewbox _viewbox;
public RectangleObject(Color fillColor)
{
_rectangle = new Rectangle()
{
Fill = new SolidColorBrush(fillColor),
Stretch = Stretch.Fill
};
_viewbox.child = _rectangle;
}
public void SetDimensions(){}
//... and some other methods
}
A nice solution would be if the viewbox could contain my shape and the resize points but I will appreciate any advice. I know that a canvas would be a better solution but all other components are packed in viewboxes so it would be problematic because of inheritance and would need many changes. Thanks in advance!
Yes I know exactly what you mean. I used CorelDraw back in the day and then Adobe Illustrator and both had the concept of shape transformation mode (your image on the right) as well as vertex edit mode (your image on the left). UWP is similar to WPF and WPF has a concept of adorners which you can customise to do whatever you want including what I just described.
So when you enter one of these modes, rather than modify your existing shape to show selectors; instead you create adorners that are superimposed over the shape. That way one doesn't clobber the other and you may have custom behavior for each as you indicated.
See also
Adorners - MSDN, https://msdn.microsoft.com/en-us/library/ms743737(v=vs.110).aspx, retrieved 2017-1-12
I am able to add an image to my map just fine via code.
However when I zoom in/out, the image stays the same. I would like it scale relative to the map.
In the WPF version of the Map, you could use an ImageBrush for a MapPolygon and it would be constrained to the bounding box.
I tried the solution from this SO question, but it seems to have no effect on the Image.
imageLayer.Children.Clear();
MapLayer.SetPosition(_vm.RadarImage, new Location(_vm.Overlay.LatN, _vm.Overlay.LonW));
imageLayer.Children.Add(_vm.RadarImage);
shapeLayer.Shapes.Clear();
var rect = new MapPolygon();
rect.Locations.Add(new Location(_vm.Overlay.LatN, _vm.Overlay.LonW));
rect.Locations.Add(new Location(_vm.Overlay.LatS, _vm.Overlay.LonW));
rect.Locations.Add(new Location(_vm.Overlay.LatS, _vm.Overlay.LonE));
rect.Locations.Add(new Location(_vm.Overlay.LatN, _vm.Overlay.LonE));
rect.FillColor = Colors.Green;
shapeLayer.Shapes.Add(rect);
mappy.SetView(new LocationRect(new Location(_vm.Overlay.LatN + 0.0001, _vm.Overlay.LonW + 0.0001), new Location(_vm.Overlay.LatS - 0.0001, _vm.Overlay.LonE - 0.0001)));
This is the correct scaling.
When you zoom once via the Navigation, you can see the image is now larger than the Polygon
There isn't a simple solution for this. I have put together a sample app that shows one approach to do this. You can find it here: http://code.msdn.microsoft.com/Binding-and-Image-to-a-01a56e48 What I did was add a Canvas to the map, and then use the map to calculate the pixel coordinates of the bounding box for the image. I then used these pixel coordinates to scale and position the image on the canvas overtop the map. I've done something similar to create custom polygons that support image brushes in the past but haven't uploaded that code sample yet.
I'm working on a project that requires the user to select and object from an image. I'm currently doing this by allowing the user to draw a rectangle around the object (the object that needs selecting is always rectangular) I can then crop the selected area. The issue is that in the image the object may not be viewed from a birds eye view and therefore in the image it is not perfectly rectangular.
I have now changed it so the user draws around the objects using lines which works fine but I'm unsure how to crop this irregular shape and then stretch it to fill a rectangle (as I need it to be a perfect rectangle but not have any of the background) some guidance on techniques and where to look would be great. I'm currently using aforge to crop my image.
Thank you
Ok Ive found my solution. I can use aforge SimpleQuadrilateralTransformation Class.
http://www.aforgenet.com/framework/docs/html/15ef1e79-a7ae-93d4-507e-34961c6562ec.htm
I'm doing a software where I need to put squary bordering fields on a satelite map (.png image), so that the fields can be clicked.
What is the best way to add shapes on a picture and associate them with data ?
Overlay a custom-draw UserControl on top of the Image control. Make part of it transparent to reveal the underlying image, but still be able to capture the mouse interaction.
You will have to calculate the exact position (pixel offset from the map top-left corner) of your control to overlay the proper map area. How you calculate that offset and the actual size of your custom control depends on the map zoom level and whether you use GPS coordinates or image recognition to determine which area needs to be overlayed.
Graphics.FillPolygon()
Is your friend. Hit testing is relatively trivial, with several algorithms available
You want to use the System.Drawing namespace to initially create a graphics object from your source image..then you want to draw on top of it, and finally export your edited graphics object to the filesystem...
Image image = Image.FromFile(Server.MapPath(String.Format("~/{0}.jpg", "YourImageNameHere")));
Graphics MyGraphic = Graphics.FromImage(LabelImage);
MyGraphic.DrawRectangle(SomePenObject, Point1, Point2, Point3, Point4);
Image.Save("C:\somepath.jpg",ImageFormat.Jpeg);
I have polygons of various shapes and sizes. They have a solid fill and currently a solid border.
I would like to give the polygons a gradient on their edge to soften them.
So far I've tried using a Pen with a LinearGradientBrush and whilst the effect it produces is very interesting it's most definitely not what I want ;)
I've looked through the System.Drawing.Drawing2D namespace but there didn't seem to be any other classes that would be applicable for this purpose.
I've had a search around and the articles that I can find are mostly about creating borders for rectangles, which are mush easier, or are irrelevant.
So to summarize, does anyone have a way of drawing a gradient border in on a polygon using GDI+?
Perhaps a screen shot of what your previous attempt produced and a mock up of what you would like would help?
Though I suspect the issue you're running into is that the direction and offset of the gradient is consistent throughout the entire shape and does not change with the orientation of the lines of the polygon.
Have you taken a look instead at the PathGradientBrush? (Examples) If you can't achieve the effect using it with a Pen for the stroke of the shape, perhaps you could do it with two "fills" with the first (the border) being slightly larger than the second (the interior).
I think I have done exactly what you're asking for, but in my case I have used it for creating soft shadows on text.
I do the following:
Draw the text (in your case:
polygon) to a Bitmap
Apply a
softening filter on the alpha
channel only
Iterate step 2 as
many times needed to get the desired
gradient width
Finally draw the
result onto the resulting
bitmap/screen