Как сделать круглый image в wpf

Добавил пользователь Валентин П.
Обновлено: 04.10.2024

Я вырезал два изображения из одного большого изображения. Оба вырезанных изображения имеют размер 300x148 и 96 точек на дюйм.

Я показываю их так:

Проблема в том, что я визуально вижу разницу в высоте. Более любопытно то, что когда я их меняю местами:

изменение разницы в высоте, но все еще существует.

Я ввел логин в ImageCoverter , чтобы зарегистрировать возвращаемое значение, и значения ширины / высоты / dpi не различаются.

У меня нет стилей, влияющих на изображения.

Есть ли другие области, которые мне также следует учитывать?

РЕДАКТИРОВАТЬ Вот так я создаю изображение размером 300x148. Я передаю обрезанное изображение и ширину:

Попробуйте установить Stretch="None" , а также покажите нам код, в котором вы создаете кадрированные изображения.

Пробовал пользоваться, ничего не получается

@ N.Zukowski, попробуйте использовать Image1 в качестве источника для обоих и посмотрите, что происходит

@ASh Я уже сделал и два одинаковых изображения не отличаются по высоте. Итак, я думаю, что оба разных изображения почему-то имеют разную высоту, но как это может случиться?

Вы просто хотите масштабировать все изображение до другой ширины и высоты в пикселях, вместо того, чтобы вырезать обрезку из большего изображения, верно?

У меня есть большое 6-мегапиксельное изображение. Меня интересуют две области этого изображения, это области размером 2450x1210. Мне нужны эти большие изображения, потому что мне нужно сделать оптическое распознавание текста. После того, как я сделал OCR, я могу масштабировать эти области (2450x1210) до 300x148, чтобы отображать их в графическом интерфейсе.

Затем используйте CroppedBitmap для обрезки и просто установите . Нет необходимости использовать какие-либо элементы WinForms Graphics или Bitmap.

В чем заключаются ваши изображения? (т.е. стеклопанель, сетка и т. д.). Кроме того, можете ли вы показать скриншот разницы в размерах?

Я пытаюсь установить источник изображения WPF в коде. Изображение встраивается как ресурс в проект. Просматривая примеры, я пришел к следующему коду. По какой-то причине это не работает - изображение не отображается.

По отладке я вижу, что поток содержит данные изображения. Так что не так?

Значок определяется примерно так:

@LaurieStearn весь смысл в том, что мы не знаем путь и нам нужен код для его определения. Как новичок в программировании Windows GUI, я должен признать, что WinForms кажется более привлекательным, чем это дерьмо XAML.

После того, как у меня возникла та же проблема, что и у вас, и я немного почитал, я нашел решение - Pack URI .

Я сделал следующее в коде:

Или короче, используя другой конструктор BitmapImage:

URI разбит на части:

Путь: имя файла ресурса, который скомпилирован в ссылочную сборку. Путь должен соответствовать следующему формату: AssemblyShortName[;Version][;PublicKey];component/Path

AssemblyShortName: короткое имя для указанной сборки.
; Version [необязательный]: версия ссылочной сборки, которая содержит файл ресурсов. Это используется, когда загружены две или более ссылочных сборки с одинаковым коротким именем.
; PublicKey [необязательно]: открытый ключ, который использовался для подписи ссылочной сборки. Это используется, когда загружены две или более ссылочных сборки с одинаковым коротким именем.
; component: указывает, что ссылка на сборку указана из локальной сборки.
/ Path: имя файла ресурса, включая его путь, относительно корня папки проекта указанной сборки.

Три слеша после application: должны быть заменены запятыми:

И, конечно же, убедитесь, что вы установили действие сборки для своего образа на Resource .

Да, это было решение, которое я нашел после проб и ошибок. Спасибо за подробное объяснение. Ответ принят!

Хорошо, но разве нет какого-то метода или класса, который синтаксический анализатор XAML использует для преобразования строки простого пути в ImageSource? Не могли бы мы просто использовать это?

Я часто вижу этот фрагмент, скопированный в другие посты, где люди обычно игнорируют существование BitmapImage(Uri) конструктора, что помогает избежать необходимости вызывать BeginInit и EndInit. Я добавил это здесь.

Спасибо за это. Одна проблема, которая выдвинула меня как новичка в wpf, изображение должно быть помечено как ресурс, чтобы это работало.

Это немного меньше кода и может быть сделано в одной строке.

