Как нарисовать windows окно

Обновлено: 04.07.2024

ScreenMarker - это небольшая программа, которая позволяет делать аннотации на экране вашего компьютера.

Используйте ScreenMarker для облегчения ваших онлайн презентаций и демонстраций. Выделите важные вещи и улучшите свои презентации.

Ссылки на официальные сайты

Epic Pen

Инструмент Windows для рисования на рабочем столе и в приложениях

Условно бесплатно Windows

Ardesia

Ardesia - это полезное программное обеспечение для использования вашего рабочего стола в качестве Sketchpad. Вы можете написать, разметить и стереть, а также, конечно, вы можете использовать свой рабочий стол как обычный рабочий стол. Также вы может…

Открытый исходный код Бесплатно Linux Windows

Annotate!Pro

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

FlySketch

FlySketch от Flying позволяет рисовать поверх любой программы, которая не умеет рисовать сама.

Ultimate Pen

Ultimate Pen - это программное решение, которое создает полноэкранное прозрачное окно, позволяющее рисовать поверх большинства приложений. Думайте об Ultimate Pen как о невероятно простом способе рисования на экране вашего компьютера. Основные харак…

Desktop Board

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

Что в данном списке?

Альтернативные программы для ScreenMarker для Web, Android, iPhone, Windows, iPad и т.п. Фильтруйте по типу лицензии, чтобы получить список бесплатных программ или с открытым исходным кодом. Список содержит 6 приложений схожих с ScreenMarker.

Решал интересную задачу – сделать визуальный редактор-конфигуратор окон.

Подробностями процесса разработки я с вами, коллеги, и поделюсь.

UPD. Добавил скриншоты.
UPD2. Речь идет об окнах оффлайновых, застекленных, деревянных или пластиковых — через которые на улицу из дома смотрят

Спасибо за отклики!

1. Это модуль для сайта, который должен работать в произвольных популярных кейсах.
2. В режиме редактирования программа должна позволять указывать количество и расположение проемов в окнах.
3. В режиме редактирования программа должна позволять указывать способ открывания проемов в окнах, пять вариантов: нет открывания, налево, направо, налево и откидывается, направо и откидывается.
4. В режиме отображения программа должна картинкой в произвольном масштабе отображать конфигурацию окна.
5. Не нужно хранить и работать со сведениями о размере, пропорциях, цвете и других характеристиках окна. Картинки должны быть цветными и понятными. ЕСКД в данном случае не при делах.
6. Не должно глючить, тупить, должно быть кроссбраузерно, должно работать на в браузерах планшетных ПК и на смартфонах и т.д.

На этом этапе мы совместно с заказчиком поиском по картинкам Google просматриваем интерфейс аналогичных продуктов. Поиском по сайтам находим продавцов окон, и посещаем десяток сайтов, чтобы посмотреть на интерфейс онлайн-конфигураторов и вообще ассортимент конфигураций окон. Обсуждаем, что у нас должно быть, и чего, быть не должно.

Теперь дополняем бизнес-требования техническими условиями, для того, чтобы в итоге сформировать техническое задание.
1. Изходя из требования произвольного масштабирования – возникает понимание, что графика должна быть векторной. Кроссбраузерное решение, которое удовлетворит – HTML5 canvas.
2. Очевидно, должно быть два режима: режим редактирования и режим отображения.
3. В режиме редактирования данные должны сохраняться в input type=hidden. Я не буду вносить изменений в CMS – зачем мне лишние головняки? Просто добавлю одно поле в формы для добавления и редактирования, в СУБД и в соответствующие модели (у меня реально это происходит одним действием, если у вас нет – вероятно имеет смысл пересмотреть структуру программы).
4. В режиме редактирования ранее созданная визуальная конфигурация окна должна восстанавливаться из данных, находящихся и подставленных автоматически в поле input type=hidden.
5. В режиме отображения CMSка отдаст данные, как свойство какого-нибудь div, и моя программа должна эти данные: а) обнаружить, б) нарисовать по ним окно.
В данном случае спецификацию я делать не буду, а пойду по пути наименьшего сопротивления. Хорошая часть видения решения присутствует уже на данный момент, поэтому я начну реализацию немедленно.

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

Когда просматривал разновидности окон, зарисовал в тетрадке карандашом небольшой каталог, чтобы понять, что предстоит рисовать. Когда я делал эти зарисовки, пришло понимание, что я не хочу делать это на CSS (вероятно зря), и продолжать работать с <canvas />.
Иду искать библиотеку для работы с canvas. Нахожу calebevans.me/projects/jcanvas, бегло просматриваю документацию, оцениваю качество исходников и понимаю, что это то, что мне нужно сейчас.
Понимаю, что рисование будет самой низкоуровневой функцией. И вообще, давно хочется порисовать. Пробую несколько функций по документации, нахожу примеры онлайн в песочнице. Все работает, все устраивает.

