2

Начал изучать создание WPF-приложений. На данный момент решаю задачу, связанную с методом кластеризации К-средних (k-means). Для решения данной задачи мне необходимо с помощью графических средств отобразить от 1000 до 100000 эллипсов на экране (значение выбирает пользователь). Я реализовал это с помощью Canvas и Ellipse следующим способом:

private void button_Click(object sender, RoutedEventArgs e)
{
    int clustersCount = Int32.Parse(label_ValueOfClustersCount.Content.ToString());
    int vectorsCount = Int32.Parse(label_ValueOfVectorsCount.Content.ToString());

    List<KMeansNS.Vector> vectors = KMeans.GenerateVectors(vectorsCount, 0, Convert.ToInt32(сanvas.Width), 
        0, Convert.ToInt32(сanvas.Height));

    foreach (KMeansNS.Vector vector in vectors)
    {
        Ellipse ellipse = new Ellipse();
        ellipse.Stroke = Brushes.Black;
        ellipse.Fill = Brushes.Yellow;
        ellipse.Width = 4;
        ellipse.Height = 4;

        Point vectorLocation = new Point(vector.Coordinates[0], vector.Coordinates[1]);
        Point newVectorLocation = CalcCoordinates(vectorLocation, ellipse);

        Canvas.SetLeft(ellipse, newVectorLocation.X);
        Canvas.SetTop(ellipse, newVectorLocation.Y);

        сanvas.Children.Add(ellipse);
    }

}

private Point CalcCoordinates(Point actualPoint, Shape shape)
{
    double newX = actualPoint.X - shape.Width/2;
    double newY = actualPoint.Y - shape.Height/2;

    return new Point(newX, newY);
}

Но при тестировании работы на количестве 100000 программа обрабатывает это все дело около 1 минуты. Есть ли способ значительно повысить эффективность данного кода? или может быть есть другой подход, более быстрый, для рисования фигур в WPF?

UPD. Нашел ответ тут https://stackoverflow.com/questions/9997891/how-to-improve-canvas-rendering-performance Сегодня уже нет времени разбираться. Завтра, возможно, вопрос отпадет.

8
  • Должны быть специальные библиотеки для построения таких типов графиков.
    – Ev_Hyper
    4 мар 2017 в 20:28
  • Вообще интересный вопрос. Зачем вам такое большое количество данных? Все равно пользователь визуально их не охватит. Может есть смысл провести какую-нибудь обработку прежде чем отображать график?
    – user227049
    5 мар 2017 в 17:25
  • Согласен, 100 000 объектов визуально пользователь не охватит. Но я ведь не разрабатываю программный продукт :) Это задание к лабораторной работе. В условии прописано, что количество входных векторов должно быть от 1 000 до 100 000, а кластеров от 2 до 20. Самый наглядный вариант работы алгоритма k-means получается при значениях 10 000 и 5 соответственно. Поэтому от работы с большим количеством объектов никуда не убежать :) 5 мар 2017 в 17:54
  • @AndreiKhotko а можете показать как выглядит у вас сейчас результат при 100 000 объектах? Вы не против продолжить обсуждение в чате ? (мне кажется, там будет удобнее общаться)
    – user227049
    5 мар 2017 в 18:38
  • @FoggyFinder к сожалению, с языком F# не знаком, поэтому реализацию Вашей идеи я не могу оценить. Саму идею понял. Но ведь для этого нужно пройти цикл со сложностью n^2. Для 100 000 это не будет критично? 8 мар 2017 в 11:01

1 ответ 1

5

Можно воспользоваться WriteableBitmapEx, тогда надо установить nuget пакет Install-Package WriteableBitmapEx.

В XAML добавить

<Image x:Name="image" Grid.Row="1" />

Тогда в вашем методе button_Click() после получения векторов нужно изменить на следующее

//создаем экземпляр для рисования шириной 1000 и высотой 500
WriteableBitmap writeableBmp = BitmapFactory.New(1000, 500);
//присваиваем в качестве картинки для отображения
this.image.Source = writeableBmp;

//рисуем
foreach (var vector in vectors)
{
    DrawEllipse(writeableBmp, vector);
}

И метод рисования эллипса такой

