随着手指滑动,绘制一条带箭头的线,沿着滑动路径进行。

8

我正在创建一个应用程序,在这个应用程序中,当我在屏幕上滑动手指时,我会使用代码绘制线条。

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(),3.0);
    CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.0, 0.5, 0.6, 1.0);
    CGContextBeginPath(UIGraphicsGetCurrentContext());
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), startPoint.x, startPoint.y);
    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), endPoint.x, endPoint.y);
    CGContextStrokePath(UIGraphicsGetCurrentContext());
}

同时,我也在使用代码移动该行上的箭头。
-(void)moveBallConstantly
{
 [UIView animateWithDuration:0.01f animations: ^{
         [appDel.ballImageView setCenter:CGPointMake(appDel.ballImageView.center.x +        (x/increamentFraction), appDel.ballImageView.center.y + (y/increamentFraction))];
   }];
}

这只是一个小部分的功能。我可以不断地移动箭头,但为了使箭头移动更加平滑,我会使用定时器反复调用此函数。

由于我同时进行两种处理,所以有时会出现问题。有时箭头移动方法会延迟,有时线条绘制方法会延迟。

1个回答

0

我会放弃计时器直接在touchesMoved中移动它。

我的解决方案允许您在UIImageView画布上绘图,并在绘制时跟随手指移动一个白色方框。将其放入任何UIView中尝试一下:

// These should probably be @properties
static CGPoint lastPoint;
static CGPoint currentPoint;
static UIView *box;
static UIImageView *canvas;

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch  = [touches anyObject];
    currentPoint    = [touch locationInView:self];
    lastPoint       = [touch locationInView:self];

    // Create the canvas the first time. Should probably do this elsewhere
    // but done here for paste-ability
    if (canvas == nil)
    {
        canvas = [[UIImageView alloc] initWithFrame:self.frame];
        canvas.backgroundColor = [UIColor redColor];
        [self addSubview:canvas];
    }

    // Create the box that follows the finger. Should probably do this elsewhere
    // but done here for paste-ability
    if (box == nil)
    {
        box = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
        box.backgroundColor = [UIColor whiteColor];
        [self addSubview:box];
    }

    // Ensure we can see it and move it right away
    box.alpha = 1.0f;
    box.center = CGPointMake(currentPoint.x, currentPoint.y - 50);
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    currentPoint = [touch locationInView:self];

    // Set up everything for drawing
    UIGraphicsBeginImageContext(canvas.frame.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [canvas.image drawInRect:CGRectMake(0, 0, canvas.image.size.width, canvas.image.size.height)];
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 1);
    CGContextSetStrokeColorWithColor (context, [UIColor blueColor].CGColor);

    // Draw the path
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, lastPoint.x, lastPoint.y);
    CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
    CGContextStrokePath(context);
    canvas.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    // Animate the box very quickly to the new location
    [UIView animateWithDuration:0.1f
                          delay:0
                        options:UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                        box.center = CGPointMake(box.center.x + (currentPoint.x - lastPoint.x),
                                                 box.center.y + (currentPoint.y - lastPoint.y));
                     }
                     completion:nil];

    // Remember our last touch
    lastPoint = currentPoint;
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    // Finish it off by fading out the box
    [UIView animateWithDuration:0.4f animations:^{
        box.alpha = 0.0f;
    }];
}

它将随着手指移动绘制线条,但是我需要同时在线条上移动箭头,以便您不认为它们会重叠。为了移动箭头,我使用计时器,每0.01秒调用一次。 - vntstudy
注意,原问题没有提到要将箭头保持在线上 :)要做到这一点,只需将box.center设置为lastPoint即可。如果您不想要轻微的动画效果,可以在touchesMoved:withEvent:中删除动画块。 - Paulo Fierro

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接