快速进度指示器图像蒙版

Question

首先,这个项目是使用Swift构建的.

我想创建一个自定义进度指示器,在脚本运行时"填满".该脚本将调用从远程服务器提取的JSON提要.

为了更好地想象我追求的是什么,我做了这个:

我的猜测是有两个PNG图像; 一个白色和一个红色,然后根据进度量简单地做一些掩蔽.

有什么想法吗？

Answer 1

掩蔽对此可能有点过头了.只需每次重绘图像.当你这样做时,你绘制红色矩形以填充图形的下半部分,达到你想要的任何高度; 然后你绘制液滴图像(PNG),中间有透明度,红色矩形透过.因此,一个PNG就足够了,因为每次重绘时都可以"实时"绘制红色矩形.

我非常喜欢你的绘图,我想把它带到生活中,所以这是我的工作代码(我的PNG叫做tear.png,iv在我的界面中是一个UIImageView; percent应该是0到1之间的CGFloat):

func redraw(percent:CGFloat) {
    let tear : UIImage! = UIImage(named:"tear")!
    if tear == nil {return}
    let sz = tear.size
    let top = sz.height*(1-percent)
    UIGraphicsBeginImageContextWithOptions(sz, false, 0)
    let con = UIGraphicsGetCurrentContext()
    UIColor.redColor().setFill()
    CGContextFillRect(con, CGRectMake(0,top,sz.width,sz.height))
    tear.drawAtPoint(CGPointMake(0,0))
    self.iv.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

我还连接了一个UISlider,其动作方法将其转换value为CGFloat并调用该方法,以便前后移动滑块在泪珠中上下移动红色填充.我可以玩这几个小时!