如何将一组点绘制为单独的圆圈? [英] How to draw a collection of points as separate circles?

问题描述

我的视图模型有一个像这样的 PointCollection 属性:

My view model has a PointCollection property like this:

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private PointCollection points;
    public PointCollection Points
    {
        get { return points; }
        set
        {
            points = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Points)));
        }
    }
}

这通常显示为多段线:

<Polyline Points="{Binding Points}" Stroke="Black" StrokeThickness="2"/>

我如何有效地将其显示为单独圆圈的集合?

How would I efficiently show it as a collection of separate circles?

这很可能由 ItemsControl 完成，例如在其 ItemTemplate 中具有 EllipseGeometry 的 Path 元素，但是这将涉及大量 UI 元素，这对于 PointsCollection 中的大量 Points 可能表现不佳.

It may well be done by an ItemsControl with e.g. a Path element with an EllipseGeometry in its ItemTemplate, however that would involve a large number of UI elements, which may not perform well for a large number of Points in the PointsCollection.

推荐答案

如下所示的绑定转换器可以将 IEnumerable 转换为 StreamGeometry一组零长度的线.

A Binding Converter like shown below could convert an IEnumerable<Point> into a StreamGeometry that consists of a set of zero-length lines.

这些可以通过将 StrokeStartLineCap 和 StrokeEndLineCap 设置为 Round 的 Path 绘制为圆形.

These could be drawn as circles by a Path with StrokeStartLineCap and StrokeEndLineCap set to Round.

public class LinePointsConverter : IValueConverter
{
    public object Convert(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        var geometry = new StreamGeometry();
        var points = value as IEnumerable<Point>;

        if (points != null && points.Any())
        {
            using (var sgc = geometry.Open())
            {
                foreach (var point in points)
                {
                    sgc.BeginFigure(point, false, false);
                    sgc.LineTo(point, true, false);
                }
            }
        }

        return geometry;
    }

    public object ConvertBack(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

路径看起来像这样:

<Path Data="{Binding Points, Converter={StaticResource LinePointsConverter}}"
      Stroke="Black" StrokeThickness="5"
      StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>

这篇关于如何将一组点绘制为单独的圆圈?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！