代码(附有使用方法):
--[[
UISlider
v1.2 dev By SoulWINTER
---------------------
更新日志
v1.2
- 现已可调节圆的半径
v1.1.3
- 增加因设置错误而报错的功能
- 调整线条宽度与颜色
v1.1.2
- 细节(阴影,线条)微调
v1.1.1
- 修复无法调节负数的 bug
v1.1
- 阴影仿真效果(感谢贴吧
@破晓_年华 提供技术支持)
- 其他微调
---------------------
使用方法:
在setup()中写
xxx(取个名字)=UISlider(长度(单位:像素),最小值,最大值,位置x,位置y,据开始多少像素,【可选】圆的半径)
例如:test = UISlider(500,0,1,WIDTH/2,HEIGHT/2,50)
在draw()中写
xxx(你刚才取的名字):draw()
例如:test:draw()
在touched中写
xxx:touched(touch)
例如:test:touched(touch)
xxx.num 为反应数值
--]]
UISlider = class()
function UISlider:init(length,min,max,x,y,startPos,radius)
self.length = length
self.min = min
self.max = max
self.pos = vec2(x,y)
self.buttonPos = startPos
self.isTouching = false
self.num = 0
self.radius = radius or 15
self.img = getBlurCircle(21/15*self.radius)
if self.buttonPos > length then error("[UISlider.class]Error:'startPos' is bigger than 'length'.") end
end
function UISlider:draw()
stroke(20, 78, 213, 255)
strokeWidth(1.8/15*self.radius)
line(self.pos.x-self.length/2,self.pos.y,self.pos.x-self.length/2+self.buttonPos,self.pos.y)
stroke(220, 208, 208, 255)
line(self.pos.x-self.length/2+self.buttonPos,self.pos.y,self.pos.x+self.length/2,self.pos.y)
fill(223, 224, 223, 36)
stroke(212, 209, 213, 122)
-- ellipse
ellipse(self.pos.x-self.length/2+self.buttonPos,self.pos.y-3/15*self.radius,29/30*self.radius*2,29/30*self.radius*2)
sprite(self.img,self.pos.x-self.length/2+self.buttonPos,self.pos.y-3/15*self.radius)
strokeWidth(0.1/15*self.radius)
stroke(199, 209, 206, 255)
fill(255, 255, 255, 255)
ellipse(self.pos.x-self.length/2+self.buttonPos,self.pos.y,30/15*self.radius,30/15*self.radius)
self.num = self.buttonPos*((self.max-self.min)/self.length)
if self.min < 0 then self.num = self.num + self.min end
end
function UISlider:touched(touch)
if touch.state == BEGAN and touch.x >= (self.pos.x-self.length/2+self.buttonPos)-self.radius and touch.x <= self.pos.x-self.length/2+self.buttonPos+self.radius and touch.y >= self.pos.y-self.radius and touch.y <= self.pos.y+self.radius then
self.isTouching = true
end
if touch.state ~= ENDED and self.isTouching == true then
if touch.x-(self.pos.x-self.length/2)>=0 and touch.x-(self.pos.x-self.length/2)<=self.length then
self.buttonPos = touch.x-(self.pos.x-self.length/2)
end
if touch.x-(self.pos.x-self.length/2)<=0 then
self.buttonPos = 0
end
if touch.x-(self.pos.x-self.length/2)>=self.length then
self.buttonPos = self.length
end
end
if touch.state == ENDED then
self.isTouching = false
end
end
function getBlurCircle(radius)
local img=image(radius*2,radius*2)
setContext(img)
for i=0,100 do
fill(0, 0, 0, 0.7)
ellipse(radius,radius,radius*2/100*i)
end
setContext()
return img
end