/// <summary>
/// Рисование эллипса
/// </summary>
/// <param name="writeableBmp">экземпляр битмапа</param>
/// <param name="vector">отображаемый вектор</param>
private void DrawEllipse(WriteableBitmap writeableBmp, Vector vector)
{
    int thickness = 2; //толщина контура
    int width = 4;
    int height = 4;

    //рисуем основной контур
    writeableBmp.DrawEllipseCentered(vector.Coordinates[0], vector.Coordinates[1],
                                                                      width, height, Colors.Black);

    //рисуем дополнительные контуры для толщины
    for (int i = 0; i < thickness; i++)
    {
        writeableBmp.DrawEllipseCentered(vector.Coordinates[0], vector.Coordinates[1],
                                                                      width++, height++, Colors.Black);
    }

    //заполняем цветом
    writeableBmp.FillEllipseCentered(vector.Coordinates[0], vector.Coordinates[1],
                                                                 width-thickness, height-thickness, Colors.Yellow);
}

Рисование по вашему примеру на моем компе занимало порядка 25 сек. С использованием этой библиотеки стало около 16 сек. Попробуйте, может лучше станет :) Честно я ожидал большего, когда читал англ. SO. Но имеем то, что имеем.

P.S. изменения после комментария Да, можно добавить необходимой асинхронности, тогда работа будет выглядеть более осмысленно, вот так:

пример асинхронной работы

Измените метод DrawEllipse вот так

private void DrawEllipse(WriteableBitmap writeableBmp, Vector vector)
{
    int thickness = 2; //толщина контура
    int width = 4;
    int height = 4;

    //рисуем основной контур
    Action action = () => writeableBmp.DrawEllipseCentered(vector.Coordinates[0], vector.Coordinates[1],
                                                                      width, height, Colors.Black);
    Dispatcher.BeginInvoke(action);

    //рисуем дополнительные контуры для толщины
    for (int i = 0; i < thickness; i++)
    {
        Dispatcher.BeginInvoke((Action)(() =>
        {
            writeableBmp.DrawEllipseCentered(vector.Coordinates[0], vector.Coordinates[1],
                                                                      width++, height++, Colors.Black);
        }));
    }

    //заполняем цветом
    Dispatcher.BeginInvoke((Action)(() =>
    {
        writeableBmp.FillEllipseCentered(vector.Coordinates[0], vector.Coordinates[1],
                                                                 width - thickness, height - thickness, Colors.Yellow);
    }));
}

Разместите в окне TextBlock, на который мы будет выводить номера нарисованных эллипсов. В дескриптор метода button_Click() добавьте async. Тогда рисовать можно двумя способами:

//рисуем Cпособ I
int showNum = 0;
await Task.Run(async () =>
{
    foreach (var vector in vectors)
    {
        //выводим номер вектора
        Dispatcher.Invoke(delegate { this.textBlock.Text = showNum.ToString(); });
        //увеличиваем счетчик
        showNum++;
        //асинхронная отрисовка
        await Task.Run(() => DrawEllipse(writeableBmp, vector));
        //задержка чтоб успело отобразиться
        await Task.Delay(TimeSpan.FromMilliseconds(1));
    }
});

Другой способ через деление на порции

//рисуем Cпособ II
int take = 100; //размер порции
for (int skip = 0; skip < vectorsCount; skip += take)
{
    //берем порцию
    var partVectors = vectors.Skip(skip).Take(take);
    //сообщаем (отсчет будет порциями, хотя реально будет нарисовано меньше)
    this.textBlock.Text = skip.ToString();

    //формируем коллекцию задач
    var tasks = new List<Task>();
    foreach (var vector in partVectors)
    {
        tasks.Add(new Task(() =>
        {
            DrawEllipse(writeableBmp, vector);
        }));
    }
    //стартуем все задачи порции
    foreach (var task in tasks)
    {
        task.Start();
        await Task.Delay(TimeSpan.FromMilliseconds(1));
    }
    //дождаться завершения всех задач порции
    await Task.WhenAll(tasks.ToArray());
}

Визуально выглядит лучше, но скорости это не добавляет.:)

4
  • Спасибо! Я обязательно попробую этот метод и отпишу сюда. 5 мар 2017 в 17:54
  • Попробовал данный метод - неплохо, но до желаемого результата, увы, далеко. Может быть, вы знаете, как отрисовывать фигуры на нажатие кнопки таким образом, чтобы они отобразились не все сразу, а по несколько тысяч в секунду? Как правильно называется метод, который "обновляет" полотно рисования, чтобы можно было его обновлять несколько раз за цикл? 8 мар 2017 в 10:52
  • @AndreiKhotko ловите варианты с асинхронностью.
    – Bulson
    8 мар 2017 в 14:46
  • интересная реализация! :) Да, скорости, увы, не добавится, но зато пользователю хоть не скучно) 9 мар 2017 в 21:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.