Polyvector Rahmen und PNG-Schattenmodell

Previous topic - Next topic

Veritas

Hi Leute,
ich frag jetzt nochmal was ähnliches wie vorher aber diesmal in eine andere Richtung. Damit ihr nicht denk der fragt soviel und setzt nix um, erklär ich euch was ich vorhabe, das machts vlt einfacher.
1. Also ich habe ein Fenster, das soll entweder abgerundet oder eckig sein, das Layout soll später nämlich frei wählbar sein.
2. Natürlich brauchen die Fenster auch einen Rahmen, der entweder abgerundet oder eckig sein soll, breite frei wählbar.

Die zwei Punkte sind jetzt natürlich unter anderem dank der Funktion Roundrect abgehakt. Danke nochmal.

3. Damit das ganze nicht so platt aussieht soll noch ein Schatten darüber gelegt werden.

An und für sich wäre das ja nicht so schwer. Einfach ein transparentes PNG mit Schatteneffekt in der Fenstergröße machen und mit dem Befehl Stretchsprite parallel zum Fenster skalieren lassen.
Ganz so einfach ist es jedoch nicht. Da nicht nur die Fenstergröße sondern ja auch die Rahmenbreite frei wählbar sein soll (Rahmenbreite zwischen 6-25 Pixel) habe ich mir gedacht es wäre sinnvoll ein Polyvectorrahmen zu erstellen und auf diesen das PNG zu laden und mit den tx , ty Parametern zu dehnen.

Da ich nach einigen Versuchen feststellen musste das es mit einem einzigen Startpoly Endpoly-Befehl wohl nicht möglich ist einen Rahmen zu erstellen, habe ich das wie bei einem gezimmertem Holzbilderrahmen gemacht.
Eine Linkes, Unteres, Rechtes und Oberes Rahmentrapez aus Polyvectoren.
Auf dieses Rahmentrapez sollen jetzt separat auch je eine der 4 einzelnen Rahmentrapez-png's geladen werden.

Dadurch erhoffe ich mir parallel zur Rahmenbreite auch die Skalierung der einzelnen PNGs verändern zu können.
Jedoch krieg ich das nich hin, das es so aussieht wie ich es mir vorstelle, sitz schon mehrere Stunden dran und dreh und schraub an den tx / ty werten rum, weiß nemmer weiter.

Hier mein derzeitiger Fortschritt.
Bild
ftp://u44032133:EDQcqGUe@www.ratiogroup.de/Veritas/files/Ohne-Titel-1.png
Files
ftp://u44032133:EDQcqGUe@www.ratiogroup.de/Veritas/files/Roundrects.rar

Jetzt meine Frage hat jemand eine bessere Idee?
Findet ihr den Ansatz speziell für das was ich vorhabe richtig oder falsch? Gibt's einfache oder bessere? Was meint ihr.

Code (glbasic) Select
WHILE TRUE
RechteckRand(100,100,265,193,20,RGB(0x80, 0x80, 0xff), RGB(0xff,0xff,0xff), 0)
// RechteckRundRand(50,100, 265,193, 25, 16, RGB(0x80, 0x80, 0xff), RGB(0xff,0xff,0xff), 0)



/// Polyvector für Strechtspritebefehl

r=20 // Randstärke

// Abhänigkeit zueinander: Um alle vier Einzelrahmen zu manipulieren müssen nur die x-,y-Werte von A,B,C,D,G,H,K,L geändert werden
// A K
//   D    L
//
//   C    H
// B G
//
// Varibalen Linkes Rahmenstück

Ax=100
Ay=100
Bx=100
By=293
Cx=100+r
Cy=293-r
Dx=100+r
Dy=100+r

// Variablen Unteres Rahmenstück

Ex=Cx
Ey=Cy
Fx=Bx
Fy=By
Gx=365
Gy=293
Hx=365-r
Hy=293-r

// Variablen Rechtes Rahmenstück

