Вверх ↑
Этот топик читают: Гость
Ответов: 2193
Рейтинг: 673
#1: 2012-05-27 23:31:28 ЛС | профиль | цитата
Внимание: элементы в стадии разработки и выкладываются для тестирования

Особая благодарность за помощь 1nd1g0

Элементы с приставкой GP_ предназначены для рисования и используют GDI+, в отличии от элементов из вкладки Рисования которые используют (в большинстве) GDI. На данный момент создано 26 элементов, работают с компилятором FPC
Особое различие между элементами Рисование это возможность использовать прозрачность (к примеру нарисованная линия может быть с заданной степенью прозрачности), способы заливки (использование настраиваемых кистей).
Вкратце о GDI+
GDI+ является улучшенной средой для 2D-графики, в которую добавлены такие возможности, как сглаживание линий (antialiasing), использование координат с плавающей точкой, градиентная заливка, внутренняя поддержка таких графических форматов, как JPEG и PNG, куда лучшая поддержка регионов отсечения с возможностью использовать в них координаты с плавающей точкой (а не 16-битные целые) и применения к ним World Transform, преобразования двумерных матриц и т. п. GDI+ использует ARGB-цвета. Эти возможности используются в пользовательском интерфейсе Windows XP, а их присутствие в базовом графическом слое облегчает использование систем векторной графики, таких как Flash или SVG.
Скриншоты

Элементы GP

Пример рисования кривой (схема в архиве)

Пример рисования кривой Безье (схема в архиве)

Пример заливки кистью (схема в архиве)

Пример возможностей отображения текста (схема в архиве)

Пример всех видов узорной киски (схема в архиве)


Скачать архив (2022-05-10)
В архиве:
- 26 элементов (pas,ini,ico)
- 8 примеров (sha).
- 2 схемы редакторы свойств элементов (только для работы с элементами GP): PointsXY (редактор массива точек XY) и ArrColors (редактор массива цветов с прозрачностью).
- Иконка для новой вкладки (Графика 2)
- Схема установщика для добавления вкладки Графика 2, дочерних вкладок и установки всех элементов и схем для редактирования свойств.
Установка элементов установщиком

Достаточно распаковать весь архив в удобное место, открыть схему AddElementsGP.sha в HiAsm, запустить и работать как с программой установки.
Установщик проделает следующее:
- Создает копию файла Elements.db под названием TempElements_[число установки].db
- Создает вкладку (Графика 2) и дочерние вкладки с расстановкой всех элементов в палитру элементов.
- Добавляет иконку (graphics2.ico) для вкладки
- Добавляет в папки все элементы (pas,ini,ico)
- Добавляет файлы для редактирование свойств в HiAsm\Int\edit\
- Добавляет примеры в папку HiAsm. Доступны из меню Помощь\Примеры в Папке: Draw\GP.
Установка элементов в ручную

Минимум:
1. Распаковать архив.
2. Из папки ElementsGP файлы ini по одному перетащить (зажав левой кнопкой мыши) на рабочее поле HiAsm, в появившемся меню нажать ОК.
3. Из папки OtherFilesForGP файл ArrPointXY.sha и ArrColors.sha нужно скопировать в папку HiAsm\Int\Edit
4. Перезапустить HiAsm.

Максимум:
1. Распаковать архив.
2. Иконку graphics2.ico (папка OtherFilesForGP) скопировать в папку HiAsm\Elementsdelphi\tabs.
3. На палитре элементов кликнуть в пустое место и в появившемся меню выбрать: Добавить вкладку. Имя новой вклдаки: Графика 2.
4. Из папки ElementsGP файлы ini по одному перетащить (зажав левой кнопкой мыши) на рабочее поле HiAsm, в появившемся меню нажать ОК.
5. Из папки OtherFilesForGP файл ArrPointXY.sha и ArrColors.sha нужно скопировать в папку HiAsm\Int\Edit
6. Перезапустить HiAsm.


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

Начальный текст поста (оставлен для понимания следующих постов)

Перед созданием элементов нужно решить пару вопросов:
1. Отдельная вкладка в Графике? Название (к примеру Расширенная)?
2. Приставку к элементам вместо Img_ (1nd1g0 предлагает GP_)?
3. Свойств пера достаточно много, думаю что будет лучше сделать перо и кисть менеджерами (если осилю).
4. Не хочеться привязывать элементы к Img_Draw.pas может сделать отдельный pas файл?
Решил делать так:
1. Вкладка: Графика 2.
2. Приставка GP_.
3. Все элементы сделаны как менеджеры. Все элементы подключаются к элементу Холст (Canvas).
4. Img_Draw.pas в элементах не используется.

