|
28 / 20 / 10
Регистрация: 01.12.2018
Сообщений: 186
|
|
Рисование в рамках паттерна MVVM18.12.2022, 09:21. Показов 4213. Ответов 31
Метки нет (Все метки)
Здравствуйте. Возникла задача вывода графических данных для их визуального отображения. Суть задачи в том, что я реализую сейчас триангуляцию Делоне и хотелось бы видеть результат работы отдельных функций ну и триангуляции в целом. Каким образом можно просто отобразить точки и линии, соединяющие точки в WPF+MVVM?
Для информации: искал в интернете, вся информация, что есть, как минимум нарушает MVVM. Нашел, что есть тип Visual (является базовым типом рисования в WPF и наследован от DependencyObject). Можно ли воспользоваться данным типом, добавить нужные точки, соединить линиями и отобразить в каком-нибудь Canvas? Таким образом я где-то в модели отрисую на низком уровне все, что мне надо, во ViewModel создам свойство типа Visual, и привяжу к контролу, который просто уже отобразит мне все, что я нарисовал, тем самым не нарушив паттерн и исполнив мои пожелания. Спасибо. P.S. Естественно я не прошу сделать все за меня и положить тут готовый код, хотелось бы ссылки на информацию об этом подробнее (кроме MSDN естественно, там был уже), ну и ваши мысли и бесценный опыт в данной области, если таковой имеется. Спасибо!
0
|
|
| 18.12.2022, 09:21 | |
|
Ответы с готовыми решениями:
31
Передача данных между окнами в рамках паттерна MVVM
|
|
Модератор
|
||||
| 21.12.2022, 17:59 | ||||
|
Добавлено через 2 минуты Если вам нужна просто линия (кривая), то достаточно PolyLine с привязкой через конвертер PointCollection. Создавать только из-за одной линии ItemsControl с канвой - избыточно. Добавлено через 1 минуту Сейчас посмотрю походящую тему в разделе. Добавлено через 1 минуту График функции. Работающий пример Добавлено через 36 секунд Присоединённые свойства (Attached Property) для всплывающей привязки из шаблонов данных к Canvas и Grid. Добавлено через 2 минуты Автоматическое рисование фигур на Canvas Добавлено через 43 секунды Привязка координат одного Shape относительно другого
1
|
||||
|
28 / 20 / 10
Регистрация: 01.12.2018
Сообщений: 186
|
|||||||||||||||||
| 23.12.2022, 07:51 [ТС] | |||||||||||||||||
ObservablseCollection<Triangle> результирующая коллекция треугольников после триангуляции (коллекция есть, алгоритм пока не до конца написан, но один треугольник я туда могу вставить для теста), ее я с помощью такого простейшего конвертера преобразую к коллекции линий в одну сторону:Кликните здесь для просмотра всего текста
Эту коллекцию линий я показываю с помощью данного кода (я пока не до конца понял механизм его работы, но все же): Кликните здесь для просмотра всего текста
Это лишь коллекция линий треугольника. Параллельно мне нужно отрисовать исходный прямоугольник, в области которого генерируются узлы и происходит триангуляция, а также сами узлы в виде точек или эллипсов. Отрисовку точек реализовал добавлением аналогичного кода для коллекции узлов (из Ваших примеров): Кликните здесь для просмотра всего текста
Возможно пока код не совсем правильный или вообще не правильный, однако, он работает и поверх линий я вижу нужные мне узлы (скриншот 1). Попутно возникает много вопросов. Во-первых, можно ли обойтись одним ItemsControl, чтобы рисовать и линии и узлы одновременно и не размазывать таким образом код? Во-вторых, я могу сделать просто коллекцию линий, которую буду собирать из всего и просто, без конвертеров биндить в ItemsControl, но насколько это целесообразно? В-третьих, поднимается вопрос о масштабировании и перемещении изображения на Canvas, хотелось бы покрупнее или помельче посмотреть а также иметь возможность перемещать его. Логика в целом понятна, наверное необходимо будет ввести нужные масштабные коэффициенты, чтобы абсолютные размеры и координаты не менялись, а менялись только координаты для отображения или как-то так. Каким образом такое можно реализовать? Спасибо, пока разбираюсь в таком формате, чему-то учусь, гораздо лучше приходит понимание и усваиваются знаний, когда решаешь какую-то реальную задачу, а не фиктивную из книжки по типу "у вас есть 100 бананов..."
0
|
|||||||||||||||||
|
Модератор
|
||||
| 23.12.2022, 11:05 | ||||
|
Line - это UI элемент. Можно конечно и их создавать. Но на каждый треугольник у вас получится по три UI элемента. А по функционалу вам кроме отрисовки отрезка от этого UI элемента ничего не нужно. Здесь лучше подойдёт геометрия. Так? Если да, то зачем вы их все преобразует в одну общую коллекцию линий? fakemade, вам нужно упростить ваш вопрос, разбить его на части. А то мы уже два десятка сообщений занимаемся выяснением что вы хотите реализовать, а не поиском решений. Можете проще изложить? Вот есть такая-то коллекция, таких-то объектов. Её нужно вот так-то отобразить. А то у вас все вопросы намешаны в кучу: и функция с графиком, и линия по точкам, и коллекция треугольников. При этом совершено непонятна какая нужна интерактивность по каждому их них. Добавлено через 10 минут Items Control на каждый элемент коллекции создаёт несколько UI элементов. Это оправдано если нужна интерактивность по каждому элементу коллекции. Например индикация наведения, выбор элемента и т.п. Если такая интерактивность не нужна, то можно вывести всё 1-2 геометриями. Это значительно облегчит работу GUI, что может быть очень существенным по мере увеличения коллекций. Вывести всё одним ItemsControl - не проблема. Для этого на каждый тип элемента источника создаётся свой шаблон данных по умолчанию. Нужный шаблон будет автоматически подхвачен.
1
|
||||
|
28 / 20 / 10
Регистрация: 01.12.2018
Сообщений: 186
|
|
| 23.12.2022, 12:59 [ТС] | |
|
Элд Хасп, хорошо, давайте проще. Начнем с геометрии. Есть исходный прямоугольник, построенный по узлам(Node), этот прямоугольник ни с чем не связан, его мне нужно визуализировать. Есть треугольники, полученные в результате триангуляции(они между собой соединены как раз через узлы (Node), потому что триангуляция есть решение того, как красиво соединить набор узлов). Эту коллекцию треугольников также необходимо визуализировать. Есть еще коллекция узлов, по который построены как прямоугольник, так и треугольники, их мне также нужно визуализировать в виде кружков или квадратиков, неважно. Каким образом такое можно рационально, просто и правильно сделать соответственно в рамках паттерна MVVM? Ну и раз обсуждение зашло так далеко, как это сделать как можно компактнее, если вы предлагаете не использовать ItemsControl. Спасибо.
0
|
|
|
Модератор
|
|||
| 23.12.2022, 16:24 | |||
|
Скорее всего да. В общем случае для отрисовки любой фигуры в WPF нужно знать её фрейм (кадр): смещение верхнего левого угла, размеры фигуры. Это базовый класс для абстрактной фигуры. Для линии и многоугольника надо добавить коллекцию точек, для круга радиус. Для выделения цветом, толщины и др. какие-то доп. свойства, если они определяются в Модели, а не в GUI. Добавлено через 8 минут Если большой, то части относящейся к его визуализации.
0
|
|||
|
Модератор
|
||||||||||||||||||||||||||||||||||||
| 23.12.2022, 23:14 | ||||||||||||||||||||||||||||||||||||
|
fakemade, пример на уровне VM -> View.
1
|
||||||||||||||||||||||||||||||||||||
|
28 / 20 / 10
Регистрация: 01.12.2018
Сообщений: 186
|
||||||||||||||||||||||
| 24.12.2022, 11:05 [ТС] | ||||||||||||||||||||||
|
Элд Хасп, благодарю за пример, сохраню себе в избранное. Для вас на данный момент такое написать 5-10 минут делов, для меня это что-то на уровне Senior программиста. Я делаю, как говорится, step-by-step. Все, что связано с триангуляцией делаю в отдельной библиотеке классов, так как это штука полезная и может мне потом пригодится, поэтому там нет ничего, связанного с визуализацией в принципе. Есть класс Node, описывающий узел, он самый простой(как и все остальные):
Кликните здесь для просмотра всего текста
Есть мой класс Line(надо бы переименовать, чтобы не путаться со стандартными классами): Кликните здесь для просмотра всего текста
Есть класс Triangle: Кликните здесь для просмотра всего текста
Есть отдельный класс описания прямоугольника Reactangle2D: Кликните здесь для просмотра всего текста
Как видно, все держится на классе Node, потому что по узлам я строю и прямоугольник, и линии, и треугольник(что по сути коллекция соединенных определенным образом линий). Я понимаю, что вы наверняка привели исчерпывающий пример в крайнем своем сообщении, поэтому это просто ответ на вашу просьбу . Но повторюсь, Ваш пример скорее всего исчерпывающий и я в нем разберусь, так как он видимо решает мою задачу(хоть пока и сложно для понимания). Спасибо Вам большое за вашу помощь!
0
|
||||||||||||||||||||||
|
Модератор
|
||||||
| 24.12.2022, 11:58 | ||||||
|
Если же это треугольник (в общем виде многоугольник), то нужно указывать вершины, а не линии. Аналогично Polygon в моём примере.И уже от него (при необходимости) наследовать треугольник, прямоугольник и прочие многоугольники. Id, наверное, появился из-за сохранения в БД? По этой же причине и открытые сеттеры? Здесь главное - стремление получить этот опыт, понять как лучше. Он простой и в нём обязательно разберитесь. Это полезно для понимания реализации (одной из возможных) по выводу фигур в WPF. НО в этом примере нет интеграции с Моделью. Тут только уровень ViewModel -> View. Поэтому для вас это решение неприменимо. Вы можете только взять из него саму идею реализации и применить к своей задаче. Добавлено через 7 минут Тема начиналась с отрисовки графика. График - это просто линия. В вашем случае кривая состоящая из отрезков. Данные для неё - это точки вершин (углов, изломов). В вашей реализации получается, что график это коллекция Node. Но для вывода график это не только сама его линия, но и координатные оси, сетка, возможность масштабирования и др. приёмы интерактивности. Вот для всего этого и нужны библы для графиков, так как реализовывать всё это достаточно сложно и объёмно по коду. Если же нужно было отрисовать только ломанную, то это можно было бы с помощью System.Windows.Shapes.Polyline. Для этого потребуется только конвертер PointCollectionConverter из моего кода.Добавлено через 5 минут fakemade, вторую задачу, которую вы поднял - это отрисовка различных фигур. Из того что показали : Треугольники, Прямоугольники и окружности (для точек). Здесь, в первую очередь, нужно определиться с интерактивностью. Одна задача - просто это всё отрисовать. Здесь можно ограничиться по одной геометрии для каждого цвета и толщины пера. Совсем другая, если нужно обеспечить интерактивность, то есть нужны возможности по выбору элементов (например точек), индикации при наведении, всплывании подсказки (например с координатами точки) и пр. В этом случае каждый элемент должен отображаться отдельным UI элементом. Мой пример показывает именно такую реализацию.
0
|
||||||
|
28 / 20 / 10
Регистрация: 01.12.2018
Сообщений: 186
|
||||||||
| 24.12.2022, 12:38 [ТС] | ||||||||
![]() В общем, спасибо за помощь!
0
|
||||||||
|
Модератор
|
|||||
| 24.12.2022, 13:16 | |||||
|
Если после создания экземпляра его свойства могут изменяться, для обновления GUI придётся встраивать какой-то механизм уведомления об этих изменениях. Тогда об этом забываем. Рассматриваем только отрисовку фигур. Для отдельных Node задаёте шаблон с эллипсом. Для треугольников и прямоугольников создаёте конвертер их вершин в PointCollection и используете шаблон с Polygon. Селектор шаблонов вам не нужен. Просто из шаблонов Node и фигур в ресурсах удаляете ключи. Они тогда становятся шаблонами по умолчанию и будут применяться автоматически. Добавлено через 8 минут Единственное изменение которое я внёс бы - это создание общего базового класса для всех фигур, в том числе точек. Для WPF при рисовании в Canvas лучше использовать не абсолютные координаты, а смещение верхнего левого угла для всей фигуры и точки самой фигуры задавать относительно этого угла. То есть из линии (10, 40) - (40, 10) будет удобнее получить: offset (10,10) и линию (0, 30) - (30, 0).Для точки (40, 50) - offset (40, 50) и точку (0,0).Если это невозможно по логике вашей программы, то придётся это делать через конвертеры в View.
1
|
|||||
|
28 / 20 / 10
Регистрация: 01.12.2018
Сообщений: 186
|
|
| 24.12.2022, 13:42 [ТС] | |
|
0
|
|
|
Модератор
|
||||||||
| 24.12.2022, 14:34 | ||||||||
|
У меня как-то не укладывается в голове ваш класс Node. Обычно точка это либо Структура System.Windows.Point, либо свой кастомный подобный тип.В такой реализации для точки не нужно задавать смещение. А ваш класс Node должен быть таким:
0
|
||||||||
| 24.12.2022, 14:34 | |
|
Помогаю со студенческими работами здесь
32
Спецификация MVVM паттерна Понимание паттерна MVVM Нюансы реализации паттерна MVVM
Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
Использование TThread в Lazarus для математических вычислений.
Massaraksh7 25.05.2026
Производя рефакторинг своих программ на предмет ускорения их работы, обратил внимание на такой аспект, как сокращение времени матвычислений. Дело в том, что приходится работать с большими матрицами. . .
|
Модель здравосохранения 18. Чем здоровее работник, тем быстрее выгорает
anaschu 24.05.2026
Имитационная модель корпоративного здравоохранения: что показывает математика
Сегодня в модели рабочего коллектива на AnyLogic появились три новые механики — выгорание через накопленную усталость,. . .
|
Модель здравосохранения 17. Планы на выгорание
anaschu 23.05.2026
Вот конкретная схема реализации:
В классе Работник добавить:
накопленнаяУсталость — растёт каждый час работы, снижается в перерывы и болезни
коэффициентПрезентеизма — снижает продуктивность. . .
|
Изменение цветов в палитре gif файла aka фавикона
russiannick 23.05.2026
Изменение цветов в палитре gif файла, юзаемого как фавиконка в составе html-файла, помещенная в base64, средствами нативного Java Script, навеянное сном в майский день.
Для работы необходим браузер,. . .
|
|
Модель здравосохранения 16. Слишком хорошие и здоровые сотрудники уходят, недовольные зарплатой
anaschu 23.05.2026
Отладка увольнений и настройка производительности
Сегодня во второй половине дня разобрались с механикой увольнений и настроили коэффициент сложности заданий. Вот что было сделано.
. . .
|
Как я стал коммунистом))) Модель сохранения здоровья сотрудников, запись блога номер 15
anaschu 23.05.2026
Внезапно хорошее здоровье сотрудников не нужно капиталистам?))
|
Модель здравоСохранения 15. Как мы чинили AnyLogic модель рабочего коллектива: сочленение диаграммы состояний болезней и поломок в ресурспул
anaschu 23.05.2026
Как мы чинили AnyLogic модель рабочего коллектива
Сегодня разобрались с пятью багами, из-за которых модель либо падала с ошибкой, либо давала совершенно бессмысленные результаты. Каждый баг был. . .
|
Диалоги с ИИ
zorxor 23.05.2026
Насколько я понимаю - Вы - Искусственный Интеллект. Это так?
Да, всё верно. Я — искусственный интеллект.
Я представляю собой большую языковую модель, созданную для помощи в самых разных задачах. . . .
|