Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
C++DelphiIDERAD StudioНовости

Новое в RAD Studio 11: IDE с высоким разрешением и проектирование форм!

high-dpi-ide-comparison-by-jim

В Delphi, C ++ Builder и RAD Studio 11.0 Alexandria есть очень интересное улучшение: теперь среда IDE полностью поддерживает масштабирование с высоким разрешением на экранах с высоким разрешением. Это означает, что если вы используете Windows и у вас есть дисплей 4K или аналогичный с высоким разрешением, IDE будет отображать на вашем экране четкое и четкое изображение. Фактически, если у вас есть два экрана с разными масштабами, у вас могут быть разные окна IDE на этих нескольких дисплеях, и каждое будет отображаться идеально, четко и ясно на каждом мониторе. Эта поддержка масштабирования с высоким разрешением DPI использует собственную поддержку VCL для масштабирования perMonitorv2, которую мы представили пару выпусков назад, а также нашу собственную коллекцию изображений и компоненты списка виртуальных изображений. Другими словами, мы используем те же инструменты, которые предоставляем вам.

Важно отметить, что поддержка высокого разрешения на дюйм включает поддержку в редакторе кода для четкого текста и при разработке форм как VCL, так и FMX. (Если вы запустили RAD Studio 11 и подумали: «Эй, моя форма маленькая!», Читайте дальше — у нас есть настройки, управляющие масштабированием в конструкторе форм VCL, и по умолчанию вы настроены без масштабирования.)

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

Сравнение высокого разрешения

Лучший способ увидеть разницу в среде IDE — это использовать ее. Использование IDE на дисплее с высоким разрешением похоже на ночь и день — есть некоторые вещи, о которых скриншоты передают только наполовину, и то, как выглядит и ощущается RAD Studio 11, является одним из них. Лично это потрясающая разница.

Но чтобы показать, что мы можем, просто в сообщении в блоге, вот отличное изображение, созданное Джимом МакКитом для сравнения IDE 10.4.2 и 11.0:

high-dpi-ide-comparison-by-jim
Слева старая IDE без поддержки DPI в 10.4.2. Он рисует в низком разрешении, поэтому при увеличении становится размытым.
Справа — новая IDE с поддержкой высокого разрешения в v11. Он четкий и ясный независимо от масштаба.

Вы можете видеть, что на изображении справа в v11.0 Alexandria текст и значки четкие, независимо от размера дисплея, на котором размещена IDE.

Фон — почему именно высокий DPI?

pixels-1-5262773-2
2x the pixel density

Типичный масштаб, установленный в Windows сегодня, составляет 200%. Это вдвое больше плотности пикселей, что на самом деле означает, что для каждого пикселя в прошлом теперь есть четыре пикселя (он разделен на два по вертикали и горизонтали). Я пишу это на мониторе 4K, который имеет высоту 2160 пикселей. Это в 2 раза больше 1080, вертикальное разрешение, которое до высокого разрешения я использовал годами. Чтобы все выглядело на экране одинакового физического размера, мне нужно масштабировать на 2.

Если приложение не поддерживает высокий DPI («DPI не знает»), Windows масштабирует его, но масштабирование добавляет размытости. Гораздо лучше, если приложение знает о масштабировании экрана, в котором его окна открыты, и может рисовать четко. Мы добавили поддержку VCL для этого в 10.3 , поддерживая масштабирование с высоким разрешением perMonitorv2 (последняя и лучшая из возможностей Windows) и добавляя компоненты для значков и рисования изображений с высоким разрешением , обеспечивая лучшую поддержку изображений с высоким разрешением на панелях инструментов. и меню, встроенные в Windows. IDE, которая в основном построена на VCL, использует их и является отличной демонстрацией возможностей VCL.

IDE использует стили для рисования своих светлых, темных и туманных тем, а стили VCL также поддерживают масштабирование с высоким разрешением .

Дизайнеры форм с высоким разрешением

В то время как поддержка высокого разрешения VCL в значительной степени зависит от включения поддержки perMonitorv2 на странице Application> Manifest параметров вашего проекта и перекомпиляции, а также обновления изображений (дополнительная информация ниже) и обновления любого пользовательского рисунка или жестко заданных констант пикселей для использования ScaleValue перегрузкичтобы получить новую точку, значение, прямоугольник и т. д. для формы с высоким разрешением, это не так просто. У нас была одна конкретная область, не относящаяся к клиентским приложениям, над которой нам нужно было работать, и именно она потребовала большей части наших усилий по разработке. Фактически, исследование и создание прототипа лучшего подхода — одна из причин, по которой до версии 11 потребовалось реализовать высокий DPI в среде IDE после того, как мы представили поддержку самого VCL в 10.3. Эта область — конструктор форм VCL. Мы придумали решение, которое, как мы надеемся, удовлетворит все потребности.

