I'm trying to figure out how to completely fill a custom geometry. It seems like it should be a common question, but I haven't really been able to find any solutions.
I have the following example geometry:
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry
Figures="M112,296C112,296 136,296 136,320 M112,344C112,344 136,344 136,320 M112,296L112,296 96,296 96,344 112,344"/>
</Path.Data>
</Path>
Which produces the following result:
This is the result I would like to see:
Any Ideas? I know I could make a single arc and that would resolve this particular case, but in my application the user can draw any type of geometry so the result could be composed of any number of "primitives" (PolyLineSegments, EllipseGeometries, ArcSegments, etc) and in the case that the resultant geometry contains some type of closed area, I'd like to accurately fill that area.
EDIT:
Here is an example of what a CombinedGeometry looks like if I ensure all three adjacent geometries overlap and create a unioned CombinedGeometry with the following code:
<Path Grid.Row="2" Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<PathGeometry
Figures="M111,293C111,296 136,293 136,325"/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<PathGeometry
Figures="M111,346C111,344 136,344 136,320"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<PathGeometry
Figures="M125,296L115,296 96,296 96,344 120,344"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
And here is the result:
I was hoping it would union just the strokes and automagically figure out the correct filling for the new contiguous polygon... bummer.
EDIT 2:
Hmm so I think I've come up with a couple possible solutions, neither of which are as easy as I was hoping they would be. The first option would be to combine all of the geometries as above using a CombineGeometry structure, then I called "GetFlattenedPathGeometry" on the resultant "CombineGeometry" in order to get a PathGeometry. Next I iterate over each Figure in the PathGeometry and just remove those which are holes (which I think you should be able to do by getting rid of all the figures which are entirely contained by another, or holes may follow a convention of having either clockwise or counter-clockwise coordinates, not sure..), if all goes well you should be left with a single fully filled geometry.
The second option would be to again call "GetFlattenedPathGeometry" on whatever the resultant path is, so as to get a vertex based polygonal approximation of the path (without all the curve, arc, ellipse, etc notation, we want a path containing only points and lines). After that, you would just combine all the resultant figures/segments into a single figure whose segments are ordered either clockwise or counter-clockwise.
I've tested both approaches and they seem to work with at least the simple test case outlined above, though they will not work with more complex shapes (self-intersecting, concave, etc).. support which I require.. so the question remains, how do I do this??
EDIT 3:
Here is a more complicated geometry in which ordering/combining becomes more difficult:
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry
Figures="M104,160C104,160 72,160 72,136
M104,128C104,128 72,128 72,152
M152,232L152,232 152,216 120,216 120,160 128,160
M152,232L152,232 72,232 104,216 104,160 96,160
M104,128L104,128 168,128
M128,160L128,160 168,160
M165,160L168,160 200,128
M200,160L200,160 200,128
M200,160L200,160 168,128 152,128"/>
</Path.Data>
</Path>
Which produces:
Your example geometry is a combination of three adjacent shapes which do not overlap. The stroke is drawn on the outside edges simply because the shapes are not closed and the inner stroke lines do not exist. Although it may appear that the shapes are being merged and the stroke is applied to the geometry as a whole, that is not what is happening.
Closing the hole becomes a more complex problem of programmatically detecting the hole and closing it with the appropriate shape or by creating a new combined shape which doesn't have the hole (possibly by detecting and tracing the outer points). I am not aware of any functionality in WPF which can help you with this task. There does exist a CombinedGeometry class which can produce a union of two overlapping shapes. The shapes in this example are not overlapping.
Without context, it is hard to recommend a solution. If this is a free form drawing program, perhaps the user simply has to draw another shape in the middle to close the geometry.
Treat it as a "connect the points" problem :)
You have 5 points:
96,296 - top left point (corner)
112,296 - top - start of bezier curve
136,320 - far right - end of first bezier curve, start of second one
112,344 - bottom - end of second bezier
96,344 - bottom left point (corner)
And now, we shall connect them.
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="M112,296 C112,296 136,296 136,320 C136,320 136,344 112,344 M112,344 96,344 96,296 112,296"/>
</Path.Data>
</Path>
You can also use <GeometryGroup FillRule="Nonzero" ...> to fill your custom path from 1st post. Default is FillRule="EvenOdd", which produces filling like yours.*
See Path Markup Syntax (http://msdn.microsoft.com/en-us/library/ms752293.aspx) for more information on path mini-language.
Changed <Path> to <GeometryGroup>
EDIT 1:
I reordered your path a bit:
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="M72,152 C72,152 72,128 104,128 L168,128 200,160 200,128 168,160 120,160 120,216 152,216 152,232 72,232 104,216 104,160 C104,160 72,160 72,136"/>
</Path.Data>
</Path>
Which gives us:
New shape
Drawing path is like using some kind of "draw shape" tool in vector editing software, where you have to select next points, and when you don't have next one - shape is automatically closed (last point is connected to first one, but just for the purpose of filling shape - we can see how it's done, when we look at the 'nose' of new shape).
In your example You have 9 separate shapes (each one in separate line, where M specifies start of new figure), and they are all filled in the said-above-way.
Ofcourse, you can use GeometryGroup (with FillRule) or CombinedGeometry (with CombinedGeometryMode) to connect shapes.
I found an interesting article about creating shapes with wpf using a svg-file created with a graphic-tool like inkscape. This might give you some insight.
Related
Anyone know a good way to create this object from Xaml? It also has to work at .5 Opacity when layered on top of other controls.
It also has to be resizable via Horizontal or Vertical Alignment.
I'm having some difficulty. The closest I get is with 2 borders, one having a negative margin--but it doesn't work when Opacity is applied.
Code that works:
<Path Fill="Black">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0,0,200,100" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="105,5,90,90" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
Use a GeometryGroup with an EvenOdd FillRule, or a CombinedGeometry with a GeometryCombineMode of Xor or Exclude. The geometries to combine will both be RectangleGeometry objects, with an appropriate RadiusX and RadiusY. The result will be the outer rectangle with a "hole" in it where the inner rectangle was located. (I assume this is what you want rather than a white rectangle within the black one.)
You can then assign this composite geometry to a Path as its Data property, and set the Fill and Opacity as required.
I'm currently doing a CFD simple problem with C# in WPF analyzing a quasi-one-dimensional flow (only varying with x) and I want to represent the results in a "decent" way. Hence, imagine it as a rectangle with a given number of vertical sections. The form is not a rectangle, but a nozzle. What I was wondering is if there is a way of representing with Stackpanels or something similar a certain form.
In the image attached the shape can be seen, to help understand the problem.
Every section (a rectangle "cut" by the edges of the nozzle) has a temperature associated and already computed.Just to give an example, a temperature value of 250 for the section drawn, and for example I want to paint it with a Red color.
My question is: Is there any way of "shaping" stackpanels or something similar to display something like the shape shown?
I've searched for information and this is the most similar option found:
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,100">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment Point1="200,200" Point2="300,100" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
Which draws this image. What I would like to construct is the nozzle with this method and be able to divide it or place vertical segments inside it as suggested at the first image, painting them according to the value they have.
You have defined a pretty complex problem which may be too much for a single SO question. By no means am I providing a complete solution to your problem. But maybe it will be enough to point you in the right direction. From there, you can start on your own solution and ask further questions if you get stuck.
Your best solution is probably to manually draw shapes on the canvas using c# (or possibly XAML).
Here's the best link I could find after a quick search.
https://msdn.microsoft.com/en-us/library/ms751808(v=vs.100).aspx
It is a Microsoft tutorial of drawing Geometry and Geometric Shapes in XAML and code.
See the section about path geometries.
I would think that by combining two ArcSegments for the curved sides and LineSegments connecting the two sides that you could get the basic shape you are looking for.
I think that for your rectangular "cuts", you will have to build those explicitly in code as well. It will be tricky to match their shape exactly when overlaying them over the nozzle. One simple work around could be to create all your horizontal bars and paint them. Then create a top and a bottom white overlay that covers up the rectangles. One overlay would have the shape of the top nozzle and cover the parts of the rectangles you don't want shown. And similarly for another shape that makes up the bottom of the nozzle.
I'm working on a small part of an application that requires us to draw shapes for the user to see. I'm using a path to display the shape, specifically binding a PathSegmentCollection to the PathGeometry.Figures like this --
<Path Name="Shape"
Stretch="Uniform"">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="True"
Segments="{Binding Segments}"
StartPoint="{Binding StartPoint}" />
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
Somewhere on that shape, a logo will be shown, but due to the variance in the shapes, I'm struggling to think of a solution where the logo text will always be shown on the shape (the shapes can be anything, even from a DXF file).
Here's an illustration of the problem --
The left image is what I have, but the right image is what I want.
Right now I'm drawing the logo as just a textblock on a grid that's bound to the size of the shape. I ended up going this route to keep the text automatically scaled to the correct height no matter the scaled units of the shape.
Ideally what I'd like to do is place a textblock inside a path, but I know that's not possible. I was wondering if anyone had any good ideas on how to align this text to the shape no matter what shapes come up.
In theory I'd like to be able to align it to all the regular orientations (top-left, top-center, bottom-right etc).
Thanks in advance!
Hi have the following piece of XAML
<Path Stroke="#FF000000" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Name="kvg_0994c_s1">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M28.27,12.64C28.32,13.27 28.52,14.32 28.17,15.16 25.86,20.7 19.22,31.55 9.81,39.71" />
</Path.Data>
</Path>
I wish to animate the PathGemorty to reveal itself slowly (over 2 seconds or so). Basically the effect that I am after is drawing a line on the screen automatically, in particular the path that is specified in the code above.
I need to do this in C# code as I am loading the XAML dynamically from an external file. Any help would be greatly appreciated.
You must use WPF animation for it. Look here: http://msdn.microsoft.com/en-us/library/ms752312.aspx More information about animation you can find in excellent book "Windows Presentation Foundation Unleashed" by Adam Nathan.
I think you can find exact answer on your question here: http://social.msdn.microsoft.com/Forums/en/wpf/thread/19a7bd4b-cf28-4b31-a329-a5f58b9ec374
what do you mean by 'reveal itself slowly' ? You mean like it was drawn bit by bit ? Then you'll have to decompose the Data, then re-compose a geometry adding elements one by one. So you might, using the Path's name (kvg_0994c_s1) in code behind, (and assuming the Path.Data is always a PathGeometry, so you can cast it to PathGeometry) you get the PathGeometry.Figures in an initial List, then clear the figures in the displayed Path. Then you set-up a timer (a DispatchTimer might be enough) to call a function every 200ms or so and in this function you add one by one the figures to the PathGeometry.Figures of the displayed path. You might have to adjust both the number of parts you add each time, and timer values to get the effect you want. And if you want constant 'speed' -> you have to compute the length of each part and adjust. But it might be nice to have non-constant speed to look more like hand-drawing.
I am in the following situation: designing an interactive flow-chart GUI. I stuck with animating a scale down animation of the flow-chart. Composed elements of the flow-chart are minimized, but they keep being active.
I have something like this:
<Canvas Canvas.Left="55" Canvas.Top="720" Height="100" Width="500" Tag="stepDown">
<Line Stroke="#99CCFF" StrokeThickness="8" X1="0" X2="720" Y1="10" Y2="10">
<Polygon Stroke="Black" StrokeThickness="2" Points="0,30 40,0 40,60" Canvas.Left="-20" Canvas.Top="-20" Fill="#99CCFF"></Polygon>
<Polygon Stroke="Black" StrokeThickness="2" Points="0,0 0,60 40,30" Canvas.Left="720" Canvas.Top="-20" Fill="#99CCFF"></Polygon>
<Image Canvas.Left="-50" Canvas.Top="-70" Height="53" Name="image32" Source="img/outlet.png" Stretch="Fill" Width="30" Tag="relative" />
</Canvas>
And I would like to shift the whole canvas and its elements to the left - no problem with Translate Transform. Furthermore I would like to scale down only the Line, no problem with Scale Transform.
But (!) at the same time, I want that the Polygons stick to the two line endings of the line. When scaling down only the line, the Polygons, at least one, floats away.
I don't know how to dock these elements or define them at a relative basis. It works fine with a scale down on the whole Canvas, but this changes the Polygon and Images as well.
In order to me you have to define hanchors points, as attached properties. Even define a behavior that track these points accordingly to poligon placements. Then you can bind these property to the line start/end point. In this way line should stay gripped to the polygons. But I did'nt try, is just a design idea.