need to remove guiding bars
This commit is contained in:
Michael Freno
243
examples/NineSliceCornerScalingDemo.lua
Normal file
243
examples/NineSliceCornerScalingDemo.lua
Normal file
@@ -0,0 +1,243 @@
|
||||
local FlexLove = require("FlexLove")
|
||||
local Gui = FlexLove.GUI
|
||||
local Theme = FlexLove.Theme
|
||||
local Color = FlexLove.Color
|
||||
|
||||
---@class CornerScalingDemo
|
||||
---@field window Element
|
||||
---@field currentMode string
|
||||
---@field modeButtons table
|
||||
local CornerScalingDemo = {}
|
||||
CornerScalingDemo.__index = CornerScalingDemo
|
||||
|
||||
function CornerScalingDemo.init()
|
||||
local self = setmetatable({}, CornerScalingDemo)
|
||||
|
||||
self.currentMode = "none"
|
||||
self.modeButtons = {}
|
||||
|
||||
-- Try to load theme
|
||||
local themeLoaded = pcall(function()
|
||||
Theme.load("space")
|
||||
Theme.setActive("space")
|
||||
end)
|
||||
|
||||
-- Create main window
|
||||
self.window = Gui.new({
|
||||
x = 50,
|
||||
y = 50,
|
||||
width = 900,
|
||||
height = 650,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 0.95),
|
||||
border = { top = true, bottom = true, left = true, right = true },
|
||||
borderColor = Color.new(0.6, 0.6, 0.7, 1),
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 20,
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
})
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
parent = self.window,
|
||||
height = 40,
|
||||
text = "NineSlice Corner Scaling Demo",
|
||||
textSize = 24,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0.15, 0.15, 0.25, 1),
|
||||
})
|
||||
|
||||
-- Status
|
||||
Gui.new({
|
||||
parent = self.window,
|
||||
height = 30,
|
||||
text = themeLoaded and "✓ Theme loaded - Scaling demonstration active"
|
||||
or "⚠ Theme not loaded - Please ensure theme assets exist",
|
||||
textSize = 14,
|
||||
textAlign = "center",
|
||||
textColor = themeLoaded and Color.new(0.3, 0.9, 0.3, 1) or Color.new(0.9, 0.6, 0.3, 1),
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 0.8),
|
||||
})
|
||||
|
||||
-- Mode selector section
|
||||
local modeSection = Gui.new({
|
||||
parent = self.window,
|
||||
height = 80,
|
||||
backgroundColor = Color.new(0.12, 0.12, 0.18, 1),
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = modeSection,
|
||||
height = 20,
|
||||
text = "Select Scaling Mode:",
|
||||
textSize = 14,
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Button container
|
||||
local buttonContainer = Gui.new({
|
||||
parent = modeSection,
|
||||
height = 40,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 15,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Helper to create mode button
|
||||
local function createModeButton(mode, label)
|
||||
local button = Gui.new({
|
||||
parent = buttonContainer,
|
||||
width = 180,
|
||||
height = 40,
|
||||
text = label,
|
||||
textAlign = "center",
|
||||
textSize = 14,
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = self.currentMode == mode and Color.new(0.3, 0.6, 0.9, 1) or Color.new(0.25, 0.25, 0.35, 1),
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
self:setMode(mode)
|
||||
end
|
||||
end,
|
||||
})
|
||||
self.modeButtons[mode] = button
|
||||
return button
|
||||
end
|
||||
|
||||
createModeButton("none", "No Scaling (Default)")
|
||||
createModeButton("nearest", "Nearest Neighbor")
|
||||
createModeButton("bilinear", "Bilinear Interpolation")
|
||||
|
||||
-- Comparison section
|
||||
local comparisonSection = Gui.new({
|
||||
parent = self.window,
|
||||
height = 420,
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 1),
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 15,
|
||||
})
|
||||
|
||||
-- Description
|
||||
Gui.new({
|
||||
parent = comparisonSection,
|
||||
height = 60,
|
||||
text = "The panels below demonstrate different scaling modes.\n" ..
|
||||
"• No Scaling: Corners remain at original size (may appear small at high DPI)\n" ..
|
||||
"• Nearest Neighbor: Sharp, pixelated scaling (ideal for pixel art)\n" ..
|
||||
"• Bilinear: Smooth, filtered scaling (ideal for high-quality graphics)",
|
||||
textSize = 12,
|
||||
textColor = Color.new(0.7, 0.8, 0.9, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Demo panels container
|
||||
local panelsContainer = Gui.new({
|
||||
parent = comparisonSection,
|
||||
positioning = "flex",
|
||||
flexDirection = "horizontal",
|
||||
gap = 20,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
-- Helper to create demo panel
|
||||
local function createDemoPanel(size, label)
|
||||
local container = Gui.new({
|
||||
parent = panelsContainer,
|
||||
width = (900 - 80 - 40) / 3, -- Divide available space
|
||||
positioning = "flex",
|
||||
flexDirection = "vertical",
|
||||
gap = 10,
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = container,
|
||||
height = 20,
|
||||
text = label,
|
||||
textSize = 12,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
local panel = Gui.new({
|
||||
parent = container,
|
||||
width = size,
|
||||
height = size,
|
||||
backgroundColor = Color.new(0.2, 0.3, 0.4, 0.5),
|
||||
theme = themeLoaded and "panel" or nil,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = panel,
|
||||
text = "Themed\nPanel",
|
||||
textSize = 14,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
backgroundColor = Color.new(0, 0, 0, 0),
|
||||
})
|
||||
|
||||
return panel
|
||||
end
|
||||
|
||||
createDemoPanel(120, "Small (120x120)")
|
||||
createDemoPanel(160, "Medium (160x160)")
|
||||
createDemoPanel(200, "Large (200x200)")
|
||||
|
||||
-- Info footer
|
||||
Gui.new({
|
||||
parent = self.window,
|
||||
height = 30,
|
||||
text = "Resize the window to see how scaling adapts to different DPI settings",
|
||||
textSize = 11,
|
||||
textAlign = "center",
|
||||
textColor = Color.new(0.5, 0.6, 0.7, 1),
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 1),
|
||||
})
|
||||
|
||||
return self
|
||||
end
|
||||
|
||||
function CornerScalingDemo:setMode(mode)
|
||||
self.currentMode = mode
|
||||
|
||||
-- Update button colors
|
||||
for modeName, button in pairs(self.modeButtons) do
|
||||
button.backgroundColor = modeName == mode and Color.new(0.3, 0.6, 0.9, 1) or Color.new(0.25, 0.25, 0.35, 1)
|
||||
end
|
||||
|
||||
-- Update theme components based on mode
|
||||
local activeTheme = Theme.getActive()
|
||||
if activeTheme and activeTheme.components then
|
||||
for componentName, component in pairs(activeTheme.components) do
|
||||
if mode == "none" then
|
||||
component.scaleCorners = false
|
||||
elseif mode == "nearest" then
|
||||
component.scaleCorners = true
|
||||
component.scalingAlgorithm = "nearest"
|
||||
elseif mode == "bilinear" then
|
||||
component.scaleCorners = true
|
||||
component.scalingAlgorithm = "bilinear"
|
||||
end
|
||||
|
||||
-- Clear cache to force re-rendering
|
||||
if component._scaledRegionCache then
|
||||
component._scaledRegionCache = {}
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
print("Scaling mode changed to: " .. mode)
|
||||
end
|
||||
|
||||
return CornerScalingDemo.init()
|
||||
Reference in New Issue
Block a user