Редактировалось 33 раз(а), последний 2022-05-11 16:31:31
карма: 10

19
Голосовали:1nd1g0, CriDos, ser_davkin, andrestudio, sаmakacd, Cosinus, foksov, iarspider, Konst, Assasin, man-man74, tig-rrr, kamakama, LainX, ric, Dad2016, flud, Pavel, envoy_sky
vip
#1.1контекстная реклама от партнеров
Ответов: 3889
Рейтинг: 362
#2: 2012-05-28 00:32:56 ЛС | профиль | цитата
[offtop]sla8a, а за книгу спасибо andrestudio, подсказал, когда я сам колдовал над GDI+ методом тыка. Пример как раз без книги тот делался, потому такой кривой [/offtop]
1) Вы прочли мои мысли. Чем воевать со старой шестнадцатибитной (!) графикой, мудрее создать новую вкладку и наполнять её полноценными, относительно современными элементами новой. Графика 2, Графика +, Расширенная графика - красивое, но длинное для боковой панели название.
2) GP_ - в честь GDI Plus, не GDIP_ же. Идеи лучше? Можно назвать без Img_ спереди, можно вконце прилепить Ex.
3) Я не пишу (нормально) на паскале, но если не будете справляться - буду рад посильно помочь.
4) Думаю, лучше всё своё, чтобы не оглядываться регулярно "в прошлое".
карма: 1

0
Ответов: 2193
Рейтинг: 673
#3: 2012-05-28 00:53:58 ЛС | профиль | цитата
1nd1g0, а что скажите по поводу ArrPointXY.sha? Без него или подобного редактора свойств далеко не уедешь, так как много где TGPPoint.
2. Если не последует предложение по другой приставки, буду делать с GP_ (против GP_ ничего не имею).
3. Сама идея менеджеров на перо и кисть хорошая идея? Думаю будет удобно.
4. Думаю так же.
Вроде разобрался с пользовательскими наконечниками (в архиве в примере еще не работают). Для любой линии можно нарисовать свой начальный и конечный наконечник.
Вид пользовательских наконечников
карма: 10

0
файлы: 1democustomcap.jpg [9.1KB] [2538]
Ответов: 3889
Рейтинг: 362
#4: 2012-05-28 01:17:57 ЛС | профиль | цитата
sla8a, 3) альтернативы практически нет, либо тянуть кучу связей от элементов "перо" и "кисть", либо встраивать перья и кисти в каждый элемент по отдельности. Оба случая добавляют геморроя, один - при работе со схемой, второй - при создании компонентов.
Что касается редактора массивов точек, то для предустановленного свойства по умолчанию - самый оптимальный вариант (круче - только визуально). Интересно подумать, как оптимальнее работать с массивом точек из схемы, добавлять, удалять, переставлять. Как думаете, пока рано дробные координаты вводить? Есть мнение, что нам и целочисленных пока хватит.
------------ Дoбавленo в 01.17:
Кстати, если подумать (глядя на Ваши примеры), у нас теперь есть серьёзный конкурент элементу графиков, заполнил массив - вот тебе и график, сменил циферку - вот он уже сглаженный, меняешь другую циферку в цикле - вот он уже и анимированный. Про прозрачность и наконечники вообще молчу Скоро с нас потребуют не только редактор массива, но и штатный векторный редактор
карма: 1

0
Ответов: 2193
Рейтинг: 673
#5: 2012-05-28 01:26:58 ЛС | профиль | цитата
3. А может попробовать реализовать так: Делаются обычные (не менеджер) элементы перо и кисть, создается (doCreat) к примеру три пера со своими свойствами (Name) и включается одно (doSelect) рисуются линии, фигуры, потом по мере надобности переключается на другое перо или редактируется свойства ранее созданного.
1nd1g0 писал(а):
Как думаете, пока рано дробные координаты вводить?

В начале тестовые элементы, потом посмотрим.
карма: 10

0
Ответов: 5446
Рейтинг: 323
#6: 2012-05-29 21:37:13 ЛС | профиль | цитата

Свойств пера достаточно много, думаю что будет лучше сделать перо и кисть менеджерами (если осилю).

Вот это правильный подход. Лови от меня +4.
карма: 1

0
Ответов: 2193
Рейтинг: 673
#7: 2012-06-01 22:04:50 ЛС | профиль | цитата
Выложил элементы для ознакомления (архив в первом посте). Не все свойства элемента Кисть (Brush) сделаны (градиент и текстура не доделаны). Интересно ваше мнение, для продолжения создания элементов нужно определиться оставлять ли такой вид элементов (менеджеры).
карма: 10

4
Голосовали:1nd1g0, Ex_, MAV, LainX
Ответов: 3889
Рейтинг: 362
#8: 2012-06-01 23:43:17 ЛС | профиль | цитата
sla8a, более чем, по духу не отстаёт от OpenGL, глядишь, группировку в "пути" и мировые преобразования когда-нибудь добавим, получим полноценный векторный инструмент и утрём нос HTML5 и Flash
карма: 1

0
Ответов: 1304
Рейтинг: 405
#9: 2012-06-02 11:43:05 ЛС | профиль | цитата
sla8a, очень понравился проект, спасиб за проделанную работу. Про применение менеджеров, имхо меньше менеджеров больше понимания, применение менеджеров значительно усложняет понимание схем новичками, и как правило элементы где есть менеджеры игнорируются. При тестировании при отрисовке на хендле получил мерцание, возможно сможешь найти решение. Очень хотелось бы увидеть сглаживание.
карма: 3

0
Ответов: 3889
Рейтинг: 362
#10: 2012-06-02 13:57:59 ЛС | профиль | цитата
MAV писал(а):
При тестировании при отрисовке на хендле получил мерцание, возможно сможешь найти решение.

Решений тут может быть только два: синхронизация с частотой обновления кадра и\или предварительная отрисовка в буфере (двойная буферизация). В принципе, универсальный компонент синхронизации с экраном был бы много где полезен, но сейчас всё менее актуален в виду нарастающей асинхронности устройств отображения и вариативности частот. Синхронно переключать\выводить буфера ещё реально, так, собственно система и делает, AFAIK.

Если не делаем анимации, то ставим своё рисование на событие onPaint. Или рисуем в буфере, и его кажем на onPaint.

При анимации альтернативы самодельному буферу (Bitmap), боюсь, нет. В системе есть призванная помогать в этом двойная буферизация (сама делает буфер при отрисовке на элементе), но, мягко говоря, не все элементы умеют с ней нормально работать.
------------ Дoбавленo в 13.48:
MAV, иллюстрация системной двойной буферизации:


Add(MainForm,2953706,385,203)
{
Width=680
Height=462
Caption="Test All Elements GP"
Position=1
Point(Handle)
Point(onPaint)
}
Add(ChildPanelEx,7266241,385,245)
{
}
BEGIN_SDK
Add(EditMultiEx,12409977,21,21)
{
}
Add(Panel,8998479,182,231)
{
Left=35
Top=105
Align=5
Point(onPaint)
Point(Handle)
link(onPaint,13164349:doSet,[])
}
Add(GP_Curve,6405214,476,308)
{
PointsArray=#5:20;20|5:60;50|6:80;120|7:100;150|7:150;100|6:180;80|7:220;140|6:260;50|7:300;100|0:|
Canvas="myCanvas"
link(onDraw,8330977:doFor,[])
}
Add(GP_Rectangle,855326,266,308)
{
X=45
Y=45
Width=100
Hieght=100
View=2
Canvas="myCanvas"
link(onDraw,2138541:doSet,[])
}
Add(GP_Brush,8648735,224,308)
{
Type=1
Color=8421376
Color2=65535
Alpha2=100
Hatch=51
Canvas="myCanvas"
link(onSet,855326:doDraw,[])
}
Add(GP_Pen,11360173,434,308)
{
Color=8421376
Alpha=100
Size=12
CustomStylePen=[]
StartCap=8
EndCap=6
StartCapOffset=22
EndCapOffset=22
Compound=[]
Canvas="myCanvas"
link(onSet,6405214:doDraw,[])
}
Add(GP_Pen,4302817,182,308)
{
Color=255
Size=2
CustomStylePen=[]
Compound=[]
Canvas="myCanvas"
link(onSet,8648735:doSet,[])
}
Add(Counter,11517692,266,238)
{
Max=23
link(onNext,4240771:doSet,[])
}
Add(GP_Ellipse,13593300,392,308)
{
X=170
Y=45
Width=100
Hieght=100
View=2
Canvas="myCanvas"
link(onDraw,11360173:doSet,[])
}
Add(GP_Brush,9105610,350,308)
{
Type=1
Color=32896
Color2=16711680
Hatch=45
Canvas="myCanvas"
link(onSet,13593300:doDraw,[])
}
Add(GP_Pen,2138541,308,308)
{
Color=255
Size=33
CustomStylePen=[]
Compound=['0'=0,'0'=2,'0'=4,'0'=6,'0'=8,'0'=10]
Canvas="myCanvas"
link(onSet,9105610:doSet,[])
}
Add(GP_Line,2979239,616,308)
{
X1=350
X2=480
Canvas="myCanvas"
link(Y1,1891837:Var2,[])
link(Y2,1891837:Var3,[(643,292)])
}
Add(GP_Pen,9550187,574,308)
{
Color=8388608
Alpha=0
Size=12
StylePen=1
CustomStylePen=[]
DashCap=1
StartCap=8
EndCap=5
Compound=[]
Canvas="myCanvas"
link(onSet,2979239:doDraw,[])
}
Add(GP_PolyLine,1847564,665,357)
{
PointsArray=#7:100;300|7:150;250|7:200;310|7:250;270|0:|
Canvas="myCanvas"
link(onDraw,6016372:doSet,[])
}
Add(GP_Pen,4069778,623,357)
{
Color=255
Size=5
CustomStylePen=[]
Compound=[]
Canvas="myCanvas"
link(onSet,1847564:doDraw,[])
}
Add(For,8330977,525,308)
{
End=250
Step=25
link(onEvent,9550187:doSet,[])
link(onStop,7913161:doData,[(569,321)(569,363)])
}
Add(GetDataEx,1891837,623,287)
{
Angle=3
link(Data,8330977:Position,[(515,292)(515,352)(531,352)])
}
Add(GP_Polygon,12965295,791,357)
{
PointsArray=#7:350;300|7:420;280|7:450;290|7:480;320|7:370;370|0:|
View=2
FillMode=1
Canvas="myCanvas"
}
Add(GP_Brush,4379932,749,357)
{
Type=1
Color=16777215
Color2=32768
Hatch=38
Canvas="myCanvas"
link(onSet,12965295:doDraw,[])
}
Add(GP_Pen,6016372,707,357)
{
Color=8421504
Size=5
CustomStylePen=[]
Compound=[]
Canvas="myCanvas"
link(onSet,4379932:doSet,[])
}
Add(GP_Canvas,13164349,224,238)
{
Name="myCanvas"
DrawSource=2
link(onSet,11517692:doNext,[])
}
Add(GP_Rectangle,1179926,392,238)
{
X=70
Y=200
Width=200
Hieght=150
View=2
Canvas="myCanvas"
link(onDraw,12816783:doNext,[])
}
Add(GP_Pen,4240771,308,238)
{
Color=255
Alpha=100
Size=12
StylePen=3
CustomStylePen=[]
DashCap=1
Compound=[]
Canvas="myCanvas"
link(onSet,11004791:doData,[])
}
Add(DoData,11004791,350,238)
{
link(onEventData,1179926:doDraw,[])
}
Add(GP_Arc,13787627,728,238)
{
X=500
Y=10
Width=120
Hieght=120
SweepAngle=90
Mode=1
View=2
Canvas="myCanvas"
link(onDraw,6366341:doData,[])
}
Add(GP_Pen,5423501,602,238)
{
Color=32896
Size=7
CustomStylePen=[]
DashCap=1
Compound=[]
Canvas="myCanvas"
link(onSet,13604446:doSet,[])
}
Add(Counter,12265591,686,238)
{
Max=359
Step=5
link(onNext,13787627:doDraw,[])
}
Add(DoData,6366341,770,238)
{
link(onEventData,4302817:doSet,[(815,244)(815,286)(166,286)(166,314)])
}
Add(GP_Curve,10757079,560,238)
{
PointsArray=#7:520;100|7:520;170|7:550;200|7:570;150|7:620;130|0:|
Type=1
Canvas="myCanvas"
link(onDraw,5423501:doSet,[])
}
Add(GP_Pen,11217108,476,238)
{
Color=16711680
Size=3
StylePen=3
CustomStylePen=[]
DashCap=1
Compound=[]
Canvas="myCanvas"
link(onSet,5720461:doData,[])
}
Add(GP_Brush,13604446,644,238)
{
Type=1
Color=8388736
Color2=16777215
Alpha2=0
Hatch=5
Canvas="myCanvas"
link(onSet,12265591:doNext,[])
}
Add(DoData,7913161,581,357)
{
link(onEventData,4069778:doSet,[])
}
Add(Counter,12816783,434,238)
{
Max=9
link(onNext,11217108:doSet,[])
}
Add(DoData,5720461,518,238)
{
link(onEventData,10757079:doDraw,[])
}
Add(Timer,2031693,63,329)
{
Interval=33
link(onTimer,287152:doRedraw,[])
}
Add(WinTools,287152,105,301)
{
Point(doRedraw)
link(Handle,8998479:Handle,[(111,264)(188,264)])
}
Add(Label,3379665,28,28)
{
Left=2
Top=2
Width=56
Align=2
Transparent=0
Caption="Я тут для автоматической двойной буферизации ^_^"
}
END_SDK

