在iPhone中动态重绘重新调整大小的圆圈

时间:2013-03-06 14:17:17

标签: iphone ios drawrect

我尝试做的是让用户触摸屏幕,当在圆圈意图增大尺寸(并保持增长)的位置检测到触摸时,直到用户离开。

我知道如何检测触摸但是我正在尝试绘制的问题并且随着它变大而重新绘制圆圈。

这样做的最佳方式是什么?

enter image description here

4 个答案:

答案 0 :(得分:3)

我会使用UILongPressGestureRecognizerNSTimerUIBezierPath的组合来实现这一目标。

首先,设置viewDidLoad以添加和配置CAShapeLayer,它将容纳您想要绘制的圆圈。以下代码最初将在半径为50磅的屏幕上绘制一个圆圈,并在主视图中添加长按手势。当然,触摸检测可以按照您想要的方式完成。哦,你需要为此导入Quartz。

- (void)viewDidLoad
{
    [super viewDidLoad];

    circleRadius = 50.0f;

    circle = [CAShapeLayer layer];

    [circle setAnchorPoint:CGPointMake(0.5f, 0.5f)];
    [circle setFillColor:[UIColor clearColor].CGColor];
    [circle setStrokeColor:[UIColor colorWithWhite:0.9f alpha:0.7f].CGColor];
    [circle setLineWidth:5.0f];

    [self.view.layer addSublayer:circle];

    [self drawCircleWithRadius:circleRadius];

    UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressDetected:)];
    [longPress setMinimumPressDuration:0.1];
    [longPress setAllowableMovement:15.0f];
    [self.view addGestureRecognizer:longPress];
}

然后,当识别出长按手势时,检查其状态。如果其状态为开始,则启动重复计时器以调用动画功能。当手势结束时,无效。

- (void)longPressDetected:(UILongPressGestureRecognizer *)sender {
    if (sender.state == UIGestureRecognizerStateBegan) {
        timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(animateImageView) userInfo:nil repeats:YES];
    }else if (sender.state == UIGestureRecognizerStateEnded) {
        [timer invalidate];
    }
}

- (void)animateImageView {
    circleRadius += 10.0f;
    [self drawCircleWithRadius:circleRadius];
}

最后,下面的函数将使用CABasicAnimation将形状图层的path属性设置为上面指示的值(每次+10)。确保此动画持续时间不高于定时器重复间隔!

- (void)drawCircleWithRadius:(CGFloat)radius {
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    [pathAnimation setFromValue:(id)circle.path];
    [pathAnimation setToValue:(id)[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0f * radius, 2.0f * radius) cornerRadius:radius].CGPath];
    [pathAnimation setDuration:0.1];
    [pathAnimation setRepeatCount:1.0f];
    [pathAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
    circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, CGRectGetMidY(self.view.frame)-radius);
    [circle addAnimation:pathAnimation forKey:@"changePathAnimation"];
}

希望这有帮助!

答案 1 :(得分:0)

执行此操作的最佳方法是使用Quartz 2D并在触摸时为形状设置动画。

使用类似的东西..

enter image description here

CGContextRef ctxt = [[NSGraphicsContext currentContext] graphicsPort];
CGGradientRef gradient;
CGColorSpaceRef colorSpace;
CGFloat locations[] = {0.0,1.0};
CGFloat components[] = { 0.5,1.0,1.0,1.0, 0.25,0.5,0.5,1.0 };
colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB);
gradient = CGGradientCreateWithColorComponents(colorSpace,components,locations,
                                               sizeof(locations)/sizeof(CGFloat));
CGPoint start = {70.0,130.0}, end = {100.0,100.0};
CGFloat startRadius = 0.0, endRadius = 90.0;
CGContextDrawRadialGradient(ctxt,gradient,start,startRadius,end,endRadius,0);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);

在这里找到更多信息.. In iOS Development, using Core Graphics and/or Quartz 2D, how can I draw a circle filled with a gradient in such a manner that it looks like a sphere?

另外对于Quartz2d的动画技术,请看这里.. https://github.com/neror/CA360

答案 2 :(得分:0)

您必须自定义UIView才能在drawRect:方法中绘制圆圈。处理viewController视图上的捏合效果,更新UIView自定义中的变量并使用:

[myCicleView setNeedsDisplay];

强制视图重绘自己。

答案 3 :(得分:0)

你可以试试这个:

触摸方法

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
   myTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(reDrawCircle) userInfo:nil repeats:YES];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
   [myTimer invalidate];
   myTimer = nil;
}

对于Scalling Image ::

-(void)reDrawCircle {

   //Your Code for Circle Re-Draw.
}

当用户触摸时,它将为您重新绘制圆圈的方法启动计时器,当用户以触摸结束时,它将使计时器无效。所以它不会调用重绘方法。

希望它会对你有所帮助 感谢。