1.绘制折线图

上次在群里看到一个折线图划的很漂亮,自己想实现一个这样的

,但是一直没什么头绪,不知道怎么做,就开始在网上查找划线,绘

制渐变色这一块的内容,用最笨的方式,自己尝试的写了一些,也没

有完全实现这些内容,权当是记录下学习的这块内容。

2.实现的效果

3.实现的代码

  //添加坐标的坐标点UIBezierPath * pathtemp=[[UIBezierPath alloc] init];[pathtemp moveToPoint:CGPointMake(10, 100)];[pathtemp addLineToPoint:CGPointMake(50, 90)];[pathtemp addLineToPoint:CGPointMake(100, 50)];[pathtemp addLineToPoint:CGPointMake(150, 80)];[pathtemp addLineToPoint:CGPointMake(200, 70)];[pathtemp addLineToPoint:CGPointMake(250, 60)];[pathtemp addLineToPoint:CGPointMake(300, 50)];[pathtemp addLineToPoint:CGPointMake(350, 100)];//把折线绘制到界面CAShapeLayer *arctemp = [CAShapeLayer layer];arctemp.path =pathtemp.CGPath;  //path->CGPath;arctemp.strokeColor = [UIColor purpleColor].CGColor;arctemp.lineWidth = 8;[self.view.layer addSublayer:arctemp];//绘制线条的动画CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];drawAnimation.duration            = 5.0;drawAnimation.repeatCount         = 1.0;drawAnimation.removedOnCompletion = NO;drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];drawAnimation.toValue   = [NSNumber numberWithFloat:10.0f];drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];[arctemp addAnimation:drawAnimation forKey:@"drawCircleAnimation"];//===================================================================================================================//绘制渐变色层CAGradientLayer *gradientLayer = [CAGradientLayer layer];gradientLayer.frame =CGRectMake(0, 0, 500, 400) ;// self.view.frame;gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:249.0/255.0 green:127.0/255.0 blue:127.0/255.0 alpha:1].CGColor ,(__bridge id)[UIColor colorWithRed:250.0/255.0 green:150.0/255.0 blue:150.0/255.0 alpha:1].CGColor,(__bridge id)[UIColor yellowColor].CGColor];gradientLayer.locations=@[@0.0,@0.2,@1.0];gradientLayer.startPoint = CGPointMake(0.5,0.5);gradientLayer.endPoint = CGPointMake(0.5,1);[self.view.layer addSublayer:gradientLayer];//加上渐变层//============第一种方式添加路径->这个是绘制渐变需要的UIBezierPath * path=[[UIBezierPath alloc] init];[path moveToPoint:CGPointMake(10, 100)];[path addLineToPoint:CGPointMake(10, 300)];[path addLineToPoint:CGPointMake(350, 300)];[path addLineToPoint:CGPointMake(350, 100)];[path addLineToPoint:CGPointMake(300, 50)];[path addLineToPoint:CGPointMake(250, 60)];[path addLineToPoint:CGPointMake(200, 70)];[path addLineToPoint:CGPointMake(150, 80)];[path addLineToPoint:CGPointMake(100, 50)];[path addLineToPoint:CGPointMake(50, 90)];[path closePath];//============第二种方式添加路径
//  UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10,10,100,100)];//============第三种方式添加path路径
//    CGMutablePathRef path = CGPathCreateMutable();
//
//    CGPathAddRect(path, nil, CGRectInset(self.view.bounds, 20, 120));
    CAShapeLayer *arc = [CAShapeLayer layer];arc.path =path.CGPath;arc.fillColor = [UIColor yellowColor].CGColor;arc.strokeColor = [UIColor yellowColor].CGColor;arc.lineWidth = 1;gradientLayer.mask=arc;

转载于:https://www.cnblogs.com/try-wyh/p/4834608.html

