PaintCAD Mobile - журнал разработки

[blackstrip]

Мобильный паинткад - рисование шарика

[blackstrip]

Вышла бета-1 версии 2.7.24



Скачать:

JAR: http://blackstrip.ru/tmp/pcm27b1/PaintCAD.jar
JAD: http://blackstrip.ru/tmp/pcm27b1/PaintCAD.jad
APK: http://blackstrip.ru/tmp/pcm27b1/PaintCAD.apk

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

Первая бета - про баги и физическую клавиатуру андроид-телефонов.

Изменения
- стартовое окно выбора языка: исправлено ошибочное назначение раскладки старой моторолы и раскладки Android на клавишу 7, теперь 7 - старая моторола, 8 - андроид
- Android 8 и новее: окна паинткада теперь не фокусируются по нажатию физических клавиш джойстика, не обрисовываются зеленой рамкой и их перерисовка на прекращается после нажатий "Джойстик Вверх" и "Джойстик Вниз" физической клавиатуры на предыдущем экране (ранее программа как будто висла при такой фокусировке, т.к. при этом перерисовка окна останавливалась)
- Android: коды клавиш физической клавиатуры установлены в соответствии с кодами физических клавиатур андроида: левый софт нажимается по кнопке "Меню" (по ней же вызывается меню в окнах ввода имени файла, файловом менеджере и др.), правый софт - по клавише "Назад", а также клавиши "Взять трубку" и "Положить трубку" по своим кодам (и еще смотри следующий пункт изменений)
- Android: коды клавиш физической клавиатуры "Взять трубку" и "Положить трубку" поменяны местами - важный "Предпросмотр" по кнопке "Взять трубку" (она работает на многих телефонах, также можно вручную вызывать из меню или по "Джойстик Вправо"-"#"), а менее важный "Стиль линий" - по кнопке "Положить трубку" (на некоторых телефонах эту клавишу обработать нельзя и тогда стиль линий придется вручную вызывать из меню или по "Джойстик Вправо"-"*")
- исправлена ошибка виртуального "залипания" клавиш в меню и других окнах, при которой окно реагировало на клавиши, нажатые и не отпущенные при предыдущем показа окна, что приводило при следующем вызове окна к автовызову пунктов меню и др.
- новые Android: исправлено ошибочное оставление меню на экране после выбора пункта (файловый менеджер, ввод имени файла при открытии/сохранении файлов)

[blackstrip]

Начиная с Android 13 в мобильном PaintCAD нельзя вызвать больше одного раза меню андроидовское OptionsMenu. Поэтому можно один раз нажать "Обзор" при открытии файла, а потом выбрать файл в файловом менеджере, ну а Ок уже нажать никак. Аналогично и при сохранении нового файла.

Заметил это только когда перешел с Xiaomi Duoqin F22 Pro (Android 12) на Redmi Turbo 3 (он же Poco F6) (Android 15).

Оказалось что это вообще проблема андроида 13 и выше. Решение описано кем-то вот здесь (в самом низу комментов): https://issuetracker.google.com/issues/315761686

Проблема решается костылем так - в обработчик onOptionsMenuClosed дописывается вызов invalidateOptionsMenu() если андроид 13 (это андроид тирамису, его номер 33) и выше:

Код: Выделить всё

import android.os.Build;

	@Override
	public void onOptionsMenuClosed(Menu menu) {
	    super.onOptionsMenuClosed(menu);
	    //Build.VERSION_CODES.TIRAMISU = 33
	    if (Build.VERSION.SDK_INT >= 33) {
	        invalidateOptionsMenu();
	    }
	}

invalidateOptionsMenu() обычно вызывают если меню изменялось (добавлялись или удалялись команды, например) и надо его подготовить чтоб оно отрисовалось в измененном виде. А теперь, с android 13, надо вызывать эту команду каждый раз, даже если меню не меняли.

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

[blackstrip]

