2D-Bilder in 3D nach hinten kippen
-
- Beiträge: 659
- Registriert: 19.10.2014 15:51
- Kontaktdaten:
2D-Bilder in 3D nach hinten kippen
Ihr wertet Spiderbasic gerade um 1000% auf, liebe Leute!
Ihr seid echt spitze!
Kann man mit CSS auch 2d Bilder in 3d umwandeln? Ich möchte gerne 2d-Spielkarten "nach hinten kippen", sodass man schräg von oben drauf sieht.
Ist das auch mit SB machbar?
__________________________________________________
Thread geteilt
SpiderBasic>SpiderBasic
SpiderBasic Library - Liste neuer Funktionen>2D-Bilder in 3D nach hinten kippen
17.10.2018
RSBasic
Ihr seid echt spitze!
Kann man mit CSS auch 2d Bilder in 3d umwandeln? Ich möchte gerne 2d-Spielkarten "nach hinten kippen", sodass man schräg von oben drauf sieht.
Ist das auch mit SB machbar?
__________________________________________________
Thread geteilt
SpiderBasic>SpiderBasic
SpiderBasic Library - Liste neuer Funktionen>2D-Bilder in 3D nach hinten kippen
17.10.2018
RSBasic
Ich programmiere nur noch mit Linux.
Linux Mint 21.x
Linux Mint 21.x
Re: SpiderBasic Library - Liste neuer Funktionen
das Thema passt eigentlich nicht in diesen Thread. @Ray: Kannste das hier verschieben?
Beispielsweise: https://nnattawat.github.io/flip/
Muss sich nur jemand finden, der das in SB implementiert.
Grüße ... Peter
Prinzipiell ja. Es gibt wohl etliche JavaScript-Codes, mit denen man das machen kann.stevie1401 hat geschrieben:Ist das auch mit SB machbar?
Beispielsweise: https://nnattawat.github.io/flip/
Muss sich nur jemand finden, der das in SB implementiert.
Grüße ... Peter
Hygge
Re: 2D-Bilder in 3D nach hinten kippen
@stevie1401
2D in 3D nach hinten kippen habe ich schon umgesetzt: viewtopic.php?p=349354#p349354
Nur kann man damit nur Gadgets drehen, aber ich werde noch eine weitere Funktion bauen, damit man auch Grafiken in 3D drehen kann.
2D in 3D nach hinten kippen habe ich schon umgesetzt: viewtopic.php?p=349354#p349354
Nur kann man damit nur Gadgets drehen, aber ich werde noch eine weitere Funktion bauen, damit man auch Grafiken in 3D drehen kann.
- TroaX
- Beiträge: 661
- Registriert: 08.03.2013 14:27
- Computerausstattung: PC: Ryzen 9 3950X, 96 GB RAM, RX6800XT, 2.5 TB SSD, 21:9 Display, Pop_OS! | Lappi: Ryzen 7 5800H, 16 GB RAM, 1 TB SSD, Pop_OS!
- Wohnort: NRW
- Kontaktdaten:
Re: SpiderBasic Library - Liste neuer Funktionen
Geht mit CSS Transform sogar noch einfacher: https://www.mediaevent.de/css/transform.html
Aber CSS scheint wohl mit Spiderbasic nicht ganz so schön zu funktionieren. Eigentlich wäre das eine gute Möglichkeit von den Entwicklern, passende Compiler-Funktionen einzubetten, mit denen sich ein CSS-File bearbeiten kann. z.B:
Damit werden Selektoren in eine Liste eingetragen und darin die Optionen und Werte gelistet. Beim "kompilieren" wird aus dieser Liste ein weiteres CSS-File generiert und eingebettet. Damit könnte man sich tonnenweise Prozeduren sparen und es würden sich viele Dinge einfacher und performanter realisieren lassen (u.a. das Einfärben von Tabellenzeilen bzw. Spalten). So wie es aussieht wird dies aber momentan über Javascript erledigt. Mir als alt eingesessener Webtüftler läuft es dabei Eiskalt den Rücken runter.
EDIT: OMG Jetzt wurde der Beitrag verschoben. Dies bezieht sich auf einen Beitrag, der jetzt irgendwo anders liegt!!!
viewtopic.php?f=33&t=31132
Aber CSS scheint wohl mit Spiderbasic nicht ganz so schön zu funktionieren. Eigentlich wäre das eine gute Möglichkeit von den Entwicklern, passende Compiler-Funktionen einzubetten, mit denen sich ein CSS-File bearbeiten kann. z.B:
Code: Alles auswählen
CompilerAddStyle(selector$,option$,value$)
EDIT: OMG Jetzt wurde der Beitrag verschoben. Dies bezieht sich auf einen Beitrag, der jetzt irgendwo anders liegt!!!
viewtopic.php?f=33&t=31132
PC: Ryzen 9 3950X | 96 GB RAM | RX6800XT | 2,5 TB NVMe | Pop_OS!
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Re: 2D-Bilder in 3D nach hinten kippen
@TroaX
Ich hab deinen Beitrag hierher verschoben.
Genau so hätte ich auch gemacht. Dafür gibt es ja transform: rotate3d().
Ich habe den anderen Code auch schon mit transform: rotate3d() gemacht.
Ich hab deinen Beitrag hierher verschoben.
Genau so hätte ich auch gemacht. Dafür gibt es ja transform: rotate3d().
Ich habe den anderen Code auch schon mit transform: rotate3d() gemacht.
+1TroaX hat geschrieben:Aber CSS scheint wohl mit Spiderbasic nicht ganz so schön zu funktionieren. Eigentlich wäre das eine gute Möglichkeit von den Entwicklern, passende Compiler-Funktionen einzubetten, mit denen sich ein CSS-File bearbeiten kann. z.B:
Re: 2D-Bilder in 3D nach hinten kippen
@stevie1401
Wie zeigst du deine Karten an? Bestimmt mit ImageGadget oder?
Wenn ja, dann hast du ja schon die Lösung: viewtopic.php?p=349354#p349354
Ich wollte es gerade umsetzen, aber da fiel mir ja ein, dass das garnicht notwendig ist, da man Grafiken in SpiderBasic nur mit ImageGadget anzeigen kann und dieses kannst du problemlos mit meinem Code in 3D drehen.
Beispiehaft mit einer sehr einfachen Spielkarte, die sich dann dreht:
Wie zeigst du deine Karten an? Bestimmt mit ImageGadget oder?
Wenn ja, dann hast du ja schon die Lösung: viewtopic.php?p=349354#p349354
Ich wollte es gerade umsetzen, aber da fiel mir ja ein, dass das garnicht notwendig ist, da man Grafiken in SpiderBasic nur mit ImageGadget anzeigen kann und dieses kannst du problemlos mit meinem Code in 3D drehen.
Beispiehaft mit einer sehr einfachen Spielkarte, die sich dann dreht:
Code: Alles auswählen
EnableExplicit
Procedure SetGadgetRotate3D(gadget, x, y, z, degree)
Protected id.s
;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
! var GadgetElement = $(spider_GadgetID(v_gadget).div);
! if (GadgetElement.attr("id")) {
! v_id = GadgetElement.attr("id");
! } else {
! GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
! v_id = GadgetElement.attr("id");
! }
;Styles setzen
! GadgetElement.css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
EndProcedure
;================================================== Beispielcode ==================================================
Global angle
Procedure TimerEvents()
Select EventTimer()
Case 1
angle + 1
SetGadgetRotate3D(1, 1, 0, 0, angle)
If angle = 360
angle = 0
EndIf
EndSelect
EndProcedure
CreateImage(1, 120, 200, 24)
If StartDrawing(ImageOutput(1))
Box(0, 0, 120, 200, RGB(0, 0, 0))
Box(2, 2, 116, 196, RGB(255, 255, 255))
DrawText(10, 10, "A", RGB(255, 0, 0))
LineXY(50, 100, 60, 80, RGB(255, 0, 0))
LineXY(50, 100, 60, 120, RGB(255, 0, 0))
LineXY(60, 80, 70, 100, RGB(255, 0, 0))
LineXY(60, 120, 70, 100, RGB(255, 0, 0))
StopDrawing()
EndIf
If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
ImageGadget(1, 100, 100, 120, 200, ImageID(1), 0)
AddWindowTimer(0, 1, 10)
BindEvent(#PB_Event_Timer, @TimerEvents())
EndIf
-
- Beiträge: 659
- Registriert: 19.10.2014 15:51
- Kontaktdaten:
Re: 2D-Bilder in 3D nach hinten kippen
Leider kippen meine Karten nicht:
doko-lounge.de/Karten45Grad.jpg
(Ich bekomme das Bild leider nicht hier rein)
Degree=45
Ist aber egal was ich einstelle. Die Bilder werden nur verformt.
doko-lounge.de/Karten45Grad.jpg
(Ich bekomme das Bild leider nicht hier rein)
Degree=45
Ist aber egal was ich einstelle. Die Bilder werden nur verformt.
Ich programmiere nur noch mit Linux.
Linux Mint 21.x
Linux Mint 21.x
Re: 2D-Bilder in 3D nach hinten kippen
Okay, du willst, dass es auch perspektivisch gedreht wird. Bitte schön:
Code: Alles auswählen
EnableExplicit
Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
Protected id.s
;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
! var GadgetElement = $(spider_GadgetID(v_gadget).div);
! if (GadgetElement.attr("id")) {
! v_id = GadgetElement.attr("id");
! } else {
! GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
! v_id = GadgetElement.attr("id");
! }
;Styles setzen
! GadgetElement.css("perspective", v_perspective_width + "px");
! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
EndProcedure
;================================================== Beispielcode ==================================================
Global angle
Procedure TimerEvents()
Select EventTimer()
Case 1
angle + 1
SetGadgetRotate3D(1, 1, 0, 0, angle, 600)
If angle = 360
angle = 0
EndIf
EndSelect
EndProcedure
CreateImage(1, 120, 200, 24)
If StartDrawing(ImageOutput(1))
Box(0, 0, 120, 200, RGB(0, 0, 0))
Box(2, 2, 116, 196, RGB(255, 255, 255))
DrawText(10, 10, "A", RGB(255, 0, 0))
LineXY(50, 100, 60, 80, RGB(255, 0, 0))
LineXY(50, 100, 60, 120, RGB(255, 0, 0))
LineXY(60, 80, 70, 100, RGB(255, 0, 0))
LineXY(60, 120, 70, 100, RGB(255, 0, 0))
StopDrawing()
EndIf
If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
ImageGadget(1, 100, 100, 120, 200, ImageID(1), 0)
AddWindowTimer(0, 1, 10)
BindEvent(#PB_Event_Timer, @TimerEvents())
EndIf
Re: 2D-Bilder in 3D nach hinten kippen
Herrje, Ray, Du bist einfach zu schnell! Wie soll man denn da noch mithalten?
-> http://test.tuebben.de/cards/
-> http://test.tuebben.de/cards/
Code: Alles auswählen
EnableExplicit
Enumeration
#Window
#ImageGadget
EndEnumeration
Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
Protected id.s
;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
! var GadgetElement = $(spider_GadgetID(v_gadget).div);
! if (GadgetElement.attr("id")) {
! v_id = GadgetElement.attr("id");
! } else {
! GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
! v_id = GadgetElement.attr("id");
! }
;Styles setzen
! GadgetElement.css("perspective", v_perspective_width + "px");
! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
EndProcedure
;================================================== Beispielcode ==================================================
Global angle
Global CurrentImage
Procedure TimerEvents()
Select EventTimer()
Case 1
angle + 1
SetGadgetRotate3D(#ImageGadget, 1, 0, 0, angle, 600)
Select angle
Case 90, 270
If CurrentImage = 0
CurrentImage = 1
Else
CurrentImage = 0
EndIf
SetGadgetState(#ImageGadget, ImageID(CurrentImage))
Case 360
angle = 0
EndSelect
EndSelect
EndProcedure
Procedure Main()
OpenWindow(#Window, 0, 0, 500, 500, "Window", #PB_Window_ScreenCentered)
ImageGadget(#ImageGadget, 100, 100, 120, 200, ImageID(CurrentImage), 0)
AddWindowTimer(#Window, 1, 10)
BindEvent(#PB_Event_Timer, @TimerEvents())
EndProcedure
Procedure Loaded(Type, Filename$, ObjectId)
Static nbLoadedImages
nbLoadedImages + 1
If nbLoadedImages = 2
Main()
EndIf
EndProcedure
Procedure LoadingError(Type, Filename$, ObjectId)
Debug Filename$ + ": loading error"
EndProcedure
; Register the loading event before calling any resource load command
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())
LoadImage(0, "resources/front.jpg")
LoadImage(1, "resources/back.jpg")
Hygge
Re: 2D-Bilder in 3D nach hinten kippen
Dafür zeigt dein Beispielcode zwei verschiedene Seiten einer Spielkarte.