IOS绘制渐变背景色折线图的一种尝试相关推荐

  1. python3+matplotlib绘制双轴折线图(两种方法)

    Background 这里提供两种方法,一种是基于pandas,另一种是基于twinx. 1.先看最终效果图 pandas twinx 2.源码 import pandas as pd import ...

  2. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  3. oc和swift版本的实时绘制曲线、折线图,股票折线图

    oc和swift版本的实时绘制曲线.折线图,股票折线图,可设置曲线背景颜色,支持渐变颜色背景 demo:https://download.csdn.net/download/Wulitc/875132 ...

  4. python使用matplotlib可视化折线图、在可视化图像中同时绘制多条折线图

    python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图 目录 python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图

  5. matlab绘制多条折线图

    %绘制多条折线图 clear clc n = 12; x = 1:n; C = 10 * rand(n,1); A = 10 * rand(n,1); J = 10 * rand(n,1); figu ...

  6. 绘制多个折线图_精品图表 | Excel绘制面板折线图

    上一节的内容中给大家讲解了多系列折线图的绘制,还没有学会的小伙伴可以点击下面的链接学习,或者打开上面的[专辑]查看更多的文章. 精品图表 | Excel绘制多系列折线图 本期内容将给大家带来的折线面板 ...

  7. python中画折线图不同颜色的两段_matplotlib绘制精美的折线图——另附颜色、形状查找表...

    0 配置及环境 系统: win7 x64 python: 3.64 x64 包: matplotlib.numpy 本文主要是讲述如何利用python的matplotlib包来绘制精美的折线图,包括绘 ...

  8. Matlab绘制多个折线图的方法

    给出一个Matlab绘制折线图的例子:Matlab绘制多个折线图和子图的详细方法,并且字体设置为Times New Roman,可用于普通课程作业的撰写. %% 维数选择 % 人脸1.f Dim = ...

  9. python matplotlib绘制多条折线图

    python matplotlib绘制多条折线图 代码 import matplotlib.pyplot as pltx = [6, 24, 48, 72] y1 = [87, 174, 225, 2 ...

最新文章

  1. metrics-server最新版本有坑,慎用
  2. python计算在月球的体重程序_# Python程序语言设计基础(第二版)程序练习题
  3. 汇编指令的学习1——ARM汇编的特点
  4. java实现itchat_GitHub - Xiazki/itchat4j: wechatbot 的java实现,简单搭建了基本框架和实现了扫码登陆,具体网页微信api请参考...
  5. PHP使用ajax的post方式下载excel文件简单示例
  6. java包管理之gradle安装
  7. What's new document web part for SharePoint v1.1 [Free]
  8. linux 子shell
  9. 弹出打开蓝牙_iOS13隐藏特性 双蓝牙音频共享功能详解
  10. Thinkpad X1 Tablet gen2键盘改typec键线分离
  11. 【2019年5月6日】指数估值排名
  12. css 设置手机浏览器背景图片填充整个页面的小问题级解决方法
  13. 《佛密诸事》第二章 宇宙诸现象
  14. 英语3500词(15/20)crime主题(2022.1.27)
  15. 搭讪达人这样和女生发短信
  16. CC2540/CC2541/CC254x之OSAL操作系统抽象层
  17. python 文件操作大总结 对文件的增删改查,备份, 批量修改,创建和删除 文件的备份
  18. 3 款强大的开源密码管理器
  19. 成熟的最高境界,是心境如水
  20. vue低级错误(浏览器页面,后台页面全部正常)

热门文章

  1. javascript Blob
  2. linux 命令行图形界面切换
  3. windows挂载linux共享,永久挂载 Windows 共享
  4. it项目经理成长手记 mobi_步入IT行业的心路历程
  5. Docker学习总结(39)——简析容器、无服务器和虚拟机的安全性差异
  6. 消息中间件学习总结(5)——RocketMQ之Apache RocketMQ背后的设计思路与最佳实践
  7. angular获取图片高宽_Angular 读书笔记
  8. 计算机系统的主要功能要求,计算机系统的主要功能是什么
  9. 如何用python和flask以太坊智能合约开发
  10. Vue系列之搭建环境