Шрифт с эффектом обрисовки на экранах высокого разрешения

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



Эта обрисовка толщиной 1 пиксель была хорошо видна на экране 101х80 пикселей телефона Siemens C60 в 2005 году. И вообще не видна сегодня на FullHD и выше экранах.

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

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

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



Если бы шрифт был растровый (при загруженном PCF-шрифте для отрисовки интерфейса), то, в идеале, надо вокруг каждого рисуемого пикселя шрифта просто нарисовать круглую обрисовку нужной толщины. Но это долго. Даже если бежать в пределах квадрата от "X пикселя - Ширина обрисовки" до "X пикселя + Ширина обрисовки" и от "Y пикселя - Ширина обрисовки" до "Y пикселя + Ширина обрисовки", проверяя расстояние до точки "X пикселя:Y пикселя" и если она ближе радиуса круга обрисовки - то рисовать пиксель, иначе - не рисовать.

А для векторного андроидовского шрифта вообще это не применить, т.к. пиксели шрифта рисует не паинткад, а андроид по просьбе паинткада.

И что же делать?

Теперь под строку текста будут подкладываться не только обрисовки вправо, влево, вверх и вниз, но еще и диагональные. Их сдвиг по осям X, Y должен быть не на 1 виртуальный пиксель, а на:
cos(45 градусов) * 1 виртуальный пиксель по X,
sin(45 градусов) * 1 виртуальный пиксель по Y.

cos(45 градусов) равен sin(45 градусов) и равен 0.7071.... (корень из двух поделить на два).

Тогда четыре старых строчки обрисовки, сдвинутых во все стороны на 1 виртуальный пиксель, и четыре дополнительных новых строчки обрисовки, сдвинутых по диагоналям на 1 виртуальный пиксель (или по осям X,Y на 0.7071 виртуального пикселя) будут образовывать нечто, похожее на обрисовывающий круг возле каждого пикселя. И 8 строчек - это гораздо быстрее рисовать чем настоящий круг вокруг каждого пикселя.

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







Если же включить отрисовку интерфейса растровым PCF-шрифтом (Настройки - Шрифт окон), то тоже выходит ничего так, кругло:

[blackstrip]

Ревизия всех окон

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

При этом на экранах низкого разрешения тоже должно все оставаться красивым, напоминающим оформление PaintCAD Mobile на явовских телефонах 20-летней давности.

Для этого по всем классам будут отысканы все отрисовки, прописаны координаты в виртуальных пикселях вместо реальных, утолщена отрисовка линий, прямоугольников. Часть классов служебные, вспомогательные и в них нет графической части, тем легче - они корректироваться не будут



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

Тестовый телефон 1 - Joy's S15
Экран 128 х 160 пикселей, не сенсорный
Android (Mocor) 4.4.4



Тестовый телефон 2 - Ruggear RG310
Экран 240 х 320 пикселей, сенсорный
Android 4.2.2



Тестовый телефон 3 - Xiaomi Duoqin F22 Pro
Экран 640 х 960 пикселей, сенсорный
Android 12



Тестовый телефон 4 - Xiaomi Redmi Turbo 3 (Poco F6)
Экран 1220 х 2712 пикселей, сенсорный
Android 15



И последний - телефон с явой, 2005 года выпуска. На нокиях паинткад кривовато работает с файловой системой через jsr-75, заодно можно будет попробовать это починить.

Тестовый телефон 5 - Nokia N90
Экран 352 х 416 пикселей, не сенсорный
Java

[blackstrip]

Окно AddText

Показывается когда инструмент "Текст" вставляет текст на рисунок

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

1 - Joy's S15