Что если нам нужно установить высоту и ширину изображения, то есть icon.jpg? Потому что с помощью _image.height и _image.width это устанавливает окно изображения не фактическое изображение, то есть icon.jpg.

Чтобы установить изображение элемента меню динамически, сделайте только следующее:

. тогда как "icon.ico" может быть расположен везде (в настоящее время он находится в каталоге 'Resources') и должен быть связан как Resource .

Короче = лучше. Я должен был установить его как @ "/ folder / image.jpg", но тогда он работал нормально. Спасибо!

@HaloMediaz путь может быть неправильным . например, у вас есть ресурсы, но вы можете написать его Ресурс

Вы также можете уменьшить это до одной строки. Это код, который я использовал, чтобы установить значок для моего главного окна. Предполагается, что файл .ico помечен как содержимое и копируется в выходной каталог.

Самый простой способ:

Вот пример, который устанавливает путь к изображению динамически (изображение, находящееся где-то на диске, а не в качестве ресурса):

Размышления о иконах .

Сначала подумайте, что вы думаете, что свойство Icon может содержать только изображение. Но на самом деле он может содержать что угодно! Я обнаружил это случайно, когда программно попытался установить Image свойство непосредственно в строку с путем к изображению. В результате получилось не изображение, а фактический текст пути!

Если ваше изображение хранится в ResourceDictionary, вы можете сделать это только с одной строкой кода:

WPF имеет модернизированную систему рисования, без необходимости отслеживания событий, во время которых приходиться принудительно перерисовывать окно приложения. В принципе программирование рисования сводится в определении геометрических фигур и их размещение в требуемых координатах окна. Механизм перерисовки элементов инкапсулирован в графической системе WPF.

При изменении размеров и координат графических элементов они мгновенно перерисовываются. Используя эти достоинства системы легко создавать графические диаграммы для визуализации числовых значений. К статье прилагается исходный код программы графиков, включающий разновидности показа числовых данных различными типами диаграмм. Столбиковая диаграмма для сравнения временных показателей, линейный график для визуализации тенденции роста, круговая диаграмма для наглядного выражения объемного состава показателей.

WPF drawing

Line - простейшая геометрическая фигура образуемая двумя точками.
Ellipse - создание окружности, круга или эллипса.
Rectangle - прямоугольники и квадраты.
Polyline - создание ломанной линии. Построение основано на массиве точек. Конечная точка предыдущего сегмента является началом следующего сегмента-линии.
Polygon - разновидность ломанной линии, у которой начальный и конечный сегмент-линия замыкаются.
Path - составная графика из фигур и последовательности геометрических примитивов, их комбинаций и объединений. Даёт возможность построения графической фигуры любой сложности. Параметры фона и окантовочной черты действует на Path целиком. Для создания нескольких сложных фигур разного цвета необходимо создавать отдельный Path.

Абстрактный класс Chart

Все разновидности классов графиков происходят от абстрактного Chart , который заставляет производные классы унифицировать методы добавления и очистки значений. Кроме того, в абстрактном классе определены габариты графиков. Применение родителя для классов диаграмм уменьшает количество кода и упрощает управление графиками.

В классе Chart определяются размеры графиков и рисуется сетчатый фон. Фон создан кистью DrawingBrush . Данная кисть примечательна тем, что фон заполняется тем, что вы нарисуете программным кодом. Нарисовали квадрат, квадратом заполните фон, нарисовали эллипс - фон заполнится кружочками и т.д. Доступна для рисования и более разнообразная геометрия, состоящая из множества простейших фигур. Если не указывать размер области просмотра Viewport кисть заполнит фон элемента одной растянутой фигурой. Если же размеры области просмотра сделать меньше размера элемента возможна плиточная мозаика из нарисованной фигуры. Размер области просмотра можно задавать относительными и абсолютными величинами.

Листинг кода создания сетчатой кисти для заднего фона графиков.

Bar Chart – столбиковая диаграмма

Столбиковая диаграмма представляет собой ряд вертикальных прямоугольников, каждый из которых визуально представляет отдельное значение. При добавлении нового значения в ряд добавляется новый цветной прямоугольник. В исходнике столбиковую диаграмму представляет класс BarChat .

В график BarChat возможно добавление любых значений, например могут быть значения от 1 до 5000. И поскольку высота окна ограничена, внутренняя логика класса, при добавлении нового значения, заново определяет максимальную высоту прямоугольников. Благодаря этому столбцы графика сохраняют визуальные пропорции значений и, в тоже время, габариты баров всегда остаются в пределах своего поля.

