swift之绘图集合

最新推荐文章于 2019-10-28 13:25:06 发布
原创 最新推荐文章于 2019-10-28 13:25:06 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

 

1，什么是Core Graphics

（1）Core Graphics Framework 是一套基于 C 的 API 框架，使用了 Quartz 作为绘图引擎，可用于一切绘图操作。它提供了低级别、轻量级、高保真度的 2D 渲染。
（2）Quartz 2D 是 Core Graphics Framework 的一部分，是一个强大的二维图像绘制引擎。
（3）我们使用的 UIKit 库中所有 UI 组件其实都是由 CoreGraphics 绘制实现的。所以使用 Core Graphics 可以实现比 UIKit 更底层的功能。
（4）当我们引入 UIKit 框架时系统会自动引入 Core Graphics 框架，同时在 UIKit 内部还对一些常用的绘图 API 进行了封装，方便我们使用。 (比如：CGMutablePath 是 Core Graphics 的底层API，而 UIBezierPath 就是对 CGMutablePath 的封装。)

 

2，绘图的一般步骤

（1）获取绘图上下文

（2）创建并设置路径

（3）将路径添加到上下文

（4）设置上下文状态（如笔触颜色、宽度、填充色等等）

（5）绘制路径

 

===============context添加图片路径======================================

===============基础的绘图设置========

 

override func draw(_ rect: CGRect) {

       super.draw(rect)

        let ctx=UIGraphicsGetCurrentContext()

         ctx?.move(to: CGPoint.init(x: 100, y: 100))//绘制起点

        ctx?.addLine(to: CGPoint.init(x: 300, y: 100))//绘制第二个点

        ctx?.addLine(to: CGPoint.init(x: 300, y: 300))//第三个点

        ctx?.setLineCap(CGLineCap.butt)//设置线头的样式

        ctx?.setLineJoin(CGLineJoin.bevel)//设置连接处的样式

        ctx?.setLineWidth(10)//设置线宽

 

ctx?.setLineDash(phase: 5, lengths: [10,3])//设置虚线，phase是设置几段，lengths是设置每一个线段的长度和间隔

 

 ctx?.addRect(CGRect.init(x: 0, y:0, width: 200, height: 200).insetBy(dx: 20, dy: 20))//相对于CGRect.init(x: 0, y:0, width: 200, height: 200)向内偏移x和y方向20，20

 ctx?.setShadow(offset: CGSize.init(width: 3, height: 3), blur: 0.5, color: UIColor.blue.cgColor)//设置阴影

 

        ctx?.setStrokeColor(UIColor.red.cgColor)//设置笔触的颜色

 

        ctx?.closePath()//闭合路径

       ctx?.strokePath()//绘制路径

        

    }

 

==========填充fill========

 

 

let ctx=UIGraphicsGetCurrentContext()

         ctx?.move(to: CGPoint.init(x: 100, y: 100))//绘制起点

        ctx?.addLine(to: CGPoint.init(x: 300, y: 100))//绘制第二个点

        ctx?.addLine(to: CGPoint.init(x: 300, y: 300))//第三个点

        ctx?.setLineCap(CGLineCap.butt)//设置线头的样式

        ctx?.setLineJoin(CGLineJoin.bevel)//设置连接处的样式

        ctx?.setLineWidth(10)//设置线宽

 ctx?.closePath()//闭合路径

 ctx?.setFillColor(UIColor.red.cgColor)//设置填充颜色

        ctx?.fillPath()//填充路径

 

================绘制长方形、正方形、圆形、椭圆形==========

 

 

 let ctx=UIGraphicsGetCurrentContext()

 ctx?.addRect(CGRect.init(x: 0, y:0, width: 200, height: 200))//绘制长方形，正方形，x，y是左上角的点

        ctx?.addEllipse(in: CGRect.init(x: 100, y: 100, width: 200, height: 200))//正圆，x，y是圆的外切正方形的左上角的点

        ctx?.addEllipse(in: CGRect.init(x: 100, y: 100, width: 200, height: 100))//椭圆，x，y是椭圆外切长方形的左上角的点

  ctx?.strokePath()//绘制路径

 

