iOS - 如何在拖动时用户触摸的线上绘制点

时间:2016-05-20 08:31:37

标签: ios objective-c uipangesturerecognizer

我有一个矩形视图,其中包含我以编程方式绘制的垂直细线。

这是我用来绘制线条的代码:

- (void)drawLines
{
    CGFloat spacing = _bgView.frame.size.width / 11.0f;

    for(int i = 1; i < 11; i++)
    {
        UIView *line = [[UIView alloc] initWithFrame:CGRectMake((CGFloat)(i * spacing), 0, 1, _bgView.frame.size.height)];
        line.backgroundColor = [UIColor whiteColor];
        line.tag = i;

        [_bgView addSubview:line];
    }
}

线条由均匀分布的空间分隔,这些空间根据矩形视图的宽度(_bgView)计算。

这里概述了它的外观:

enter image description here

当用户在矩形视图中执行拖动时,当他/她的手指经过或触摸某条线时,将在该特定点上绘制一个点。

这里是检测线上用户触摸点的代码,并在该点上绘制一个点。

- (IBAction)drawDots:(id)sender
{
    UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)sender;

    CGPoint pannedPoint = [pan locationInView:_bgView];

    for (UIView *subview in _bgView.subviews)
    {
        if (CGRectContainsPoint(subview.frame, pannedPoint) && subview.tag > 0)
        {
            NSLog(@"Point x:%.2f y:%.2f TAG:%i", pannedPoint.x, pannedPoint.y, subview.tag);

            UIView *point = [[UIView alloc] initWithFrame:CGRectMake(pannedPoint.x - 2.5, pannedPoint.y - 2.5, 5, 5)];
                point.backgroundColor = [UIColor redColor];

            [_bgView addSubview:point];
        }
    }
}

现在,如果用户播放速度非常快,则结果如下:

enter image description here

可以看出,只绘制了一些点,这就是为什么其他线上有很多缺失点的原因。

这应该是预期的结果:

enter image description here

但是,只有当用户平移超级缓慢时才会发生这种情况。

即使他的手指移动得非常快,我怎样才能在用户触摸时截取的线条中绘制点?

谢谢!

2 个答案:

答案 0 :(得分:1)

您应该使用UIResponder方法来检测用户触摸,而不是平移手势:

- touchesBegan:withEvent:
- touchesMoved:withEvent:
- touchesEnded:withEvent:
- touchesCancelled:withEvent:

第二种方法 - touchesMoved:withEvent:当用户在屏幕上移动手指时调用,这样你就可以得到它的手指位置:

UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:touch.view];    

然后只需添加检测逻辑。

查看文档以获取更多详细信息: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIResponder_Class/

答案 1 :(得分:1)

请参阅此代码

满足您的要求

var node = ReactDOM.findDOMNode(this.refs[ref-name]);
if (node){
  var calculatedHeight = node.clientHeight;
}

会帮助你