使用 DrawingContext 时的绘图布局问题答案

【问题标题】：Drawing layout problem when using DrawingContext使用 DrawingContext 时的绘图布局问题
【发布时间】：2011-11-11 02:32:37
【问题描述】：

我试图在一个圆圈内绘制“P”但没有成功。由于性能问题，我正在使用 DrawingContext。

这是我得到的：

主窗口 XAML：

 <StackPanel Background="LightGray">
    <WrapPanel x:Name="panel">
        <Image Width="100" Height="100">
            <Image.Source>
                <MultiBinding Converter="{StaticResource @con2}">
                </MultiBinding>
            </Image.Source>
        </Image>
    </WrapPanel>
</StackPanel>

转换方法：

 public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        Geometry circlePath = Geometry.Parse("M 12.5,1 A 11,11 0 1 0 13.5,1 Z");

        var dGroup = new DrawingGroup();

        using (DrawingContext dc = dGroup.Open())
        {
            dc.DrawGeometry(Brushes.LightBlue, new Pen(Brushes.Black, 1.5), circlePath);

            //Draw letter 'P'
            var x =
                Geometry.Parse(
                    "F1 M 0,15.4L 0,0L 5.0665,0C 6.98703,0 8.23807,0.0767822 8.81958,0.230591C 9.71523,0.46228 10.4655,0.966919 11.0704,1.74451C 11.6753,2.52209 11.9778,3.52576 11.9778,4.75574C 11.9778,5.70251 11.8001,6.49963 11.4447,7.14685C 11.0894,7.79407 10.6387,8.30212 10.0929,8.67078C 9.54701,9.03955 8.99112,9.28406 8.42522,9.40442C 7.65878,9.55139 6.547,9.625 5.08989,9.625L 2.99445,9.625L 2.99445,15.4L 0,15.4 Z M 2.99445,2.56665L 2.99445,7.05835L 4.8526,7.05835C 6.19164,7.05835 7.08673,6.97534 7.5379,6.80933C 7.98907,6.64343 8.34277,6.3844 8.599,6.03235C 8.85522,5.6803 8.98334,5.27039 8.98334,4.80249C 8.98334,4.22546 8.80342,3.74976 8.4436,3.37537C 8.08377,3.0011 7.62869,2.76721 7.07838,2.67358C 6.67288,2.60229 5.85855,2.56665 4.63538,2.56665L 2.99445,2.56665 Z ");
            dc.DrawGeometry(Brushes.Black, new Pen(Brushes.Black, 0), x);
        }

        return new DrawingImage(dGroup);
    }

更新：

改变路径不是我想要进入的，有没有办法用 MARGIN/ STRECH/ TRANSFORM 等设置它？

【问题讨论】：

必须更改符号“P”的路径以偏移左边距和上边距，使其“看起来”像在圆圈内。但话虽如此，这看起来是一种非常粗略的绘制嵌套几何图形的方法......也许GeometryDrawing 是您可能正在寻找的......msdn.microsoft.com/en-us/library/…
@AngelWPF - 感谢您的回答，我已经更新了关于它的问题。我不明白 GeometryDrawing 对我有何帮助。
通过一些 TextBlock 添加第二位“P”应该会有所帮助...我想知道 ....stackoverflow.com/questions/2190469/…

标签： c# wpf xaml geometry drawingcontext

【解决方案1】：

您可以将“P”相对于圆居中。

为此，请将TranslateTransform 推送到DrawingContext。要获得正确的 X 值，请使用圆的宽度/2.0，然后减去“P”的宽度/2.0。 Y也是如此。

public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
    Geometry circlePath = Geometry.Parse("M 12.5,1 A 11,11 0 1 0 13.5,1 Z");

    var dGroup = new DrawingGroup();

    using (DrawingContext dc = dGroup.Open())
    {
        dc.DrawGeometry(Brushes.LightBlue, new Pen(Brushes.Black, 1.5), circlePath);
        //Draw letter 'P'
        var x = Geometry.Parse("F1 M 0,15.4L 0,0L 5.0665,0C 6.98703,0 8.23807,0.0767822 8.81958,0.230591C 9.71523,0.46228 10.4655,0.966919 11.0704,1.74451C 11.6753,2.52209 11.9778,3.52576 11.9778,4.75574C 11.9778,5.70251 11.8001,6.49963 11.4447,7.14685C 11.0894,7.79407 10.6387,8.30212 10.0929,8.67078C 9.54701,9.03955 8.99112,9.28406 8.42522,9.40442C 7.65878,9.55139 6.547,9.625 5.08989,9.625L 2.99445,9.625L 2.99445,15.4L 0,15.4 Z M 2.99445,2.56665L 2.99445,7.05835L 4.8526,7.05835C 6.19164,7.05835 7.08673,6.97534 7.5379,6.80933C 7.98907,6.64343 8.34277,6.3844 8.599,6.03235C 8.85522,5.6803 8.98334,5.27039 8.98334,4.80249C 8.98334,4.22546 8.80342,3.74976 8.4436,3.37537C 8.08377,3.0011 7.62869,2.76721 7.07838,2.67358C 6.67288,2.60229 5.85855,2.56665 4.63538,2.56665L 2.99445,2.56665 Z ");

        double centerX = circlePath.Bounds.Left + circlePath.Bounds.Width / 2;
        double pWidth = x.Bounds.Width / 2;
        double centerY = circlePath.Bounds.Top + circlePath.Bounds.Height / 2;
        double pHeight = x.Bounds.Height / 2;
        TranslateTransform translateTransform = new TranslateTransform(centerX - pWidth, centerY - pHeight);
        dc.PushTransform(translateTransform);

        dc.DrawGeometry(Brushes.Black, new Pen(Brushes.Black, 0), x);
    }

    return new DrawingImage(dGroup);
}

【讨论】：