美文网首页iOS开发整理
在屏幕用手指绘制直线

在屏幕用手指绘制直线

作者: 乂iang | 来源:发表于2019-03-04 20:44 被阅读0次

1、新建 Line

Line 里面有两个 CGPoint 的属性,begin 和 end。

CGPoint 需要 import UIKit

BNRDrawView 也需要 import UIKit 才能有 BNRDrawView:UIView

2、两种线条

一种是 Line 类型的线条,保存正在屏幕画的 currentLine,一个是 Array 来保存已经画过的线条。

3、drawRect

DrawRect 只可以由系统调用,不可自己调用。如果想触发该方法,可以调用 setNeedsDisplay。
遍历 array 里面的线条并绘制。
如果有 currentLine ,将 color 设置为红色并绘制。

4、绘制:strokeLine

新建一个 BezierPath,设置 moveToPoint 和 addLineToPoint。最后调用 stroke 进行绘制。
高级用法

5、Touch的三个 event 方法

  1. touchesBegan
    从返回的 touch 实例获取到手指点的地方。并设置 currentLine 的 begin 与 end。
UITouch *t = [touches anyObject];
CGPoint location = [t locationInView:self];
  1. touchesMoved
    同上,设置 currentLine 的 end。

  2. touchesEnded
    将curentLine 加入到 array 中,并设为 nil。

[self.finishedLines addObject:self.currentLine];
self.currentLine = nil;

相关资料

drawRect 相关资料
touch 事件相关资料

相关代码

#import "BNRDrawView.h"
#import "BNRLine.h"

@interface BNRDrawView()
@property (nonatomic,strong)BNRLine *currentLine;
@property (nonatomic,strong)NSMutableArray *finishedLines;
@end

@implementation BNRDrawView
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if(self){
        self.finishedLines = [[NSMutableArray alloc]init];
        self.backgroundColor = [UIColor grayColor];
    }
    return self;
}

-(void)strokeLine:(BNRLine *)line{
    UIBezierPath *bp = [UIBezierPath bezierPath];
    bp.lineWidth = 10;
    bp.lineCapStyle = kCGLineCapRound;
    [bp moveToPoint:line.begin];
    [bp addLineToPoint:line.end];
    [bp stroke];
    
}
-(void)drawRect:(CGRect)rect{
    [[UIColor blackColor]set];
    for(BNRLine *line in self.finishedLines){
        [self strokeLine:line];
    }
    if(self.currentLine){
        [[UIColor redColor]set];
        [self strokeLine:self.currentLine];
    }
    
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *t = [touches anyObject];
    CGPoint location = [t locationInView:self];
    self.currentLine = [[BNRLine alloc]init];
    self.currentLine.begin = location;
    self.currentLine.end = location;
    [self setNeedsDisplay];
}

-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *t = [touches anyObject];
    CGPoint location = [t locationInView:self];
    self.currentLine.end= location;
    [self setNeedsDisplay];
}

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    [self.finishedLines addObject:self.currentLine];
    self.currentLine = nil;
    [self setNeedsDisplay];
}

@end

相关文章

  • 在屏幕用手指绘制直线

    1、新建 Line Line 里面有两个 CGPoint 的属性,begin 和 end。 CGPoint 需要 ...

  • Quartz2D绘图

    标签: 裁剪、多边形、绘制图片、绘制文字、截图、曲线、扇形、椭圆、直线 绘图基本格式 一、绘制直线(虚线为多条直线...

  • 上下文绘图,滤镜简单使用

    一、drawRect绘制功能 1.绘制直线 精简绘制直线 2. 绘制椭圆 3. 绘制弧形 4. 绘制贝塞尔曲线 5...

  • SVG 绘制直线

    本节我们来学习如何在 SVG 中绘制直线,要绘制直线可以使用 元素来实现。 如何绘制直线 我们可以使用 元...

  • 如何创建精美的彩色线型图标

    绘制线型图标 第1步 在“ 新建文档”中,使用“ 钢笔工具”绘制出第一条直线,然后向右下45°方向绘制第二条直线,...

  • 彩色线型图标设计

    绘制线型图标 第1步 在“ 新建文档”中,使用“ 钢笔工具”绘制出第一条直线,然后向右下45°方向绘制第二条直线,...

  • 迅捷CAD编辑器中怎么截取线段中取任意一点绘制另一条射线?

    像我们平时再设计图纸的时候,绘制直线还有线段也是经常的事情啦,那我们在进行绘制完一条直线之后,想要在这条直线上再次...

  • SVG

    SVG 绘制长方形绘制圆形绘制椭圆 绘制直线 绘制折线 绘制多边形 ...

  • IOS 直线绘制

    //1.创建贝塞尔路径的实例 UIBezierPath*path = [UIBezierPathbezierPat...

  • Canvas使用方法总结

    引入Canvas标签 绘制直线 绘制矩形 绘制圆弧 绘制文本 绘制图片 我的github:https://gith...

网友评论

    本文标题:在屏幕用手指绘制直线

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