Попробуйте с Label и без него.
------------ Дoбавленo в 13.57:
sla8a, кстати, это моё воображение, или в Вашем примере утекает память
карма: 1

0
Ответов: 1841
Рейтинг: 369
#11: 2012-06-02 14:06:03 ЛС | профиль | цитата
1nd1g0, в Вашем примере с двойной буферизацией, тоже утекает
карма: 1
0
Ответов: 3889
Рейтинг: 362
#12: 2012-06-02 14:20:32 ЛС | профиль | цитата
И утекает она с первым же GP_Pen.doSet
------------ Дoбавленo в 14.08:
CriDos писал(а):
в Вашем примере с двойной буферизацией, тоже утекает

Я на своём примере и заметил, так как у меня частота кадров поднята для иллюстрации пропадания мерцания даже при быстрой перерисовке. Утекает она как минимум в процедуре смены пера холста.
------------ Дoбавленo в 14.14:
На GP_Brush.doSet тоже капает по-маленьку.
------------ Дoбавленo в 14.20:
Кроме создания перьев и кистей, старые нужно не забывать уничтожать (хотя бы после _hi_CreateEvent), да и холсты - тоже. А может перья помрут вместе с холстом, кстати, самостоятельно. Надо попробовать.
карма: 1

1
Голосовали:sla8a
Ответов: 1304
Рейтинг: 405
#13: 2012-06-02 14:37:24 ЛС | профиль | цитата
1nd1g0, спасиб за пример, получается компоненты новые а костылики старые .
карма: 3

0
Ответов: 3889
Рейтинг: 362
#14: 2012-06-02 14:48:34 ЛС | профиль | цитата
MAV писал(а):
компоненты новые а костылики старые

Ну, так компоненты лишь за наполнение отвечают, а буферизацией заниматься должно то, что наполняют. Я вообще занимался рисованием на контексте монитора, ради этого год назад и написал первый пример к GDI+, там вообще синхронизация архиважна, но её добиться не так-то просто штатными средствами, и Label с прозрачностью уже не поможет.
карма: 1

0
Ответов: 2193
Рейтинг: 673
#15: 2012-06-02 19:02:42 ЛС | профиль | цитата
1nd1g0 писал(а):
в Вашем примере утекает память

Сделал очистку (Free) пера и киски перед созданием нового, утечка памяти прекратилась (обновил архив).
1nd1g0 писал(а):
не забывать уничтожать, да и холсты - тоже

Холст создается только один в элементе Холст (Canvas) и удаляется после отрисовки. И перо и кисть тоже создается по одному экземпляру. Можно сделать в Холсте массив из Перьев и Кистей и переключаться между ними, вот только нужен ли такой подход?
MAV писал(а):
имхо меньше менеджеров больше понимания

MAV, элементы в стадии разработки, подскажите лучшее решение (без менеджеров), готов обсудить.
MAV писал(а):
при отрисовке на хендле получил мерцание

Постараюсь исправить.
MAV писал(а):
Очень хотелось бы увидеть сглаживание

Его не долго добавить (одна строчка кода), но пока нет идеи в какой элемент это вставить.
MAV писал(а):
получается компоненты новые а костылики старые

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

0
Сообщение
...
Прикрепленные файлы
(файлы не залиты)