==================绘图矩阵变形操作==========

 

注意：坐标变换操作必须要在添加图形之前，如果设置在添加图形之后的话会无效。

 ************平移=====

该方法相当于把原来位于 (0, 0) 位置的坐标原点平移到 (tx, ty) 点。在平移后的坐标系统上绘制图形时，所有坐标点的 X 坐标都相当于增加了 tx，所有点的 Y 坐标都相当于增加了 ty。

 let ctx=UIGraphicsGetCurrentContext()

 

  ctx?.translateBy(x: 50, y: 0)

        ctx?.addRect(CGRect.init(x: 0, y:0, width: 200, height: 200))//绘制长方形，正方形，x，y是左上角的点

 

  ctx?.strokePath()//绘制路径

***********************旋转****************

该方法控制坐标系统旋转 angle 弧度。在缩放后的坐标系统上绘制图形时，所有坐标点的 X、Y 坐标都相当于旋转了 angle弧度之后的坐标。

 

 let ctx=UIGraphicsGetCurrentContext()

 ctx?.rotate(by: 0.25*3.14)//旋转

        ctx?.addRect(CGRect.init(x: 0, y:0, width: 200, height: 200))//绘制长方形，正方形，x，y是左上角的点

ctx?.strokePath()//绘制路径

 

 

 

**************缩放**************

该方法控制坐标系统在水平方向和垂直方向上进行缩放。在缩放后的坐标系统上绘制图形时，所有点的 X 坐标都相当于乘以 sx 因子，所有点的 Y 坐标都相当于乘以 sy 因子。

 let ctx=UIGraphicsGetCurrentContext()

 ctx?.scaleBy(x: 0.5, y: 0.5)//缩放到原来的0.5倍

        ctx?.addRect(CGRect.init(x: 0, y:0, width: 200, height: 200))//绘制长方形，正方形，x，y是左上角的点

ctx?.strokePath()//绘制路径

 

***************贝塞尔曲线************

 

================CGMutablePath绘制图片路径-======================

***********二次贝塞尔曲线*********

 

 

        //获取绘图上下文

        let context = UIGraphicsGetCurrentContext()

        //创建一个矩形，它的所有边都内缩3点

        let drawingRect = self.bounds.insetBy(dx: 3, dy: 3)

        

        //创建并设置路径

        let path = CGMutablePath()

        //移动起点

        path.move(to: CGPoint(x: drawingRect.minX, y: drawingRect.maxY))

        //二次贝塞尔曲线终点

        let toPoint = CGPoint(x: drawingRect.maxX, y: drawingRect.maxY)

        //二次贝塞尔曲线控制点

        let controlPoint = CGPoint(x: drawingRect.midX, y: drawingRect.minY)

        //绘制二次贝塞尔曲线

        path.addQuadCurve(to: toPoint, control: controlPoint)

        

        //添加路径到图形上下文

        context?.addPath(path)

        

        //设置笔触颜色

        context?.setStrokeColor(UIColor.orange.cgColor)

        //设置笔触宽度

        context?.setLineWidth(6)

        

        //绘制路径

        context?.strokePath()

 

 

************三次贝塞尔曲线************

 

 //获取绘图上下文

        let context = UIGraphicsGetCurrentContext()

        //创建一个矩形，它的所有边都内缩3点

        let drawingRect = self.bounds.insetBy(dx: 3, dy: 3)

        

        //创建并设置路径

        let path = CGMutablePath()

        //移动起点

        path.move(to: CGPoint(x: drawingRect.minX, y: drawingRect.maxY))

        //三次贝塞尔曲线终点

        let toPoint = CGPoint(x: drawingRect.maxX, y: drawingRect.minY)

        //三次贝塞尔曲线第1个控制点

        let controlPoint1 = CGPoint(x: (drawingRect.minX+drawingRect.midX)/2, y: drawingRect.minY)

        //三次贝塞尔曲线第2个控制点

        let controlPoint2 = CGPoint(x: (drawingRect.midX+drawingRect.maxX)/2, y: drawingRect.maxY)

        //绘制三次贝塞尔曲线

        path.addCurve(to: toPoint, control1: controlPoint1, control2: controlPoint2)

        //添加路径到图形上下文

        context?.addPath(path)

        

        //设置笔触颜色

        context?.setStrokeColor(UIColor.orange.cgColor)

        //设置笔触宽度

        context?.setLineWidth(6)

        

        //绘制路径

        context?.strokePath()

 

================UIBezierPath设置图形路径===============

******stroke*******

 

 let bz:UIBezierPath=UIBezierPath.init()//创建路径

        bz.move(to: CGPoint.init(x: 10, y: 10))// 设置起点

        bz.addLine(to: CGPoint.init(x: 100, y: 100))//添加另外一个点

          bz.addLine(to: CGPoint.init(x: 150, y: 300))//添加另外一个点

        bz.lineWidth=5

        UIColor.red.setStroke()//设置路径颜色

 bz.lineCapStyle=CGLineCap.butt

        bz.lineJoinStyle=CGLineJoin.round

        bz.close()//闭合路径

        bz.stroke()//绘制一条线的时候用stroke，如果是图形时stroke就是空心的，fill就是填充

 

 bz.removeAllPoints()//删除画布上所有的点,如果有stroke或fill操作，不起作用

 

**********fill*******

 

 

let bz:UIBezierPath=UIBezierPath.init()//相当于创建画布

        bz.move(to: CGPoint.init(x: 10, y: 10))// 设置起点

        bz.addLine(to: CGPoint.init(x: 100, y: 100))//添加另外一个点

          bz.addLine(to: CGPoint.init(x: 150, y: 300))//添加另外一个点

        bz.lineWidth=5

       

 UIColor.red.setFill()//设置填充颜色

 bz.lineCapStyle=CGLineCap.butt

        bz.lineJoinStyle=CGLineJoin.round

        bz.close()//闭合路径

       

 

 bz.fill()//填充

 

****************绘制矩形**********

 

方法一：画四条直线

方法二：

let bz:UIBezierPath=UIBezierPath.init(rect: CGRect.init(x: 10, y: 10, width: 100, height: 100))//普通矩形

 

方法三：     let bz:UIBezierPath=UIBezierPath.init(roundedRect: CGRect.init(x: 10, y: 10, width: 100, height: 100), cornerRadius: 5)//圆角矩形

 

方法四：  let bz:UIBezierPath=UIBezierPath.init(roundedRect: CGRect.init(x: 10, y: 10, width: 100, height: 100), byRoundingCorners: UIRectCorner.topLeft, cornerRadii: CGSize(width: 10, height: 10))//单角圆弧矩形

 

  bz.fill()

 

===========圆形、椭圆======

方法一：

 let bz:UIBezierPath=UIBezierPath.init(ovalIn: CGRect.init(x: 100, y: 100, width: 50, height: 50))

 

 

方法二： /*

         参数解释：

         1.center: CGPoint  中心点坐标

         2.radius: CGFloat  半径

         3.startAngle: CGFloat 起始点所在弧度

         4.endAngle: CGFloat   结束点所在弧度

         5.clockwise: Bool     是否顺时针绘制

         7.画圆时，没有坐标这个概念，根据弧度来定位起始点和结束点位置。M_PI即是圆周率。画半圆即(0,M_PI),代表0到180度。全圆则是(0,M_PI*2)，代表0到360度

         */

        

      

        let bz:UIBezierPath=UIBezierPath.init(arcCenter: CGPoint(x: 50, y: 50), radius: 50, startAngle: CGFloat(Double.pi) * 0, endAngle: CGFloat(Double.pi) * 2, clockwise: true)

       

        bz.fill()

 

 

 

 

=========二阶、三阶贝塞尔曲线==========

 

  //二阶贝塞尔曲线

        let bz = UIBezierPath.init()

        bz.move(to: CGPoint.init(x: 0, y: 0))

        bz.addQuadCurve(to: CGPoint.init(x: 100, y: 100), controlPoint: CGPoint.init(x: 200, y: 400))

 

 

 

 //三阶贝塞尔曲线

        let bz1 = UIBezierPath.init()

        bz1.move(to: CGPoint.init(x: 10, y: 10))

        bz1.addCurve(to: CGPoint.init(x: 50, y: 50), controlPoint1: CGPoint.init(x: 50, y: 80), controlPoint2: CGPoint.init(x: 80, y: 120))

        bz1.stroke()

 

 