Суммируются все значения, включая новое добавленное.
Итоговая сумма значений делится на количество значений в графике. Получаем общий знаменатель для всех значений.
Для каждого значения высчитывается высота по формуле:
Высота = значение / общий знаменатель

Вычисляется количество значений.
Далее ширина бара вычисляется по формуле:
Ширина бара = (ширина поля графика – ширину промежутков между барами * (кол-во значений -1)) / кол-во значений

Line Chart – линейный график

Линейный график строится на базе ломаной линии рисуемый классом PolyLine . Ломаная линия упрощает построение графика, поскольку для рисования следующей линии требуется только одна точка. Если использовать множество одиночных линий класса Line , потребуется в два раза больше переменных для хранения координат.

Узловые точки рисуются фигурами класса Ellipse . Благодаря узловым точкам повышается наглядность линейного графика.

Линейный график также принимает любые значения. Коррекция высоты и ширины графика аналогична алгоритму столбикового графика BarsChart . Над узловыми точками выводится текст значений. Координаты узловых точек являются базовыми для вывода текста рядом с узловой точкой.

Реализация метода вычисления размеров линейного графика при добавлении нового значения:

Pie Chart – круговая диаграмма

Круговая диаграмма даёт наглядное представление о доли каждого значения в общем объёме.

Круговая диаграмма построена на классе Path , обладающим большими возможностями Но вместе с большими возможностями, инициализация графики с помощью данного класса сложнее и содержит значительно больше кода, чем рисование, например, с помощью Ellipse , Rectangle , Line и т.п.

Каждый сектор круга диаграммы окрашен в отдельный цвет. Чтобы обеспечить разнообразие цветов для каждого сектора используется отдельный экземпляр Path . Геометрия сектора построена на фрагментах, которые образуют фигуру, входящую в состав Path.

Кроме угла разворота сегмента круга необходимо ещё вычислять угол смещения от предыдущего сектора. Сектора круговой диаграммы должны хранить свои угловые координаты, чтобы при добавлении нового значения применять их в расчётах.

Листинг метода создания сектора диаграммы: Пояснительный программный код вычисления углового смещения сектора:

Исходный код программы WPF Charts

Программа представляет собой рабочую заготовку для приложения построения наглядных графиков. Для усовершенствования приложения можно, например, добавить дополнительные надписи для пояснения отображаемых значений, оси основной координатной системы, анимацию и т.д.

Когда моя программа отображает изображение, которое меньше, чем объект графического интерфейса изображения, определенный в XAML, оно не растягивается до нужного размера. Например, изображение 256x256 занимает только верхний левый квадрант моего объекта графического интерфейса изображения 512x512. Я озадачен, потому что я установил Stretch = "Fill" в коде XAML. Что мне еще нужно делать? Любая помощь с кодом (см. Ниже) будет принята с благодарностью.

Код XAML, определяющий графический интерфейс

Код, который я использую для рисования изображения:

4 ответы

Вместо изображения используйте кисть изображения, которая сделает всю работу за вас.

А в скрытом коде вы можете установить

ответ дан 20 окт '15, 10:10

Кажется, это имя не является свойством ImageBrush .. Если это так, можно ли присвоить изображение программно? - myjy012003 а

x: Назовите это моей ошибкой. - Нивид Дхолакия

Как многие говорили выше, вот код для использования ImageBrush. Что также устанавливает изображение во время MouseOver. Думал, что это может помочь новым пользователям.

Если вам известен URI образа на диске, вам следует использование что собой представляет ИзображениеКисть контролировать.

У меня есть несколько комментариев к вашему коду:

И в вашем XAML вы называете свое изображение:

и в коде позади вы использовали:

В теге изображения в XAML вы сказали:

Этот тег изображения находится не на холсте, а в сетке.

В коде, стоящем за вами, вы используете диспетчер, чтобы заставить вещи использовать несколько ядер?

Диспетчер используется для выполнения вещей из других потоков в поток пользовательского интерфейса. И если изображение (из которого вы используете диспетчер) также находится в потоке пользовательского интерфейса (что я предполагаю, поскольку это объект пользовательского интерфейса), то это не заставит ваше приложение использовать несколько ядер.

Если вы установите для поля изображения значение 0 и удалите горизонтальное и вертикальное выравнивание. Также удалите ширину и высоту. Тогда ваше изображение должно полностью заполнить ваше окно.

Можете ли вы проверить это для меня.

И вы всегда можете использовать и Uri, чтобы установить источник растрового изображения для файла в вашей системе.

Читайте также: