简单的实现涂鸦功能

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        // Initialization code
        // 定义了一个线数组,来存储所有的线
        self.lineArray = [[NSMutableArray alloc] initWithCapacity:1];
        // 设置一个清除按钮
        UIButton *clear = [UIButton buttonWithType:UIButtonTypeSystem];
        clear.frame = CGRectMake(frame.size.width-100, frame.size.height-100, 100, 100);
        [clear setTitle:@"清除" forState:UIControlStateNormal];
        [clear addTarget:self action:@selector(clearScreen) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:clear];
        
    }
    return self;
}

- (void)clearScreen{
    
    // 清除所有的线,即存在线数组中的对象
    [_lineArray removeAllObjects];
    // 重绘(具体概念在动画中更明显,这里理解为,接受到了命令,接下来就是点击开始按钮运行)
    [self setNeedsDisplay];

}


- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

    // 一触摸屏幕,就将启动点存进pointArray中,并且将绘成第一条线所需的点数组作为元素存进定义的_lineArray中
    // 为什么这样设置呢?因为手一离开屏幕,又是一个新的启动点传入,也是另一条新线的划入
    NSMutableArray * pointArray = [NSMutableArray arrayWithCapacity:1];
    [_lineArray addObject:pointArray];
    
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

    // 获得触摸屏幕的所有对象
    UITouch * touch = [touches anyObject];
    // 获得触摸屏幕的所有点的位置
    CGPoint  point = [touch locationInView:self];
    // 利用NSValue将获得的点封装成NSValue类型对象,以便能存进NSMutableArray中
    NSValue * pointCount = [NSValue valueWithCGPoint:point];
    // 与touchesBegan方法想呼应,一触摸屏幕所设置的点数组也就是最后一个点数组,这里取出来,存移动中所有点
    NSMutableArray * pointArray = [_lineArray lastObject];
    [pointArray addObject:pointCount];
    
    // 重新绘制这个self.view
    [self setNeedsDisplay];
    
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // 获得上下文本(我更愿意理解为获得进行绘画资格,作为一个通行证般的参数,让你能设置画笔颜色,线条尺寸,以及如何绘画)
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 设置画笔
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    // 设置线条粗细
    CGContextSetLineWidth(context, 2.0);
    
    for (int i = 0; i < _lineArray.count; i++) {
        NSMutableArray * pointArray = [_lineArray objectAtIndex:i];
        // 这里(int)pointArray.count进行了类型转换,可以思考下是为什么
        for (int j = 0; j < (int)pointArray.count - 1; j++) {
            // 获得封装的起点
            NSValue * headPointValue = [pointArray objectAtIndex:j];
            // 获得封装的终点
            NSValue * tailPointValue = [pointArray objectAtIndex:(j + 1)];
            // 转化为CGPoint类型
            CGPoint headPoint = [headPointValue CGPointValue];
            // 转化为CGPoint类型
            CGPoint tailPoint = [tailPointValue CGPointValue];
            
            // 设置画笔的起点
            CGContextMoveToPoint(context, headPoint.x, headPoint.y);
            // 画笔路径的途径直到终点
            CGContextAddLineToPoint(context, tailPoint.x, tailPoint.y);
        }
    }
    // 绘制这个文本(总算可以画画了)
    CGContextStrokePath(context);
    

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,Three.js 中的后处理是一种在绘制场景后将效果应用于渲染场景的方法。可以通过创建自定义渲染通道来添加您自己的滤镜。因此,可以使用 Three.js 后处理来实现涂鸦功能。 具体实现步骤如下: 1. 创建一个 Three.js 场景和相机。 2. 创建一个渲染器并将其附加到 DOM 中。 3. 创建一个渲染目标,并将其用作后处理通道的输入和输出。 4. 创建一个自定义渲染通道,并将其添加到 Three.js 后处理器中。 5. 在自定义渲染通道中实现涂鸦功能,例如使用画笔在渲染目标上绘制图形。 6. 将后处理器应用于场景并渲染场景。 以下是一个简单的示例代码,演示如何使用 Three.js 后处理实现涂鸦功能: ```javascript // 创建场景和相机 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器并将其附加到 DOM 中 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建渲染目标 var renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight); // 创建自定义渲染通道 var customPass = new THREE.ShaderPass({ uniforms: { tDiffuse: { value: null }, resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, brushPosition: { value: new THREE.Vector2(0.5, 0.5) }, brushSize: { value: 0.05 }, brushColor: { value: new THREE.Color(0xffffff) } }, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); // 将自定义渲染通道添加到后处理器中 var composer = new THREE.EffectComposer(renderer, renderTarget); composer.addPass(new THREE.RenderPass(scene, camera)); composer.addPass(customPass); // 监听鼠标移动事件,更新画笔位置 document.addEventListener('mousemove', function(event) { var x = event.clientX / window.innerWidth; var y = 1 - event.clientY / window.innerHeight; customPass.uniforms.brushPosition.value.set(x, y); }); // 渲染场景 function render() { requestAnimationFrame(render); composer.render(); } render(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值