Создам функцию-основу для рисования окна.

Естественно, функции не хранят параметры (это называется данными). Внутри функций – переменные.
В тот момент совесть не просыпалась, поэтому они в глобальной области видимости. Если она проснется – просто положу все в класс. Если проснется одновременно с ленью (или здравым смыслом) – буду писать на CoffeeScript. Сейчас звезды встали в определенное положение, и есть некоторое понимание того, что конечный продукт будет маленькой программой, состоящей из десятка фунций jQuery, в связи с чем целесообразность подобных действий в настоящий момент просто не рассматривается. Сначала сделать, чтобы работало. Рефакторинг – потом.
Глядя на свои зарисовки, вижу, что я могу рисовать оконные проемы, как прямоугольники, и обозначать открывание с помощью ровных ломаных линий внутри них.

Теперь – линии, обозначающие открывание. Left — налево, right – направо, tilt – откидывание. Кейса с фрамугой вниз нет (переспрашивал, когда интервьюировал заказчика), поэтому и заморачиваться сейчас не буду. Если возникнет потребность – потом можно будет легко его добавить.

Пишу несколько очень быстрых тестов, чтобы попробовать это. Все работает, поэтому перехожу дальше.

Собственно, по конфигурации проемов все окна можно поделить на “вертикальные” (как обычно делают в квартирах), Т-образные. Реже встречаются “горизонтальные” — в подъездах и в учреждениях.
Сначала нарисую что-нибудь попроще. Параметр leafs – количество проемов.

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

Тестирую, добиваюсь работоспособности.
Красивая пропорция – 1 к 2. Так как в бизнес-требованиях есть указание не заморачиваться с пропорциями, для Т-образного окна сделаю вот такой дизайн.

Делаю тесты, заставляю все работать ровно, без рывков.

Нарисую все виды окон, с которыми должна работать программа.

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

И функция, которая ловит клик по створке большого окна или маленькому окну в каталоге.

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

Открывание створок будет переключаться щелчком. Что может быть проще?
Сохраню в массиве список створок, и определю во втором массиве возможности по их открыванию.

Заполню массив данными по умолчанию. Не лучший вариант, но на момент написания думал о другом – о вероятном сохранении данных.

По щелчку должно меняться открывание створки. В цикле по возможностям открывания: нет, налево, направо, налево и откидывается, направо и откидывается.

И тут же, не уходя далеко…

Данные после редактирования нужно сохранять.
Сделаю сериализацию от руки.

И, теперь никто не мешает рисовать окна из сохраненных данных.

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

Программа должна каким-то образом понимать, что настало время рисовать окна.
Исходя из ТЗ, есть два варианта – поле формы и <div /> в произвольном месте.

Пожалуй, input[name=«window_type»] – не лучшее решение. Просто на этот момент у меня была цель запустить программу в работу, и я совсем не хотел модифицировать CMSку — поэтому обучил плагин искать свое поле по его имени: windows_type.

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

Вот переработанный код целиком. Это бета, и она же пошла в продакшн без изменений.

Что не показано в статье. Функция windows_handler запускается другим JS-компонентом, по двум событиям: document.ready и успешной загрузке аяксовых данных. Таким образом, окна отрисовываются немедленно после загрузки страницы, и перерисовываются, если происходит интерактивное обновление данных (“живой режим”).
Все юзкейсы выполняются. Сделал простой тест с большим количеством перерисовываний без перезагрузок, оставил машину с запущенными хромом и мозилой на некоторое время – память не жрется. Погонял этот же тест несколько часов в хроме и в сафари на айпаде и макбуке. Проблем не обнаружено.

Маленькая картинка, создается на клиенте на лету (распечатывается великолепно)

В режиме редактирования. Щелчок на маленькое окошко в каталоге изменяет конфигурацию большого (и сразу же данные в input type=hidden).

Щелчок на створку большого окна изменяет открывание створки.

Изменений в CMS не было. Окно добавляется и редактируется в скрытом поле, отрисовывается в div. Получается, что конфигуратор окон можно засунуть в произвольный вордпресс — просто подключив этот скрипт.

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

Хорошо бы засунуть этот код в какую-нибудь песочницу, вместе с тестами. Как вы считаете?