=========CAShapeLayer绘图=======

 

   1.CAShapeLayer继承CALayer,可以使用CALayer的全部属性.

   2.CAShapeLayer需要配合贝塞尔曲线使用, CAShapeLayer需要贝塞尔曲线的path

  3.使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出一下想要的图形, drawRect 是属于Core Graphics框架走CPU,比较耗性能. CAShapeLayer属于Core Animation框架,走GPU,动画渲染直接提交给手机GPU.

    

     drawRect是UIView的方法，重写此方法可以完成绘制图形功能

 

第一步： //创建路径

        let linePath = UIBezierPath()

        //起点

        linePath.move(to: CGPoint.init(x: 30, y: 30))

        //添加其他点

        linePath.addLine(to: CGPoint.init(x: 150, y: 150))

        linePath.addLine(to: CGPoint.init(x: 180, y: 20))

        //闭合路径

        linePath.close()

        

   第二部：     //设施路径画布

        let lineShape = CAShapeLayer()

        lineShape.frame = CGRect.init(x: 10, y: 10, width: 350, height: 400)

        //宽度

        lineShape.lineWidth = 2

        //线条之间点的样式

        lineShape.lineJoin = kCALineJoinMiter

        //线条结尾的样式

        lineShape.lineCap = kCALineCapSquare

        //路径颜色

        lineShape.strokeColor = UIColor.red.cgColor

        //获取贝塞尔曲线的路径------设置画布的路径

        lineShape.path = linePath.cgPath

        //填充色

        lineShape.fillColor = UIColor.clear.cgColor

     第三步：   //把绘制的图放到layer上

        self.layer.addSublayer(lineShape)

        

===========多条路径合并=====

 

  //多条路径合并

        let bz1 = UIBezierPath.init()

      bz1.move(to: CGPoint.init(x: 10, y: 10))

        bz1.addLine(to: CGPoint.init(x: 100, y: 10))

        bz1.stroke()

        let bz2 = UIBezierPath.init()

       bz2.move(to: CGPoint.init(x: 10, y: 100))

        bz2.addLine(to: CGPoint.init(x: 100, y: 200))

        bz2.stroke()

        bz1.append(bz2)//多条路径合并

 

============给cashaperlayer添加动画（绘制时候有动画效果）=

 

 

 //CAShapeLayer,可以看做一个动画容器。把UIBezierPath绘制的路径放进去，点就会沿着这路径前进，加上颜色、动画等渲染后显示在界面上

        let bz1 = UIBezierPath.init()

        bz1.move(to: CGPoint.init(x: 10, y: 10))

        bz1.addLine(to: CGPoint.init(x: 100, y: 10))

        

        let shapeLayer = CAShapeLayer()

        shapeLayer.path = bz1.cgPath //存入UIBezierPath的路径

        shapeLayer.fillColor = UIColor.red.cgColor //设置填充色

        shapeLayer.lineWidth = 2  //设置路径线的宽度

        shapeLayer.strokeColor = UIColor.gray.cgColor //路径颜色

        //如果想变为虚线设置这个属性，[实线宽度，虚线宽度]，若两宽度相等可以简写为[宽度]

        shapeLayer.lineDashPattern = [2]

        //一般可以填"path"  "strokeStart" "strokeEnd"  。。。。。。

        let baseAnimation = CABasicAnimation(keyPath: "strokeEnd")

        baseAnimation.duration = 2   //持续时间

        baseAnimation.fromValue = 0  //开始值

        baseAnimation.toValue = 2    //结束值

        baseAnimation.repeatDuration = 5  //重复次数

    shapeLayer.add(baseAnimation, forKey: nil) //给ShapeLayer添加动画

        //显示在界面上

        self.layer.addSublayer(shapeLayer)

 

1.********简易绘图*******

/**
 绘图https://www.jianshu.com/p/1e4bc8378c36
 */

