快速进度指示器图像蒙版 [英] Swift Progress Indicator Image Mask

问题描述

首先，这个项目是使用Swift构建的。

To start, this project has been built using Swift.

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

I want to create a custom progress indicator that "fills up" as the script runs. The script will call a JSON feed that is pulled from the remote server.

为了更好地显示我所追求的内容，我做了这个：

To better visualize what I'm after, I made this:

我的猜测是有两个PNG图像;一个白色和一个红色，然后根据进度金额做一些掩饰。

My guess would be to have two PNG images; one white and one red, and then simply do some masking based on the progress amount.

对此有何看法？

推荐答案

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

Masking is probably overkill for this. Just redraw the image each time. When you do, you draw the red rectangle to fill the lower half of the drawing, to whatever height you want it; then you draw the droplet image (a PNG), which has transparency in the middle so the red rectangle shows through. So, one PNG is enough because the red rectangle can be drawn "live" each time you redraw.

我非常喜欢你的绘图，我想把它变为现实，所以这是我的工作代码（我的PNG称为 tear.png 和 iv 是我界面中的UIImageView; 百分比应为0到1之间的CGFloat）：

I liked your drawing so much that I wanted to bring it to life, so here's my working code (my PNG is called tear.png and iv is a UIImageView in my interface; percent should be a CGFloat between 0 and 1):

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，其动作方法将其值转换为CGFloat并调用该方法，以便前后移动滑块可在泪珠中上下移动红色填充物。我可以玩这几个小时！

I also hooked up a UISlider whose action method converts its value to a CGFloat and calls that method, so that moving the slider back and forth moves the red fill up and down in the teardrop. I could play with this for hours!

这篇关于快速进度指示器图像蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！