В самом телефоне интересная проблема - когда паинткад рисует текст в окошках по центру или правому краю, то видно что это не соблюдается, текст криво рисуется, с некоторым дополнительным сдвигом, зависящим от длины строки. Центр текста совсем не по центру, правые края тоже съезжают. Такое ощущение что или ява андроида, или microemu (конвертер jar в apk) дают неверную длину строки в пикселях паинткаду. И он криво рисует интерфейс. При тексте по левому краю всё хорошо (как раз там просто выводится строка без запроса длины строки в пикселях и без расчетов центровки или координат относительно правого края текста). Также видна некорректная возвращаемая длина строк в помощи, где текст должен прерываться после очередной гласной, ближайшей к правому краю поля вывода текста помощи. А здесь он прерывается гораздо раньше. Значит паинткад получает (от андроида или microemu) размер длины текстовой строки в пикселях как будто она гораздо больше - и он прерывает текст раньше. Как будто он запрашивает длину какого-то более крупного шрифта. Надо будет проверить исходники, возможно это баг самого паинткада (хотя и странно что на других телефонах все хорошо). А пока шрифты андроидовские не будут использованы в тестах отрисовки окон на этом телефоне.





Поэтому начиная прям с ревизии этого первого окошка включен "Шрифт окон" в настройках. Теперь для Joy's S15 будут показаны окна, отрисованные внутренним растровым паинткадовским PCF шрифтом. Они-то рисуются нормально.

На таком мелком экране (128 х 160 пикселей) паинткад решает взять размер шрифта х1 чтоб хоть что-то влезло. Скриншоты, кстати, в этом телефоне не снимаются ни по какому сочетанию клавиш (или я его не нашел). Зато хорошо снимаются при подключении к компу по USB через ADB - командой типа

Код: Выделить всё

adb shell screencap /sdcard/scrs/screenshot.png

где scrs - заранее созданная папка в корне памяти телефона.

Вид получившегося окна:

[blackstrip]

Причина кривой отрисовки шрифтов на Joy's S15 - сглаживание шрифта в андроиде.

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



Сглаженный шрифт и несглаженный - почему-то имеют в андроиде разные размеры букв! Это вообще, как бы, разные шрифты, получается... Кто бы мог подумать)

Поэтому везде, где в паинткаде запрашивается ширина строки в пикселях функцией measureText - кроме стиля шрифта необходимо для андроида в paint шрифта заранее задать setAntiAlias(true) для сглаженных шрифтов или setAntiAlias(false) для несглаженных (при вставке шрифта на картинку инструментом "Текст", а также использовании функции "Разбор моб.шрифта", где несглаженные буквы из шрифта телефона рисуются и сохраняются в BMP-файлы для последующей сборки PCF шрифта из них).

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

Теперь окно Помощи правильно рассчитывает где переносить текст:



А окно AddText - ровно рисует информацию о шрифте, отступая от краев необходимое количество пикселей:



Теперь остальные скриншоты с Joy's S15 все-таки будут с андроидовским шрифтом.

[blackstrip]

Итак, Окно AddText
Масштабирование интерфейса на тестовых телефонах

1 - Joy's S15



2 - RugGear RG310



3 - Xiaomi Duoqin F22 Pro



4 - Nokia N90



5 - Xiaomi Redmi Turbo 3 (Poco F6)

До масштабирования было (версия 2.7.24 beta 1):



После масштабирования стало:



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

Было до масштабирования на темном фоне:



Стало после масштабирования на темном фоне:

[blackstrip]

Окно AddText с включенной настройкой "Шрифт окон"

Еще для каждого окна хорошо бы провести проверку при включенной настройке "Настройки" - "Шрифт окон" - когда интерфейс отрисовывается не шрифтом телефона, а текстом встроенного в паинткад PCF-шрифта Robotron-1154-3 Extended http://blackstrip.ru/Fonts/robofont3ext.pcf