Вы можете масштабировать конструктор форм VCL до любого DPI (любого масштаба). Это выполняется с использованием той же технологии масштабирования, которую VCL использует при масштабировании во время выполнения, то есть когда приложение запущено и ему необходимо настроить его размер и макет для соответствия дисплей, который он включен. Этот параметр находится в Инструменты> Параметры> Пользовательский интерфейс> Конструктор форм> Высокое разрешение. Когда вы его измените, вам нужно будет закрыть и снова открыть конструктор форм, чтобы получить эффект.

По умолчанию, когда вы открываете форму, она создается с разрешением 96 точек на дюйм, то есть 100%. Это означает, что если ваша IDE установлена ​​на 200%, форма будет казаться меньше, чем элементы управления вокруг нее. Одним из ключевых моментов является то, что при масштабировании формы меняются свойства Left, Height и т. Д. — это точно так же, как когда вы запускаете приложение, и оно масштабируется; эти значения умножаются на масштаб экрана. Проектирование на 100% по умолчанию означает, что форма вообще не масштабируется: открытие формы не изменяет значения, хранящиеся в DFM, по сравнению с ее открытием, скажем, в 10.4.2. Если вы устанавливаете v11 и замечаете, что ваши формы выглядят маленькими, вот почему: мы сделали поведение по умолчанию, чтобы не изменять форму.

vcl-form-designer-high-dpi-default-low-dpi-8659876-2

IDE масштабируется до 200%, но содержимое конструктора форм составляет 100%. Вы можете видеть, что кнопки и текст составляют половину размера окна IDE справа.
Скорее всего, мы настроим масштабирование подписи дизайнера форм в будущем выпуске — в настоящее время масштабируется только фактическое созданное содержимое вашей формы.

Вы также можете позволить конструктору форм соответствовать вашему экрану. Это означает, что кнопка в форме будет соответствовать размеру кнопки в диалоговом окне IDE: она всегда будет соответствовать масштабированию экрана, независимо от экрана или его масштабирования (125%, 150%, 300%…). удобно, если вы просто хотите, чтобы ваша форма была такого же размера, как и все остальное, с чем вы взаимодействуете в пользовательском интерфейсе. В диалоговом окне «Параметры IDE» это «Автоматически», потому что он будет устанавливать его в зависимости от того, на каком экране находится дизайнер, когда вы его открываете.

vcl-form-designer-high-dpi-automatic-3765518-2
Конструктор форм с использованием автоматического масштабирования. Вы можете видеть, что текст и кнопки имеют тот же размер, что и окно IDE справа. Этот параметр означает, что конструктор форм всегда масштабируется в соответствии с масштабом экрана, независимо от того, что он установлен.

Наконец, вы можете установить конкретный масштаб, который вы используете для проектирования форм. Это может быть любой масштаб — 125%, 300%, что угодно.

vcl-form-designer-high-dpi-really-high-dpi-8302581-2
Вы можете выбрать любой масштаб для проектирования, и это рекомендуется, чтобы все члены вашей команды работали с одним и тем же DPI. Ради демонстрации, здесь дизайнер настроен на больший, чем (1,5x) масштаб, используемый экраном и самой IDE, и вы можете видеть, что текст и кнопки больше, чем у IDE! Вы вряд ли выберете это на практике, но это показывает, как вы можете довольно хорошо выбрать любой масштаб.

Windows и поэтому VCL использует целочисленные координаты для своих размеров и местоположений. Это означает, что любое масштабирование любого приложения не всегда может быть точным. На практике это нормально при масштабировании один раз (например, когда приложение запущено, и оно масштабируется от координат низкого разрешения, с которыми оно было разработано). Это также хорошо масштабируется несколько раз, например, при переходе с одного монитора на другой. после запуска. Это имеет большее значение при многократном масштабировании (и это одна из причин, по которой у нас нет функции, позволяющей проектировать в любом масштабе, но уменьшать масштаб до 100% при сохранении). Так что можно проектировать с высоким DPI в любом масштабе, и работать даже в более низком масштабе — VCL будет правильно масштабировать ваше приложение — но важно избегать масштабирования снова и снова, что будет происходить, если каждый раз, когда вы открываете форму в дизайнере, она открывается с другим DPI. Следовательно,

FireMonkey Designer

Конструктор FireMonkey намного проще. Он просто масштабируется в соответствии с собственным масштабом IDE, так же, как если бы вы масштабировали приложение FMX в коде. FireMonkey использует координаты с плавающей запятой и не имеет тех же технических соображений, что и приложения VCL. В версии 11 мы также изменили FireMonkey в Windows, чтобы использовать систему координат, основанную на единицах устройства, а не в пикселях, что означает, что формы Windows FMX могут масштабироваться в соответствии с масштабом отображения лучше, чем в прошлом, в том числе с более высоким качеством рендеринга.

