corner radius, control highlight
This commit is contained in:
Michael Freno
312
examples/CornerRadiusDemo.lua
Normal file
312
examples/CornerRadiusDemo.lua
Normal file
@@ -0,0 +1,312 @@
|
||||
-- Demo showing corner radius functionality
|
||||
|
||||
local FlexLove = require("FlexLove")
|
||||
local Gui = FlexLove.GUI
|
||||
local Color = FlexLove.Color
|
||||
|
||||
function love.load()
|
||||
Gui.init({
|
||||
baseScale = { width = 1920, height = 1080 }
|
||||
})
|
||||
|
||||
-- Create main container
|
||||
local container = Gui.new({
|
||||
x = 50,
|
||||
y = 50,
|
||||
width = 1100,
|
||||
height = 600,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 1),
|
||||
cornerRadius = 20,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(0.5, 0.5, 0.6, 1),
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 20,
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
})
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
parent = container,
|
||||
height = 50,
|
||||
text = "Corner Radius Demo",
|
||||
textSize = 28,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
cornerRadius = 10,
|
||||
})
|
||||
|
||||
-- Row 1: Uniform corner radius
|
||||
local row1 = Gui.new({
|
||||
parent = container,
|
||||
height = 150,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 20,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 0",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.8, 0.2, 0.2, 1),
|
||||
cornerRadius = 0,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 10",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.8, 0.2, 1),
|
||||
cornerRadius = 10,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 25",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.8, 1),
|
||||
cornerRadius = 25,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row1,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "radius: 50\n(pill)",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.8, 0.2, 0.8, 1),
|
||||
cornerRadius = 50,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
-- Row 2: Individual corner radii
|
||||
local row2 = Gui.new({
|
||||
parent = container,
|
||||
height = 150,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 20,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Top-Left\nOnly",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.5, 0.2, 1),
|
||||
cornerRadius = { topLeft = 30, topRight = 0, bottomLeft = 0, bottomRight = 0 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Top\nCorners",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.9, 0.5, 1),
|
||||
cornerRadius = { topLeft = 25, topRight = 25, bottomLeft = 0, bottomRight = 0 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Diagonal\nCorners",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.5, 0.2, 0.9, 1),
|
||||
cornerRadius = { topLeft = 30, topRight = 0, bottomLeft = 0, bottomRight = 30 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row2,
|
||||
width = 150,
|
||||
height = 100,
|
||||
text = "Mixed\nRadii",
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.9, 0.2, 1),
|
||||
cornerRadius = { topLeft = 5, topRight = 15, bottomLeft = 25, bottomRight = 35 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.5),
|
||||
})
|
||||
|
||||
-- Row 3: Interactive buttons with corner radius
|
||||
local row3 = Gui.new({
|
||||
parent = container,
|
||||
height = 180,
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.17, 0.5),
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = row3,
|
||||
height = 25,
|
||||
text = "Interactive Buttons with Corner Radius:",
|
||||
textSize = 16,
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
local buttonRow = Gui.new({
|
||||
parent = row3,
|
||||
height = 80,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = buttonRow,
|
||||
width = 180,
|
||||
height = 60,
|
||||
text = "Click Me!",
|
||||
textAlign = "center",
|
||||
textSize = 18,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.2, 0.6, 0.9, 1),
|
||||
cornerRadius = 15,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.3),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Button 1 clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = buttonRow,
|
||||
width = 180,
|
||||
height = 60,
|
||||
text = "Pill Button",
|
||||
textAlign = "center",
|
||||
textSize = 18,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.9, 0.3, 0.4, 1),
|
||||
cornerRadius = 30,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.3),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Button 2 clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = buttonRow,
|
||||
width = 180,
|
||||
height = 60,
|
||||
text = "Sharp Top",
|
||||
textAlign = "center",
|
||||
textSize = 18,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.3, 0.8, 0.4, 1),
|
||||
cornerRadius = { topLeft = 0, topRight = 0, bottomLeft = 20, bottomRight = 20 },
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(1, 1, 1, 0.3),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Button 3 clicked!")
|
||||
end
|
||||
end
|
||||
})
|
||||
|
||||
-- Clipping demo
|
||||
local clippingDemo = Gui.new({
|
||||
x = 50,
|
||||
y = 670,
|
||||
width = 500,
|
||||
height = 150,
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
cornerRadius = 20,
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(0.8, 0.8, 0.9, 1),
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = clippingDemo,
|
||||
height = 25,
|
||||
text = "Clipping Demo: Children clipped to parent's rounded corners",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Child that extends beyond parent (will be clipped)
|
||||
Gui.new({
|
||||
parent = clippingDemo,
|
||||
x = -10,
|
||||
y = 40,
|
||||
width = 520,
|
||||
height = 80,
|
||||
backgroundColor = Color.new(0.9, 0.5, 0.2, 0.8),
|
||||
text = "This element extends beyond parent but is clipped!",
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
positioning = "absolute",
|
||||
})
|
||||
end
|
||||
|
||||
function love.update(dt)
|
||||
Gui.update(dt)
|
||||
end
|
||||
|
||||
function love.draw()
|
||||
love.graphics.clear(0.05, 0.05, 0.1, 1)
|
||||
Gui.draw()
|
||||
|
||||
-- Draw instructions
|
||||
love.graphics.setColor(1, 1, 1, 1)
|
||||
love.graphics.print("Corner Radius System", 10, 10)
|
||||
love.graphics.print("Supports uniform radius (number) or individual corners (table)", 10, 30)
|
||||
end
|
||||
|
||||
function love.resize(w, h)
|
||||
Gui.resize()
|
||||
end
|
||||
Reference in New Issue
Block a user