iphone - iPhoneでサイズ変更された円を動的に再描画する

Question

私がやろうとしているのは、ユーザーが画面に触れさせることです。ユーザーが手放すまで円のサイズが大きくなる（そして大きくなり続ける）位置でタッチが検出されると、

私はタッチを検出する方法を知っていますが、私が抱えている問題は、円が大きくなるにつれて円を描画して再描画しようとすることです。

これを行う最善の方法は何ですか？

Answer 1

UILongPressGestureRecognizerこれを実現するには、 、NSTimer、およびの組み合わせを使用しUIBezierPathます。

まず、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 を使用して、シェイプ レイヤーのパス プロパティを上記の値 (毎回 +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"];
}

お役に立てれば！

Answer 2

これを行う最善の方法は、Quartz 2D を使用して、タッチで形状をアニメーション化することです。

このようなものを使用してください..

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);

詳細については、こちらを参照してください 。iOS 開発では、Core Graphics および/または Quartz 2D を使用して、グラデーションで塗りつぶされた円を球のように描画するにはどうすればよいですか?

また、Quartz2d を使用したアニメーション手法については、こちらをご覧ください。 https://github.com/neror/CA360

Answer 3

これを試すことができます：

タッチ方法

-(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;
}

イメージのスケーリングの場合::

-(void)reDrawCircle {

   //Your Code for Circle Re-Draw.
}

ユーザーがタッチすると、円を再描画するためのメソッドのタイマーが開始され、ユーザーがタッチで終了すると、タイマーが無効になります。したがって、再描画のメソッドは呼び出されません。

うまくいけば、それはあなたを助けるでしょう.
ありがとう。

Answer 4

drawRect: メソッドで円を描画するには、UIView をカスタマイズする必要があります。viewController のビューでピンチ効果を処理し、UIView カスタムの変数を更新して、次を使用します。

[myCicleView setNeedsDisplay];

ビューを強制的に再描画します。