Технические изменения

Поставщики компонентов не нуждаются в каких-либо изменениях значков, которые они поставляют вместе со своими компонентами, поскольку мы поддерживаем значки компонентов с высоким разрешением в формате PNG с 10.2.2 . Поставщики подключаемых модулей или надстроек имеют новые API-интерфейсы в ToolsAPI для добавления изображений во внутреннюю коллекцию изображений с высоким разрешением среды IDE (они выходят за рамки данной статьи, но проверьте ToolsAPI.pas на наличие TGraphicArray: каждая из этих новых перегрузок позволяет добавлять несколько размеров изображение в коллекцию изображений, поддерживающих списки изображений IDE.)

Внутренне, и это не повлияет ни на одного разработчика, но может быть интересно узнать: каждая форма IDE имеет свой собственный список изображений . Это требуется для поддержки высокого разрешения, так как это масштабируемая форма, а две формы на двух разных экранах могут масштабироваться по-разному, поэтому список изображений нельзя использовать в нескольких формах или элементах управления в нескольких формах, потому что изображения могут быть подходящего размера для одна форма, но неправильная для другой. Фактически, в прошлом в IDE в любом случае было несколько списков изображений в старом стиле, часто по одному на форму; но в прошлом, поскольку списки изображений в старом стиле хранят свои собственные изображения, это также означало, что многие изображения дублировались. Красный значок удаления X мог быть в нескольких списках изображений, и это затрудняло обновление значков.

В IDE теперь есть единая центральная коллекция изображений . Он содержит все изображения, используемые в среде IDE (кроме значков компонентов, которые хранятся отдельно). Несколько списков изображений в среде IDE подключаются к этой коллекции изображений. В рамках этой работы мы использовали программное обеспечение и человеческий глаз для исключения дубликатов значков, поэтому в коллекции изображений есть по одной копии каждого из них. Это значительно упростило обновление значков. В коллекции изображений теперь есть поле комментария для каждого значка, которое можно использовать для хранения любой информации, которую вы хотите: мы используем его для хранения заметок о том, где и как используется значок.

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

Прочие изменения

Последнее небольшое изменение, которое мы внесли, — это некоторые значки IDE. Большинство значков были заменены версиями с высоким разрешением (мульти-разрешением), поэтому они могут отображаться четко в любом масштабе. Однако мы также переработали некоторые значки для ключевых частей продукта.

Некоторые из самых ключевых кнопок панели инструментов во всей среде IDE — это «Запуск с отладкой» — в конечном счете, это то, для чего вы используете среду IDE! — плюс операции отладки, такие как переход, трассировка и т. Д. Все они теперь имеют новые значки, специально разработанные для их целей, чтобы они выглядели четко, а также иллюстрируют, что это за операция. Они выглядят так:

runwdebugging_64 stepover-2
The new Run with Debugging icon. It looks more like a Run symbol, and has a bug being squashed underneath. Step Over — such a simple design! But I think a very elegant way of showing the concept

Вы можете заметить, что часть «Выполнить» выглядит как более старый значок запуска Delphi 7 (с меньшей шириной по горизонтали), значок «Платформы» похож на тот, который использовалась в среде IDE, который представляет собой круг из нескольких частей (он предназначен для обозначения единства нескольких разных элементов), и некоторые другие иконки тоже имеют новые версии.

high-dpi-crisp-editor-and-consolas-font-procedure-9799954-2

Кроме того, мы перешли на Consolas в качестве шрифта по умолчанию для редактора. Consolas — очень похожий на Delphi шрифт, то есть он будет для вас естественным, если в прошлом вы использовали старый стандартный шрифт Courier New (который вы все еще можете использовать). Мы также устанавливаем несколько программных шрифтов: Fira Code, Monoid, Source Code Pro и так далее.

IDE с высоким разрешением

RAD Studio 11.0 предлагает долгожданный и очень большой пересмотр среды IDE: полная поддержка высокого разрешения. Четкая и четкая визуализация на всех экранах, поддержка создания форм в нескольких масштабах и четкий текст с новым, но знакомым шрифтом в редакторе — это одно из самых больших изменений и улучшений, которые мы сделали.


DelphiCon 2021

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Похожие сообщения
DelphiRAD StudioНовости

Анонсируем DelphiCon 2021!

Новости

Строим добро с результатами конкурса C ++ Builder

CodeDelphiНовости

Все, что вам нужно для создания инструмента с графическим пользовательским интерфейсом WSL сегодня

DelphiDeveloper InterviewsInterviewНовости

Каково быть разработчиком Далия Прасникар?

Leave a Reply

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

IN THE ARTICLES