При использовании встроенного шрифта для отрисовки текстов на окошках он автомасштабируется так чтоб быть не больше расчетного андроидовского шрифта. Но у андроидовского шрифта масштабирование на любую дробную величину, а масштабирование PCF-шрифта только кратное, например, x1, x2, x3. Поэтому в паинткаде задано что высота строки такого PCF-шрифта должна быть максимально большой, но при этом должна быть меньше или равна высоте андроидовского шрифта (чаще всего - меньше). Поэтому интерфейс будет выглядеть скорее всего по-другому, и можно, рассмотрев окошки, выловить на таких уменьшенных строках глюки отрисовки, если таковые будут.

1 - Joy's S15



2 - RugGear RG310



3 - Xiaomi Duoqin F22 Pro



4 - Nokia N90



5 - Xiaomi Redmi Turbo 3 (Poco F6)



Итог: у этого простого окошка AddText после исправления ошибки расчета ширины сглаженных строк в пикселях проблем с отрисовкой нет ни при андроид-шрифте, ни при PCF-шрифте.

[blackstrip]

Следующее окно по списку - BevelSetup:



Тест окна BevelSetup

Это графическое полноценное окошко, с серой подложкой, с заголовком.

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

Окошко было придумано когда в самом начале наполнения паинткада эффектами был сделан в Эффектах (по кнопке *) эффект "Огранка" (т.е. Bevel). Этот эффект спрашивает как подрисовать выпуклость к выделенному прямоугольному фрагменту рисунка. И для формы огранки предлагает два варианта: "Наружу" или "Внутрь". Можно выбрать один из вариантов-радиокнопок (таких круглых чекбоксов с черной точкой внутри или без нее) и нажать Ок, или вообще отменить применение эффекта нажатием Отмены.

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

1 - Joy's S15

Чтоб сильно не растягивать поиск глюков отрисовки - рассматриваются сразу по два варианта отрисовки интерфейса: со шрифтом телефона и с PCF-шрифтом.

Также приведены по 2 варианта рисовки интерфейса - с выключенной опцией "Настройки" - "3D-интерфейс" (тогда элементы окон и сами окна рисуются парой-тройкой цветов, без градиентов) и с включенной (тогда элементы окон и окон рисуются градиентными переливами).

Со шрифтом телефона:



С PCF-шрифтом:



В радиокнопках точка явно съехала от центра - необходимо это исправить.

Заливка тоже хромает - по бокам основного кружка радиокнопки пустые незакрашенные пиксели) Особенно это бросается глаза при отрисовке фона градиентом



Но и без градиента эта же кривая рисовка фона радиокнопки



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

2 - RugGear RG310

Со шрифтом телефона:



С PCF-шрифтом:



Эти же проблемы.

3 - Xiaomi Duoqin F22 Pro

Со шрифтом телефона:



С PCF-шрифтом:



При увеличении разрешения сдвиг черной точки в радиокнопке меньше, но он есть.

И недокрашенные пиксели тоже есть.

4 - Nokia N90

Со шрифтом телефона:



Справа внизу пустые пиксели в радиокнопке есть тоже. Но их немного, видимо движок отрисовки кругов в нокии старается их делать круглыми.



А в заголовке окна текст уехал вверх и не центрирован по вертикали относительно заголовка и значка. Это тоже нужно исправить.



С PCF-шрифтом:



Тут с заголовком все хорошо, а с радиокнопками все так и осталось.

5 - Xiaomi Redmi Turbo 3 (Poco F6)

Со шрифтом телефона:



Издалека пустых пикселей на радиокнопке не видно, но при близком рассмотрении они тоже есть:



С PCF-шрифтом:



Итог по поиску проблем отрисовки окошка BevelSetup:
Проблема 1 - черная точка в радиокнопке на всех телефонах сдвинута влево-вверх. Но на больших разрешениях сдвиг малозаметен, видимо он задан жестко в пикселях;
Проблема 2 - закраска фона радиокнопки оставляет ряд незакрашенных пикселей серого цвета (цвета окна), не состыковываясь с обводкой большего радиуса;
Проблема 3 - на нокии N90 шрифт в заголовке окна уезжает вверх.