Вы создали окно. Теперь нужно отобразить что-то в нем. в терминологии Windows это называется рисованием окна. Чтобы смешивать метафоры, окно — это пустой холст, ожидающий его заполнения.

Регион обновления также изменяется, если пользователь растягивает окно. На следующей схеме пользователь растягивает окно вправо. Новая развернутая область в правой части окна добавляется в область обновления:

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

Запустите операцию рисования, вызвав функцию бегинпаинт . Эта функция заполняет структуру PAINTSTRUCT сведениями о запросе на перерисовку. Текущий регион обновления указывается в элементе члене rcpaint структуры элемента PAINTSTRUCT. Этот регион обновления определяется относительно клиентской области:

В коде рисования есть два основных варианта:

Paint всю клиентскую область независимо от размера региона обновления. Все, что находится за пределами области обновления, обрезается. То есть операционная система пропускает ее.
Оптимизируйте, рисуя только часть окна внутри области обновления.

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

Следующая строка кода заполняет область обновления одним цветом, используя определенный системой цвет фона окна (_ окно цвета). Фактический цвет, указанный в _ окне цвета , зависит от текущей цветовой схемы пользователя.

функция филлрект является частью интерфейс графических устройств (GDI), которая имеет Windows графику в течение очень долгого времени. в Windows 7 корпорация майкрософт представила новый графический механизм с именем Direct2D, который поддерживает высокопроизводительные графические операции, такие как аппаратное ускорение. Direct2D также доступен для Windows Vista через обновление платформы для Windows Vista и для Windows server 2008 через обновление платформы для Windows Server 2008. (GDI по-прежнему полностью поддерживается.)

Завершив рисование, вызовите функцию ендпаинт . эта функция очищает регион обновления, который сигнализирует, Windows, что окно завершило свою прорисовку.

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

Что такое мерцание?

Мерцание это просто-напросто, когда поверх одного видимого на экране изображения сразу же рисуется другое. Т.е. вы видите на экране какое-то изображение очень короткое время, после чего оно заменяется другим. Когда я сталкиваюсь с приложением, которое выводит графику с мерцанием, причиной которого всегда является лишь плохое кодирование пользовательского интерфейса, я задаю себе вопрос: "Если в приложении так плохо реализована работа с графикой, то, как хорошо оно тогда решает задачу, для которой оно предназначено?"

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

Рисуйте объект только один раз

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

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

WM_ERASEBKGND

Рисуйте что-либо только при необходимости

Перерисовка всего содержимого окна, даже если в нем изменилась лишь малая часть (например, при изменении размеров окна) - обычное дело для многих Windows приложений. Однако обычно в такой перерисовке нет необходимости. Когда размеры окна изменяются, предыдущее изображение сохраняется и лишь небольшая часть окна требует перерисовки (при увеличении размеров). Таким образом, алгоритм рисования можно реализовать так, чтобы он рисовал лишь необходимый минимум.
С каждым окном в системе связана область обновления (update region). Она описывает область окна, которая стала невалидной и требует перерисовки. Если окно будет перерисовывать только эту область и ничего более, то значительно увеличится скорость прорисовки окна.

Существует несколько способов получения информации об области обновления окна. Функция GetUpdateRgn возвращает точную информацию об области обновления, будь то прямоугольник, или более сложная фигура. В отличие от нее, функция GetUpdateRect возвращает информацию не о самой области обновления, а о наименьшем прямоугольнике, который целиком содержит в себе область обновления. Естественно, что работать с прямоугольной областью гораздо легче. Третий же способ заключается в использовании структуры PAINTSTRUCT совместно с функциями BeginPaint/EndPaint.

Обычно, процедура рисования выглядит так:

Функция BeginPaint заполняет структуру ps (PAINTSTRUCT). Одно из полей структуры - rcPaint является структурой типа RECT, которое описывает наименьший прямоугольник, содержащий в себе область обновления (т.е. тот же самый, что вернула бы нам функция GetUpdateRect). Одним лишь ограничением рисования только в этом прямоугольнике, мы значительно увеличим скорость прорисовки окна.

Следует помнить, что Windows автоматически обрезает любое рисование вне области обновления, когда вы используете функции BeginPaint/EndPaint. Это значит, что вы не сможете что-нибудь нарисовать вне области обновления. Вы можете подумать, в чем же тогда смысл ограничения рисования лишь в области обновления, если все равно ничего лишнего нарисовано не будет. Однако не забывайте, что вы вызываете функции и вычисления - в холостую, которые занимают какое-то время, а результата от них - ноль.

Еще одна причина мерцания