import UIKit

class LYBDrawView: UIView {

    override func draw(_ rect: CGRect) {
        //绘制椭圆，宽和高一样的时候就是正圆
//        //1.UIKit方式绘制
//        let p = UIBezierPath(ovalIn: CGRect.init(x: 0, y: 0, width: 100, height: 50))
//        UIColor.blue.setFill()
//        p.fill()

//        //2.Core Graphic/QuartZ 2D方式绘制，（还有一种OpenGL ES）iOS用不着
//        let ctx = UIGraphicsGetCurrentContext()!
//        ctx.addEllipse(in: CGRect.init(x: 0, y: 0, width: 100, height: 50))
//        ctx.setFillColor(UIColor.blue.cgColor)
//        ctx.fillPath()

//        //4.从上下文中获取图片
//        UIGraphicsBeginImageContextWithOptions(CGSize.init(width: 100, height: 100), false, 0)
//        let p = UIBezierPath.init(ovalIn:  CGRect.init(x: 0, y: 0, width: 100, height: 50))
//        UIColor.blue.setFill()
//        p.fill()
//        let image = UIGraphicsGetImageFromCurrentImageContext()
//        UIGraphicsEndImageContext()
        
        //
    }
    
    
//     // 3. 在UIView子类的drawLayer:inContext：方法中,使用下面的方法，draw方法还必须实现
//    override func draw(_ layer: CALayer, in ctx: CGContext) {
//        //方法3，
////        UIGraphicsPushContext(ctx) //将ctx设置为当前context
////        let p = UIBezierPath.init(ovalIn:  CGRect.init(x: 0, y: 0, width: 100, height: 50))
////        UIColor.red.setFill()
////        p.fill()
////        UIGraphicsPushContext(ctx)
//
//
//
//
//    }
   
    
    

}

 

