一、基本图形绘制-画线

作者: CaesarsTesla | 来源:发表于2016-07-30 12:00 被阅读197次

Quarz 2D是一个二维绘图引擎,用它能够:
➤绘制图形:线条、三角形、矩形、圆、弧等
➤绘制文字
➤绘制\生成图片(图像)
➤读取\生成PDF
➤截取\裁剪图片
➤自定义UI控件

Quarz 2D实例:

Quarz 2D能做很多强大的事情,比如
➤裁剪图片\圆形裁剪,
➤ 涂鸦画板,
➤ 以及手势解锁,
➤ 报表(折线图,饼状图,柱状图)

自定义view

在你的view上画东西,首先你要明白“图形上下文(Graphics Context)”的概念

  • 图形上下文(Graphics Context):你可以想象理解成画板,它是一个CGContextRef类型的数据,属于CoreGraphics(核心绘图)框架。
  • 图形上下文的作用:
    ➤保存绘图信息、绘图状态
    ➤决定绘制的输出目标(绘制到什么地方)(输出的目标可以是PDF文件,Bitmap或者显示器的窗口上)
  • 相同的一套绘图序列,指定不同的Graphics Context,就可以将相同的图像绘制到不同的目标

☐ Quarz 2D提供了以下几种类型的图形上下文:

➢Bitmap Graphics Context
➢ PDF Graphics Context
➢Window Graphics Context
➢Layer Graphics Context
➢Printer Graphics Context

自定义view

  • 如何利用Quarz 2D绘制东西到view上?
    ➢首先得有图形上下文,因为它能保存绘图信息,并且决定着绘制到什么地方去
    ➢其次,哪个图形上下文必须跟view相关联,才嫩将内容绘制到view上面
  • 自定义View步骤:
    ➢新建一个类,继承自UIView
    ➢实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中:
    • 取得跟当前view相关联的图形上下文
    • 绘制相应的图形内容---描述路径
    • 利用图形上下文绘制的所有内容渲染显示到view上

新建一个MuView类,继承自UIView
#import <UIKit/UIKit.h>
@interface MuView : UIView
@end
在故事版中拖拽一个UIView,让其绑定MuView类型
drawRect
#import "MuView.h"
@implementation MuView
- (void)drawRect:(CGRect)rect{
/*因为只有在drawRect这个方法里面才能获取到跟view的layer相关联的图形上下文
*rect是当前控件的bounds
*当这个view要显示的时候,才会调用drawRect绘制图形
*/
[self ..];

@end

.

  -(void)drawLine{
    //    1获取图形上下文
    //     目前我们所用的上下文都是以UIGraphics开头的
    //    CGContextRef Ref饮用  CG:目前使用到的类型和函数 一般都是CG开头 CoreGraphics
    CGContextRef ctf = UIGraphicsGetCurrentContext();

    //    2描述路径
    //    创建路径
    CGMutablePathRef path = CGPathCreateMutable();
    //设置起点
    //path:给哪个路径设置起点 CGAffineTransform:形变 x、y代表起点
    CGPathMoveToPoint( path, NULL, 50, 50);

    //添加一根线到某个点
    CGPathAddLineToPoint(path, NULL, 200, 200);

    //    3把路径添加到上下文
    CGContextAddPath(ctf, path);
    //    4渲染上下文
    CGContextStrokePath(ctf);


}

.

- (void)drawLine1{
    //    获取上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
    //    描述路径
    //    设置起点 在这底层会帮我们创建一个path
    CGContextMoveToPoint(ref, 150, 150);
    CGContextAddLineToPoint(ref, 50, 50);

    //    渲染上下文
    CGContextStrokePath(ref);
}

.

-(void)drawLine2{
 //UIKIT已经帮我们封装了一些绘图的功能
UIBezierPath *path = [UIBezierPath bezierPath];
//    设置起点
[path moveToPoint:CGPointMake(50, 50)];
//    添加一根线到某个点
[path addLineToPoint:CGPointMake(100, 100)];
//    绘制路径
[path stroke];
}

相关文章

  • 一、基本图形绘制-画线

    Quarz 2D是一个二维绘图引擎,用它能够:➤绘制图形:线条、三角形、矩形、圆、弧等➤绘制文字➤绘制\生成图片(...

  • Java Graphics类的绘图方法

    Graphics类提供基本绘图方法,Graphics类提供基本的几何图形绘制方法,主要有:画线段、画矩形、画圆、画...

  • HTML5-Canvas的基本功能

    利用 Canvas 的 API,展示一些基本图形的绘制及操作方法,包括画线、画图、文字操作及图片操作等。(内含代码...

  • ios绘图基础

    ios常见的图形绘制 画线 画圆、圆弧 画矩形,画椭圆,多边形 画图片 画文字 1:ios绘图基础 几个基本的概念...

  • 03-UI进阶(6)

    0617-Quartz2D 1. Quartz2D能干什么(03-基本图形绘制(画线)) 2. 绘图步骤 1.获取...

  • Android自定义View七(复习基本图形的绘制)

    基本图形的绘制 简单的绘制一个圆饼图 根据Path图形的绘制 雷达图的绘制 效果

  • svg

    svg双闭合标签,默认宽高300*150 必须在svg标签内绘制图形 画线 line 绘制折线 polyline...

  • CAD_学习_02

    图形的绘制与编辑 掌握基本图元的绘制和图形的编辑修改 能够独立绘制相对复杂的图形 合理运用绘图命令和编辑命令绘制...

  • Quartz2D 绘图

    画线 连接处样式 顶角样式 画扇型 重绘 下载的进度条制作 画饼图 绘制文字 绘制图片 绘制雪花 图形上下文栈 平...

  • 安卓自定义View进阶-Canvas之画布操作

    上一篇Canvas之绘制基本图形中我们了解了如何使用Canvas绘制基本图形,本次了解一些基本的画布操作。 本来想...

网友评论

    本文标题:一、基本图形绘制-画线

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