Возможна ситуация, когда вы потратите кучу времени на оптимизацию процесса рисования окна, однако выяснится, что окно все равно перерисовывается полностью. Обычно это происходит из-за двух стилей класса окна: CS_VREDRAW и СS_HREDRAW. Когда класс окна имеет установленным, хотя бы из этих стилей, содержимое окна будет полностью перерисовываться при изменении его размеров по вертикали или по горизонтали соответственно.

Одним из решений проблемы является отключение этих двух стилей.

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

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

Clipping child windows

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

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

Двойная буферизация (double-buffing) и memory-DC's

Устранение мерцания при преднамеренной перерисовке окна

Что я под этим подразумеваю? Допустим, вы хотите изменить вид заголовка вашего окна, добавив в него дополнительную графику: картинку, кнопку и т.п. Для этого, вы будете рисовать свое изображение поверх уже нарисованного заголовка - возникает мерцание. Это происходит из-за того, что нарушено золотое правило.

Существует две техники устранения такого типа мерцания. Первая заключается в использовании clipping, а вторая - в использовании смекалки.

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

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

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

А если подумать еще, то можно вспомнить, что мы может создать и использовать свою кисть для закраски фона окна (WNDCLASSEX.hbrBackground). Кисть должна выглядеть следующим образом:

Т.е. кисть должна быть прямоугольником, левая и верхняя (можно и другие) стороны которого - цвет сетки, а остальная часть - цвет фона окна. При этом нам достаточно будет выбрать такую кисть в качестве кисти для фона, и сетка будет рисоваться сама.

Заключение

Надеюсь, теперь вы никогда не зададите вопрос: "Почему мое окно мерцает?". Я описал основные причины мерцания, а также методы избавления от него. И если вы в будущем столкнетесь с ним, вы сможете установить причину и окончательно избавиться от него.

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

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

Рисование на экране рабочего стола в Windows 10

Этот пост включает 5 бесплатных программ для рисования на экране Windows 10, Windows Ink Screen Sketch уже был описан в другом месте на этом сайте.

gInk
Эпическая ручка
Рисовать на рабочем столе доски
LiveDraw
ZoomIt.

1]gInk

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

Вы также можете получить доступ к настройкам этого программного обеспечения, щелкнув правой кнопкой мыши значок на панели задач и используя Опции. Там вы сможете установить горячие клавиши для разных ручек, поставить отметку на ручках и инструментах, которые вы хотите отображать на панели инструментов, изменить путь для хранения снимков экрана и т. Д.

2]Epic Pen

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

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

3]Рисование на доске на рабочем столе

Вы можете скачать это программное обеспечение здесь. Это портативное программное обеспечение, и для его использования требуется Java. Когда вы запустите программу, вы увидите ее панель инструментов с левой стороны. Там вы можете использовать инструменты от руки, стрелки, линии, установить ширину и непрозрачность для рисования. Кроме того, вы можете очистить или стереть весь экран с помощью доступного инструмента. В нем нет инструментов отмены или ластика, поэтому вы должны быть осторожны при рисовании.

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

4]LiveDraw

Вы можете скачать переносимый EXE-файл этого экранного аннотатора. из GitHub. После запуска этого программного обеспечения вы увидите 12 перьев разных цветов. Вы можете использовать переключить дополнительные параметры используя данный значок, а затем получите доступ к другим параметрам, таким как отменить и повторить действия, использовать инструмент «Ластик», очистить экран, сохранить рукописный ввод или рисунок в виде прозрачного изображения PNG, показать / скрыть рукописный ввод или аннотацию и т. д.

5]ZoomIt

Zoom На самом деле это программное обеспечение для масштабирования экрана и аннотаций, но вы также можете использовать его для рисования на экране рабочего стола Windows 10. Вы можете использовать его от руки инструмент и текстовый инструмент нарисовать или написать что-нибудь на экране рабочего стола. Он обеспечивает только красный цвет для рисования, но он успешно служит для рисования на экране. В дополнение к этому, он также поставляется с базовым программным обеспечением для напоминаний о перерывах, которое вы можете использовать с настраиваемым временем, чтобы сделать перерыв в работе.

Если вы хотите использовать функцию увеличения, нажмите Ctrl + 1 горячая клавиша. Или вы также можете установить собственные горячие клавиши, открыв Опции окно этого инструмента. Просто щелкните правой кнопкой мыши значок этого программного обеспечения на панели задач и выберите Параметры, чтобы открыть это окно и изменить горячие клавиши.

Вот несколько полезных вариантов рисования на экране рабочего стола Windows 10. gInk определенно немного лучше, чем другие программы для рисования на экране, благодаря своим уникальным функциям. Но и другие программы тоже хороши.

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