Swift 全功能的绘图板开发
Bannings的专栏
03-29 2万+
转载请注明出处：http://blog.youkuaiyun.com/zhangao0086/article/details/43836789。 要做一个全功能的绘图板，至少要支持以下这些功能： 支持铅笔绘图（画点） 支持画直线 支持一些简单的图形（矩形、圆形等） 做一个真正的橡皮擦 能设置画笔的粗细 能设置画笔的颜色和填充颜色 能设置背景色或者背景图 … 我们先做一些基础性的工作，比如创建工程。 工程搭建
swift画图
yjw1007020425的博客
05-26 869
今天写写swift的基础画图，菜鸟直接copy就可以啦，都是我自己代码验证过的。 1.首先定义一个继承UIView自的类，复写drawRect(rect:CGRect)方法，在方法里面获取画笔，就可以随意撒野啦！ let context:CGContextRef = UIGraphicsGetCurrentContext()!;//获取画笔上下文 CGContextSetAllowsAnt
IOS SWIFT基本画图教程
weixin_34301132的博客
11-07 200
OS SWIFT基本画图教程 其实这是以前做过的一个例子,方便自己参考的代码!希望对大家也有点参考.   首先,建立一个Swift类,继承UIView这个类,然后重写 func drawRect(rect: CGRect)     其次,获取画笔的上下文 var context:CGContextRef =  UIGraphicsGetCurrentContext();//获取...
swift 绘图教程
u010859446的博客
10-12 1438
import UIKit class ViewController: UIViewController {     override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib....
swift-利用绘图封装一个简单的涂鸦画板view
08-15
利用绘图封装一个简单的涂鸦画板view，可以设置涂鸦线宽和颜色，撤销，清除，添加图片，保存图片
Swift iOS绘图应用：涂鸦屋的开发技巧
在iOS开发中，代理模式经常用于表格视图（UITableView）和集合视图（UICollectionView）等控件中，以实现数据源和代理方法。 4. Sketch软件应用： 标签中包含“Sketch”，这很可能是指在设计iOS应用时使用的矢量...
Swift绘图应用开发：画布绘画与颜色管理教程
资源摘要信息:"Swift绘图应用程序开发教程" 本文档是一个Swift编程语言编写的绘图应用程序的开发教程。Swift是苹果公司开发的一种编程语言，用于开发iOS、macOS、watchOS和tvOS应用程序。本教程旨在介绍如何使用...
Swift绘图教程：打造Julia分形图的惊艳视觉效果
以下是一个简化的Swift代码示例，演示了如何实现上述步骤之一部分： ```swift import UIKit func juliaSetImage(width: Int, height: Int, juliaConstant: CGFloat) -> UIImage { UIGraphicsBeginImageContext...
Swift绘图源码示例：逐章解读与实操演练
- 根据描述，“Swift-Drawing”项目是一个围绕Swift绘图技术的源代码集合。 - 这个集合以“逐章收集”的形式存在，意味着它可能是按照教程或书籍章节的顺序组织源代码。 - 每个章节的代码都提供了特定学习目标的...
DePict: Swift开发中的简单声明性绘图框架
根据提供的信息，标题和描述中提到的知识点主要集中在“Swift开发-图片处理展示”，特别是介绍了一个名为“DePict”的绘图框架。由于文件内容未提供，将依据标题和描述进行知识拓展，覆盖以下方面： 一、Swift编程...
swift-简易的画图小工具支持改变颜色大小前进后退后期希望加入画方画圆等功能
08-15
简易的画图小工具,支持改变颜色,大小,前进,后退,后期希望加入画方画圆等功能
swift-Sketch具有绘图的基本功能。任何人都可以轻松创建绘图iOS应用
08-15
Sketch具有绘图的基本功能。 任何人都可以轻松创建绘图iOS应用
swift-SwiftPlot框架是一个跨平台的库可以让您在Swift中原生地绘制图形
08-15
SwiftPlot框架是一个跨平台的库，可以让您在Swift中原生地绘制图形。 现有的Swift绘图框架（例如CorePlot）仅在iOS或Mac上运行。 SwiftPlot背后的想法是创建一个可在iOS，Mac，Linux和Windows上运行的跨平台库。
macOS SwiftUI教程之绘制曲线
12-12
macOS SwiftUI教程之绘制曲线。Path提供了几种内置的API，可帮助您绘制不同的形状。您不仅限于绘制直线。的addQuadCurve，addCurve和addArc允许你创建曲线和圆弧
swift 绘图
zuojinmin的博客
03-07 353
// //  zuoView.swift //  swift 仓库 // //  Created by zuo on 16/3/7. //  Copyright © 2016年 zuo. All rights reserved. // import UIKit class zuoView: UIView {     override func draw
swift 绘图
s1e1s的专栏
08-23 338
继承UIView，在override funcdrawRect(rect: CGRect)中重写绘制方法   let context=UIGraphicsGetCurrentContext()获取画布   画线 CGContextMoveToPoint(context,100, 100)//移动起始点 CGContextAddLineToPoint(context, 150,
Swift--UIBezierPath 绘制图形
SoftwareDoger的博客
10-28 772
func drawBack() { //// Color Declarations let strokeColor = color let bezierPath = UIBezierPath() bezierPath.move(to: CGPoint(x: frame.minX + 25 + 12 , y: fra...
Swift - Core Graphics绘图框架详解1（绘制线条）
雨夜枫起的博客
11-29 3105
一、Core Graphics介绍 1，什么是Core Graphics （1）Core Graphics Framework 是一套基于 C 的 API 框架，使用了 Quartz 作为绘图引擎，可用于一切绘图操作。它提供了低级别、轻量级、高保真度的 2D 渲染。 （2）Quartz 2D 是 Core Graphics Framework 的一部分，是一个强大的
swift -- Quartz 2D -- 绘制图层：线条, 三角形, 矩形, 圆, 弧, 扇形, 虚线等
coder_lixiang的博客
09-14 3338
前面已经讲解了Quartz 2D的原理, 那么下面就来利用Quart 2D来画一些最基本的图形;步骤 获取图形上下文 创建路径（描述路径) 绘制图形 把路径添加到上下文 利用图形上下文将绘制的所有内容渲染显示到view上面 获取图形上下文 新建一个类，继承自UIView 实现- (void)drawRect:(CGRect)rect方法，然后在这个方法中进行获取上下文的操作步骤 注意:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值