Ix=Hx
Iy=Hy
Jx=Gx
Jy=Gy
Kx=365
Ky=100
Lx=365-r
Ly=100+r

// Variablen Oberes Rahmenstück

Mx=Kx
My=Ky
Nx=Ax
Ny=Ay
Ox=Dx
Oy=Dy
Px=Lx
Py=Ly

// Vektoren linker Rahmen
ALPHAMODE -0.99
STARTPOLY 1

POLYVECTOR Ax, Ay, 0,0,RGB(255,255,255)
POLYVECTOR Bx, By, 0,193,RGB(255,255,255)
POLYVECTOR Cx, Cy, 9,184,RGB(255,255,255)
POLYVECTOR Dx, Dy, 9,7,RGB(255,255,255)

ENDPOLY
// Vektoren unterer Rahmen

// immer neun kleiner als in echt? an den Ecken

STARTPOLY 2

POLYVECTOR Ex, Ey, 9,0,RGB(255,255,255)
POLYVECTOR Fx, Fy, 0,9,RGB(255,255,255)
POLYVECTOR Gx, Gy, 265,9,RGB(255,255,255)
POLYVECTOR Hx, Hy, 256,0 ,RGB(255,255,255)


// Vektoren rechter Rahmen


ENDPOLY

STARTPOLY 3

POLYVECTOR Ix, Iy, 9,193,RGB(255,255,255)
POLYVECTOR Jx, Jy, 9,184,RGB(255,255,255)
POLYVECTOR Kx, Ky, 9,0,RGB(255,255,255)
POLYVECTOR Lx, Ly, 9,0,RGB(255,255,255)

ENDPOLY



// Vektoren oberer Rahmen

ENDPOLY

STARTPOLY 4

POLYVECTOR Mx, My, 9,0,RGB(255,255,255)
POLYVECTOR Nx, Ny, 9,0,RGB(255,255,255)
POLYVECTOR Ox, Oy, 9,9,RGB(255,255,255)
POLYVECTOR Px, Py, 5,9,RGB(255,255,255)

ENDPOLY
ALPHAMODE 0

SHOWSCREEN

WEND

... Funktionen


Danke für eure Tipps.
Tower: 2,5Ghz Quadcore/  8GB DDR2 Ram/ 1066Mhz FSB / ATI HD Radeon 4860.
Mobil:  DELL Studio XPS 16 / 2,53GHz intel Centrino 2 Duo / 4GB DDR 3 Ram/ 1066Mhz FSB/ ATI Radeon 4670 mobility

Never Argue with Idiots. They'll drag you down
to their level and beat you with experience.

Kitty Hello

Mach mal ein Bild wie es aussehen soll.

Veritas

hab doch schon alles angehängt : /
also ich mein es kommt meinen vorstellungen schon relativ nahe, aber ich versteh das mit mit dem Grafiküberziehn nicht so ganz, wäre cool wenn das jemand mal erklären könnte. Was man dabei beachten muss.
ftp://www.ratiogroup.de/Veritas/files/Ohne-Titel-1.png
Tower: 2,5Ghz Quadcore/  8GB DDR2 Ram/ 1066Mhz FSB / ATI HD Radeon 4860.
Mobil:  DELL Studio XPS 16 / 2,53GHz intel Centrino 2 Duo / 4GB DDR 3 Ram/ 1066Mhz FSB/ ATI Radeon 4670 mobility

Never Argue with Idiots. They'll drag you down
to their level and beat you with experience.

Kitty Hello

Oh! Das ist gar nicht so einfach mit runden Ecken.

Das ist das Beste was ich bieten kann:

Code (glbasic) Select



LOADFONT "smalfont.png", 0
FOR i=0 TO 100
RoundRect(RND(500),RND(400),40+RND(200),40+RND(200),24,RGB(RND(255),255,RND(255)))
NEXT
USEASBMP

WHILE TRUE

