美文网首页
根据拖动的进度画圆

根据拖动的进度画圆

作者: NateLam | 来源:发表于2017-05-23 11:58 被阅读10次

效果大致是这样


屏幕快照 2017-05-23 上午11.52.57.png

大致思路: 画圆还是得用到drawRect, 因为圆的路径需要实时根据当前拖动的进度而绘制, 所以需要在监听进度的方法里面绘制, 但是我们无法手动调用drawRect方法, 需要通过setNeedsDisplay来让系统帮我们调用drawRect方法,

首先还是先自定义一个view, 即模拟器那个灰色的view, 然后在其.h文件中声明一个CGFloat的变量progressValue, 接收外部传进来的当前进度条的百分数(0到1这个数字), 根据这个数字得出需要画出的圆的角度

- (void)drawRect:(CGRect)rect{

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGPoint center = CGPointMake(rect.size.width / 2, rect.size.height / 2);
CGFloat radius = rect.size.width / 2 - 10;
CGFloat startA = -M_PI_2;//从12点方向开始
CGFloat angle = self.progressValue * M_PI * 2;
CGFloat endA = startA + angle;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
//3.把路径添加到上下文当中
CGContextAddPath(ctx, path.CGPath);
//4.把上下文的内容渲染到view的layer上
CGContextStrokePath(ctx);
}

相关文章

  • 根据拖动的进度画圆

    效果大致是这样 大致思路: 画圆还是得用到drawRect, 因为圆的路径需要实时根据当前拖动的进度而绘制, ...

  • Android 仿抖音音频裁剪控件

    效果图 功能要求:绘制音频效果,音乐播放后进度滚动,控件可拖动,拖动后获取新的起始时间(后期会加入根据音乐各个时段...

  • QQ音乐

    拖动进度滑块的时候,出现了歌词,帮助定位。 改变进度的反馈,有许多有趣细心的设计, 比如视频,拖动进度的时候,画面...

  • Android模拟糟糕音量控制设计大赛之ProgressView

    效果图 可以通过旋转view或者直接拖动来控制进度。 根据旋转角度,音量的移动速度会改变 根据旋转角度,归位时候的...

  • Axure8.0之进度条

    进度条的拖动主要用到了动态面板的拖动功能,在拖动时改变显示的进度,设置进入背景色的尺寸。 实现步骤 先添加一个矩形...

  • UISlider 拖动条

    拖动条和进度条非常相似 只是进度条采用颜色填充来标明进度完成的程度,拖动条则通过滑块的位置来标识数值 UIImag...

  • 十一、拖动条(SeekBar)的风格自定义

    拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程度,而推动条则通过滑块的位置来标识,而且拖动条允许...

  • 【iOS】UIBezierPath 绘图

    一.根据点、半径画圆

  • 一个Android长文本光标选中神器

    Android长文本输入栏神器:通过拖动进度条移动光标或选中文本。 Preview 短按拖动:移动光标长按拖动:选...

  • 视频画中画效果,拖动进度条可以seek到相应视频帧显示

    在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧...

网友评论

      本文标题:根据拖动的进度画圆

      本文链接:https://www.haomeiwen.com/subject/rjiwxxtx.html