Пётр написал(а):
Можно ведь самому нарисовать - сделать из ImageGadget'а или CanvasGadget'а.
Можно поподробней или пример?
Рисованный интерфейс программы
Сообщений 91 страница 120 из 302
Поделиться9202.05.2012 18:05:16
Определяем что была нажата левая кнопка мышки, или перемещена мышь и по текущим координатам курсора, передвигаем рисованный ползунок (картинку).
Поделиться9302.05.2012 18:10:02
Понял, буду пробовать.
Поделиться9402.05.2012 19:19:26
Можно пример работы CanvasGadget с загрузкой рисунка? За час сделал только это:
Голова уже "кипит". 
Поделиться9502.05.2012 20:38:01
Было бы проще если бы был не только скрин, но и код.
Если нужно поместить рисунок в произвольную часть, то так:
Код:
StartDrawing(CanvasOutput(0)) DrawImage(ImageID(#Window_5), x, y) StopDrawing()
А если просто загрузить фоновый рисунок на весь CanvasGadget, то так:
Код:
SetGadgetAttribute(0, #PB_Canvas_Image, ImageID(#Window_5))
В справке это написано. http://purebasic.com/documentation/gadg … adget.html
Поделиться9602.05.2012 20:40:35
Вот код:
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
ImageGadget(0,0,0,258,123,ImageID(#Window_5))
CanvasGadget(1, 10, 10, 24, 15,#PB_Canvas_ClipMouse)
StartDrawing(CanvasOutput(1))
StopDrawing()
Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "TrackBarGadget.png"
Window_4:
IncludeBinary "H-knob3.png"
;}
EndDataSectionПоделиться9702.05.2012 20:46:33
Выше уже написал как нужно сделать.
Поделиться9802.05.2012 20:54:50
Это я понял. 
Поделиться9902.05.2012 21:04:56
Сделал так:
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
ImageGadget(0,0,0,258,123,ImageID(#Window_5))
CanvasGadget(1, 20, 28, 24, 15)
StartDrawing(CanvasOutput(1))
DrawImage(ImageID(#Window_4), 0, 0)
StopDrawing()
Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "TrackBarGadget.png"
Window_4:
IncludeBinary "H-knob3.png"
;}
EndDataSectionРисунок выводится так:
а должен быть просто бегунок. 
Поделиться10002.05.2012 22:26:30
Если нужно наложить рисунок с альфа каналом, то следует использовать функцию DrawAlphaImage().
Поделиться10103.05.2012 10:44:46
Спасибо, завтра попробую.
Поделиться10205.05.2012 08:56:26
Привет.
Сделал с DrawAlphaImage():
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
ImageGadget(0,0,0,258,123,ImageID(#Window_5))
CanvasGadget(1, 20, 28, 24, 15)
StartDrawing(CanvasOutput(1))
DrawAlphaImage(ImageID(#Window_4), 0, 0)
StopDrawing()
Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "TrackBarGadget.png"
Window_4:
IncludeBinary "H-knob3.png"
;}
EndDataSectionРисунок теперь такой:
С ImageGadget такого не было. Или я что-то не так делаю?
Поделиться10305.05.2012 10:29:18
max написал(а):
Или я что-то не так делаю?
Канвас не поддерживает прозрачность, т.е. фон канваса всегда непрозрачен. Костыльный выход - это закрасить "H-knob3.png" вокруг ползунка, в цвет подложки.
Поделиться10405.05.2012 11:00:15
Почему бы в место использования фонового рисунка, не рисовать все в CanvasGadget?
Сделать CanvasGadget с размерами регулятора, нарисовать фон регулятора, а затем движок. Тогда все должно получится.
При таком подходе как сейчас, вообще теряется смысл использования канваса, поскольку не сможем получать координаты перемещения ползунка стандартными методами (с помощью #PB_EventType_MouseMove).
Поделиться10505.05.2012 11:33:07
Пётр написал(а):
Почему бы в место использования фонового рисунка, не рисовать все в CanvasGadget?.
Я просто не знаю, как нарисовать все в CanvasGadget. Сейчас в нете поищу. Может у кого есть пример?
Поделиться10605.05.2012 11:59:00
max написал(а):
Может у кого есть пример?
Заодно сделал перемещение ползунка мышкой.
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
Procedure Draw(x, y)
StartDrawing(CanvasOutput(1))
DrawImage(ImageID(#Window_5), 0, 0)
DrawAlphaImage(ImageID(#Window_4), x, y)
StopDrawing()
EndProcedure
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(1, 20, 28, 80, 15)
Draw(20, 0)
Repeat
Event = WaitWindowEvent()
If Event = #PB_Event_Gadget
If EventGadget()=1
Type = EventType()
If Type = #PB_EventType_LeftClick Or (Type = #PB_EventType_MouseMove And GetGadgetAttribute(1, #PB_Canvas_Buttons) = #PB_Canvas_LeftButton)
x=GetGadgetAttribute(1, #PB_Canvas_MouseX)-12
If x<0 : x=0 : EndIf
If x>80-24 : x = 80-24 : EndIf
Draw(x, 0)
EndIf
EndIf
EndIf
Until Event = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "H-knob3_Light.png"
Window_4:
IncludeBinary "H-knob3.png"
;}
EndDataSectionПоделиться10705.05.2012 12:28:00
Спасибо.
Для нескольких попробовал сделать так:
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
Procedure Draw(x, y, Gadget)
StartDrawing(CanvasOutput(Gadget))
DrawImage(ImageID(#Window_5), 0, 0)
DrawAlphaImage(ImageID(#Window_4), x, y)
StopDrawing()
EndProcedure
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(1, 20, 28, 80, 15)
Draw(20, 0, 1)
CanvasGadget(2, 20, 58, 80, 15)
Draw(20, 0, 2)
Repeat
Event = WaitWindowEvent()
If Event = #PB_Event_Gadget
If EventGadget()=1
Type = EventType()
If Type = #PB_EventType_LeftClick Or (Type = #PB_EventType_MouseMove And GetGadgetAttribute(1, #PB_Canvas_Buttons) = #PB_Canvas_LeftButton)
x=GetGadgetAttribute(1, #PB_Canvas_MouseX)-12
If x<0 : x=0 : EndIf
If x>80-24 : x = 80-24 : EndIf
Draw(x, 0, 1)
EndIf
EndIf
If EventGadget()=2
Type = EventType()
If Type = #PB_EventType_LeftClick Or (Type = #PB_EventType_MouseMove And GetGadgetAttribute(2, #PB_Canvas_Buttons) = #PB_Canvas_LeftButton)
x=GetGadgetAttribute(2, #PB_Canvas_MouseX)-12
If x<0 : x=0 : EndIf
If x>80-24 : x = 80-24 : EndIf
Draw(x, 0, 2)
EndIf
EndIf
EndIf
Until Event = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "H-knob3_Light.png"
Window_4:
IncludeBinary "H-knob3.png"
;}
EndDataSectionПравильно? Проверил, работает. А как сделать вертикальные?
И еще: H-knob3_Light.png - это как бы подсветка при наведении курсора. Можно как-нибудь по другому сделать?
Поделиться10805.05.2012 12:43:59
max написал(а):
Для нескольких попробовал сделать так
Тогда уж лучше так - меньше кода.
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
Procedure Draw(x, y, Gadget)
StartDrawing(CanvasOutput(Gadget))
DrawImage(ImageID(#Window_5), 0, 0)
DrawAlphaImage(ImageID(#Window_4), x, y)
StopDrawing()
EndProcedure
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(1, 20, 28, 80, 15)
Draw(20, 0, 1)
CanvasGadget(2, 20, 58, 80, 15)
Draw(20, 0, 2)
Repeat
Event = WaitWindowEvent()
If Event = #PB_Event_Gadget
Gadget=EventGadget()
If Gadget=1 Or Gadget=2
Type = EventType()
If Type = #PB_EventType_LeftClick Or (Type = #PB_EventType_MouseMove And GetGadgetAttribute(Gadget, #PB_Canvas_Buttons) = #PB_Canvas_LeftButton)
x=GetGadgetAttribute(Gadget, #PB_Canvas_MouseX)-12
If x<0 : x=0 : EndIf
If x>80-24 : x = 80-24 : EndIf
Draw(x, 0, Gadget)
EndIf
EndIf
EndIf
Until Event = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "H-knob3_Light.png"
Window_4:
IncludeBinary "H-knob3.png"
;}
EndDataSectionmax написал(а):
А как сделать вертикальные?
Примерно так же как и горизонтальные, только используем другие рисунки и работаем с координатой Y, а не X.
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
Procedure Draw(x, y)
StartDrawing(CanvasOutput(1))
DrawImage(ImageID(#Window_5), 0, 0)
DrawAlphaImage(ImageID(#Window_4), x, y)
StopDrawing()
EndProcedure
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(1, 20, 28, 15, 78)
Draw(0, 20)
Repeat
Event = WaitWindowEvent()
If Event = #PB_Event_Gadget
If EventGadget()=1
Type = EventType()
If Type = #PB_EventType_LeftClick Or (Type = #PB_EventType_MouseMove And GetGadgetAttribute(1, #PB_Canvas_Buttons) = #PB_Canvas_LeftButton)
y=GetGadgetAttribute(1, #PB_Canvas_MouseY)-12
If y<0 : y=0 : EndIf
If y>78-24 : y = 78-24 : EndIf
Draw(0, y)
EndIf
EndIf
EndIf
Until Event = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "V-knob3_Light.png"
Window_4:
IncludeBinary "V-knob3.png"
;}
EndDataSectionmax написал(а):
Можно как-нибудь по другому сделать?
Например, как хотелось бы?
Я лишь предложил один из простых вариантов.
Поделиться10905.05.2012 12:58:03
Пётр написал(а):
Тогда уж лучше так, меньше кода.
Согласен.
Пётр написал(а):
только используем другие рисунки и работаем с координатой Y, а не X.
Спасибо.
max написал(а):
И еще: H-knob3_Light.png - это как бы подсветка при наведении курсора. Можно как-нибудь по другому сделать?
Думаю чтобы это реализовать нужно вместо H-knob3_Light.png использоать рисунок фона. В нужном направлении думаю?
Мне понадобится одновременно шесть разных по цвету вертикальных движков. Думаю, что в Procedure Draw нужно менять ImageID в DrawAlphaImage(ImageID(#Window_4), x, y). Как это можно реализовать?
Поделиться11005.05.2012 13:27:12
max написал(а):
Думаю чтобы это реализовать нужно вместо H-knob3_Light.png использоать рисунок фона.
Выше уже делал так, результат видел? Фон регулятора нужно хранить в CanvasGadget, а не в виде фонового рисунка окна. Это вообще неправильно и подобных реализаций я даже не встречал.
max написал(а):
Мне понадобится одновременно шесть разных по цвету вертикальных движков. Думаю, что в Procedure Draw нужно менять ImageID в DrawAlphaImage(ImageID(#Window_4), x, y). Как это можно реализовать?
Передавай в процедуру ID рисунка.
Код:
Procedure Draw(x, y, Gadget, ImageID) StartDrawing(CanvasOutput(Gadget)) DrawImage(ImageID(#Window_5), 0, 0) DrawAlphaImage(ImageID, x, y) StopDrawing() EndProcedure
Или можно создать массив с идентификаторами рисунков и в зависимости от идентификатора гаджета, использовать требуемый идентификатор рисунка, а можно его (ImageID) сохранить в ячейке Data, гаджета.
В общем, вариантов реализации может быть очень много.
Поделиться11105.05.2012 13:59:26
Пётр написал(а):
Фон регулятора нужно хранить в CanvasGadget
Можно по подробней?
Поделиться11205.05.2012 14:06:41
max написал(а):
Можно по подробней?
Я же показывал пример. Вопросы новичка (продолжение…)
Там не только ползунок но и фон находятся в CanvasGadget.
Поделиться11305.05.2012 14:10:15
То есть в Procedure Draw в сроке DrawImage(ImageID(#Window_5), 0, 0)? Понял, спасибо.
Поделиться11405.05.2012 14:24:38
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
Procedure Draw(x, y, Gadget, ImageID)
StartDrawing(CanvasOutput(Gadget))
DrawImage(ImageID(#Window_5), 0, 0)
DrawAlphaImage(ImageID, x, y)
StopDrawing()
EndProcedure
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(1, 20, 28, 15, 78)
Draw(0, 20, 1, #Window_4)
CanvasGadget(2, 50, 28, 15, 78)
Draw(0, 20, 2, #Window_4)
Repeat
Event = WaitWindowEvent()
If Event = #PB_Event_Gadget
Gadget=EventGadget()
If Gadget=1 Or Gadget=2
Type = EventType()
If Type = #PB_EventType_LeftClick Or (Type = #PB_EventType_MouseMove And GetGadgetAttribute(Gadget, #PB_Canvas_Buttons) = #PB_Canvas_LeftButton)
y=GetGadgetAttribute(Gadget, #PB_Canvas_MouseX)-12
If y<0 : y=0 : EndIf
If y>78-24 : y = 78-24 : EndIf
Draw(0, y, Gadget, ImageID)
EndIf
EndIf
EndIf
Until Event = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "V-knob3_Light.png"
Window_4:
IncludeBinary "V-knob3.png"
;}
EndDataSectionОшибка на DrawAlphaImage(ImageID, x, y): ImageID is null. Что не так?
Поделиться11505.05.2012 14:33:13
max написал(а):
Что не так?
Вот вызов процедуры.
Код:
Draw(0, y, Gadget, ImageID)
В ImageID что хранится?
Поделиться11605.05.2012 14:38:06
Пётр написал(а):
В ImageID что хранится?
Согласен, что-то не пойму как там хранить ImageID.
Поделиться11705.05.2012 14:42:15
Нужно передать идентификатор изображения.
Код:
Draw(0, y, Gadget, ImageID(#Window_4))
Поделиться11805.05.2012 14:57:18
Ага, теперь выводится, только бегунок появляется только при нажатии на полосу.
Пётр написал(а):
Draw(0, y, Gadget, ImageID(#Window_4))
При таком вызове все бегунки одинаковые. Как тогда сюда загрузить разные ImageID?
Поделиться11905.05.2012 15:34:09
max написал(а):
только бегунок появляется только при нажатии на полосу.
Код:
CanvasGadget(1, 20, 28, 15, 78) Draw(0, 20, 1, ImageID(#Window_4)) CanvasGadget(2, 50, 28, 15, 78) Draw(0, 20, 2, ImageID(#Window_4))
max написал(а):
Как тогда сюда загрузить разные ImageID?
Нужно указать требуемый идентификатор изображения при вызове процедуры Draw.
Это можно сделать на лету во время работы программы.
Допустим, у нас есть гаджеты с идентификаторами 1 - 4, создающие 4 бегунка. Так же есть изображения бегунков, допустим, тоже с идентификаторами 1 - 4.
Тогда все просто.
Код:
Draw(0, y, Gadget, ImageID(Gadget))
Поделиться12005.05.2012 15:59:42
Код:
Enumeration
#Window_5
#Window_4
EndEnumeration
UsePNGImageDecoder()
CatchImage(#Window_5, ?Window_5)
CatchImage(#Window_4, ?Window_4)
Procedure Draw(x, y, Gadget, ImageID)
StartDrawing(CanvasOutput(Gadget))
DrawImage(ImageID(#Window_5), 0, 0)
DrawAlphaImage(ImageID, x, y)
StopDrawing()
EndProcedure
OpenWindow(0, 0, 0, 258, 123, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(1, 20, 28, 15, 78)
Draw(0, 20, 1, ImageID(#Window_4))
CanvasGadget(2, 50, 28, 15, 78)
Draw(0, 20, 2, ImageID(#Window_4))
Repeat
Event = WaitWindowEvent()
If Event = #PB_Event_Gadget
Gadget=EventGadget()
If Gadget=1 Or Gadget=2
Type = EventType()
If Type = #PB_EventType_LeftClick Or (Type = #PB_EventType_MouseMove And GetGadgetAttribute(Gadget, #PB_Canvas_Buttons) = #PB_Canvas_LeftButton)
y=GetGadgetAttribute(Gadget, #PB_Canvas_MouseY)-12
If y<0 : y=0 : EndIf
If y>78-24 : y = 78-24 : EndIf
Draw(0, y, Gadget, ImageID(Gadget))
EndIf
EndIf
EndIf
Until Event = #PB_Event_CloseWindow
DataSection
;{ ресурсы
Window_5:
IncludeBinary "V-knob3_Light.png"
Window_4:
IncludeBinary "V-knob3.png"
;}
EndDataSectionВыскакивает ошибка на строке Draw(0, y, Gadget, ImageID(Gadget)).
Похожие темы
| Рисованный интерфейс FM | OpenSource | 27.04.2010 |
| Фон | Вопросы по PureBasic | 16.03.2014 |
| (Статья) Создаем VSM-модель для протеуса (DLL библиотека) | PureBasic для Windows | 17.04.2014 |
| Перевод книги "PureBasic - A Beginners Guide" | Материалы сайта | 04.05.2016 |