WPF线，路径..etc自定义绘图样式 [英] WPF Line, path ..etc custom drawing style

问题描述

在WPF中，您可以修改从 Dash-Dot 序列绘制APART的任何路径的方式吗？说我想为我正在绘制的任何路径或绘制路径本身上的小三角形，waves..etc绘制一条三线。我已经尝试过笔刷，但它不会遵循 Path 。请帮助

In WPF is there a way that you can modify the way any path is drawn APART from Dash-Dot sequences? Say I want draw a triple line for any path I am drawing or small triangles,waves..etc on the drawing path itself. I have tried Brushes but it will not follow the Path. Please help

thx

推荐答案

WPF的几何类具有轻松完成此操作所需的所有原语，但是您需要在代码中完成。当我需要自定义线条时，通常会根据 Geometry 构造一个 Drawing ，但是在您的情况下，您可以简单地建立一个几何，该图形具有三行平行并笔触。

WPF's Geometry classes have all the primitives you need to accomplish this easily, but you will need to do it in code. When I need to do custom lines I usually construct a Drawing based on the Geometry, but in your case you can simply build a Geometry that has three lines in parallel and stroke that.

1. 从 PathGeometry.CreateFromGeometry（）获取输入路径的 PathGeometry


2. 使用 GetWidenedPathGeometry（）传递所需的间距，以获取其边缘与边线相对应的新几何图形


3. （可选）


4. 使用 CombinedGeometry
将边线Geomerty与原始几何形状合并>

5. 对组合的几何图形进行描边以获取三条线

1. Start with PathGeometry.CreateFromGeometry() to get a PathGeometry for the input path
2. Use GetWidenedPathGeometry(), passing in the desired spacing, to get a new geometry whose edges correspond to the side lines
3. (optional) Remove segments at the end of the widened geometry, if desired
4. Combine the side line geomerty with original geometry using a CombinedGeometry
5. Stroke the combined geometry to get a triple line

有关步骤3的更多说明：原始线末的线段。这会导致在您的线的末端绘制一条线，在许多情况下，从美学上来说，这实际上看起来很令人满意。如果没有它，您的情况看起来会更好，请通过迭代边线几何形状并删除所有通过原始路径端点的线段来删除它。

More explanation on step 3: The widened geometry has line segments at the end of the original line. This causes a line to be drawn across the end of your line, which actually looks aesthetically pleasing in many situations. If your situation would look better without it, remove it by iterating the side line geometry and removing all line segments that pass through the endpoints of the original path.

上面的步骤大约8行代码（如果不行的话），或者15行代码。

The above takes about 8 lines of code if you don't strike off the ends, or 15 if you do.

一个方便的技巧是创建一个附加属性，该属性可以有效地强制将其附加到的 Path 控件的 Data 属性。有了这样的附加属性，您只需编写：

A trick to make this convenient is to create an attached property which effectively coerces the Data property of the Path control it is attached to. With such an attached property, all you need to write is:

<Path TripleStroke.Enable="true" Data="..." />

如果您知道如何实现附加属性并在其中注册处理程序，这真是小菜一碟。如果没有，计划在实施附加属性方法之前花几个小时学习如何对附加属性进行编码以模拟价值强制。

If you know how to implement attached properties and register handlers in them, this is a piece of cake. If not, plan on spending several hours learning how to code attached properties to simulate value coercion before implementing the attached property approach.

更新

我上面描述的基本技术也可以扩展为允许沿路径应用任意模式。有关示例，请参见Expression Design工具中的自定义画笔。但是，WPF中没有内置功能可以为您完成此操作，因此您需要自己创建它，根据经验，我可以告诉您这是很多工作。基本步骤如下：

The basic technique I describe above can also be extended to allow an arbitrary pattern to be applied along a path. For an example, see custom brushes in the Expression Design tool. There is nothing built into WPF to do this for you, however, so you'll need to create it yourself, and I can tell you from experience that it is a lot of work. Here are the basic steps:

首先创建一种方法，该方法采用 Geometry 现有的绘图，以及一些用于端盖的参数，等等，并创建一个新的绘图，它重复给定的绘图沿着 Geometry 给出的路径。然后很容易绘制描边路径：创建 Drawing 描述自定义描边，然后使用 DrawingVisual 包含 Binding ，其中包含一个调用您的转换方法的转换器。

First create a method that takes a Geometry an existing Drawing, and some parameters for end caps, etc and creates a new Drawing that repeats the given Drawing along the path given by the Geometry. Then it is easy to draw a stroked path: Create a Drawing to describe the custom stroke, then display the stroke using a DrawingVisual that contains a Binding with a converter that calls your conversion method.

要实际实现转换方法，请执行以下操作：

To actually implement the conversion method:

1. 将源图形转换为一组 GeometryDrawing 对象（我也支持 ImageDrawing ，但这更加复杂，因为您需要使用3D系统来拉伸图像）。这是通过递归 DrawingGroup 对象，跟踪转换的方式以及构造具有适当转换的GeometryDrawings来实现的。


2. 删除部分


3. 沿路径迭代，复制 GeometryDrawing


4. 使用相同的过程处理几何的端盖部分。

1. Convert the source drawing into a set of GeometryDrawing objects (I also supported ImageDrawing but that is more complicated since you need to use the 3D system to stretch the images). This is done by recursing through DrawingGroup objects, keeping track of transforms as you go, and constructing GeometryDrawings with appropriate transform.
2. Remove portions of geometry in the "end cap" areas of the original drawing and set them aside.
3. Iterate along the path, duplicating the GeometryDrawing objects repeatedly with appropriate coordinate transformations applied to all coordinates in the geometry.
4. Process the "end cap" sections of the geometry using the same procedure.

在步骤1中还要注意，任何 GlyphRunDrawings 都使用 FormattedText.BuildGeometry 创建等效的 GeometryDrawing 。

Also note in step 1 that any GlyphRunDrawings are handled using FormattedText.BuildGeometry to create an equivalent GeometryDrawing.

这篇关于WPF线，路径..etc自定义绘图样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！