MOUSESTATE mx, my, b1, b2
RoundRectBorder3D(mx,my, 250,150, 16, 8, RGB(0x80, 0x80, 0xff), RGB(0xff,0xff,0xff), RGB(0x80,0x80,0x80), 16)
PRINT "Draw round rectangles", mx+12, my+60
PRINT "for your menu or whatever", mx+12, my+80



SHOWSCREEN
WEND



FUNCTION RoundRectBorder3D: x,y,w,h,r,border,col, col_border_hi, col_border_lo, shadow_offset
IF shadow_offset
ALPHAMODE -.5
RoundRect(x+shadow_offset,y+shadow_offset,w,h,r,RGB(0,0,0))
ENDIF
ALPHAMODE 0

RoundRect3D(x,y,w,h,r, col_border_hi, col_border_lo)
RoundRect3D(x+border/2,y+border/2,w-border,h-border,r-border/2, col_border_lo, col_border_hi)
RoundRect(x+border,y+border, w-2*border, h-2*border, r-border, col)

ENDFUNCTION

FUNCTION RoundRect3D: x,y,w,h,r,col_hi, col_lo

// polyvector way of doing it:
STARTPOLY -1
// start with a center point!
POLYVECTOR x+w/2, y+h/2,0,0, MixCol(col_hi, col_lo, .5)
RRCircle3D(x+r,  y+r,    90,180, r,col_hi, col_hi)
RRCircle3D(x+r,  y+h-r, 180,270, r,col_hi, col_lo)
RRCircle3D(x+w-r,y+h-r, 270,360, r,col_lo, col_lo)
RRCircle3D(x+w-r,y+r,   360,450, r,col_lo, col_hi)
// finish with first point!
POLYVECTOR x+r, y,0,0, col_hi
ENDPOLY
ENDFUNCTION

FUNCTION MixCol: col_hi, col_lo, perc
LOCAL mix,cr,cg,cb, iperc = 1.0-perc
// mix col_hi and col_lo 50/50
cr = perc*bAND(col_hi, 0xff)+iperc*bAND(col_lo,0xff)
cg = perc*bAND(col_hi/0x100, 0xff)+iperc*bAND(col_lo/0x100,0xff)
cb = perc*bAND(col_hi/0x10000, 0xff)+iperc*bAND(col_lo/0x10000,0xff)
mix = RGB(cr,cg,cb)
RETURN mix
ENDFUNCTION


FUNCTION RRCircle3D: x,y,phi1, phi2, r, col_hi, col_lo
LOCAL p
FOR p=phi1 TO phi2+0.00001 STEP (phi2-phi1)/16
IF p>=(phi1+phi2)/2 THEN c=col_lo
POLYVECTOR x+COS(p)*r, y-SIN(p)*r, 0,0, MixCol(col_hi, col_lo, (1+SIN(p-45))/2)
NEXT
ENDFUNCTION



FUNCTION RoundRectBorder: x,y,w,h,r,border,col, col_border, shadow_offset
IF shadow_offset
ALPHAMODE -.5
RoundRect(x+shadow_offset,y+shadow_offset,w,h,r,RGB(0,0,0))
ENDIF
ALPHAMODE 0
RoundRect(x,y,w,h,r,col_border)
RoundRect(x+border,y+border, w-2*border, h-2*border, r-border, col)
ENDFUNCTION



FUNCTION RoundRect: x,y,w,h,r,col
// polyvector way of doing it:
STARTPOLY -1
RRCircle(x+r,  y+r,    90,180, r,col)
RRCircle(x+r,  y+h-r, 180,270, r,col)
RRCircle(x+w-r,y+h-r, 270,360, r,col)
RRCircle(x+w-r,y+r,   360,450, r,col)
ENDPOLY
ENDFUNCTION

FUNCTION RRCircle: x,y,phi1, phi2, r, col
LOCAL p
FOR p=phi1 TO phi2+0.00001 STEP (phi2-phi1)/16
POLYVECTOR x+COS(p)*r, y-SIN(p)*r, 0,0,col
NEXT
ENDFUNCTION