【问题标题】:How to use Custom Image for UIBezierPath如何为 UIBezierPath 使用自定义图像
【发布时间】:2015-08-23 15:27:17
【问题描述】:

我用 CAShaperLayerUIBezierPath 做了一个半圆?

如下图

clockWiseLayer = [[CAShapeLayer alloc] init];

CGFloat startAngle = -M_PI_2;
CGFloat endAngle = M_PI + M_PI_2;

CGFloat width = CGRectGetWidth(imageView.frame)/2.0f;
CGFloat height = CGRectGetHeight(imageView.frame)/2.0f;
CGPoint centerPoint = CGPointMake(width, height);

float radius = CGRectGetWidth(imageView.frame)/2+7;

clockWiseLayer.path = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                    radius:radius
                                                startAngle:startAngle
                                                  endAngle:endAngle
                                                 clockwise:YES].CGPath;

clockWiseLayer.fillColor = [UIColor clearColor].CGColor;
clockWiseLayer.strokeColor = [UIColor blueColor].CGColor;
clockWiseLayer.borderColor = [UIColor greenColor].CGColor;
clockWiseLayer.backgroundColor = [UIColor grayColor].CGColor;

clockWiseLayer.strokeStart = 0.0f;
clockWiseLayer.strokeEnd = 0.5f;

clockWiseLayer.lineWidth = 2.0f;
clockWiseLayer.borderWidth = 5.0f;

clockWiseLayer.shouldRasterize = NO;
[imageView.layer addSublayer:clockWiseLayer];

这里,描边颜色显示bluecolor,我怎样才能从头到尾放置自定义颜色阴影,或者像在开始时它必须更蓝,而不是返回时,它变得更少蓝色或白色。

在其他方法中,我可以使用 UIImage 代替它。如何在这个 stokeColor 上放置 UIImage。

谢谢。

【问题讨论】:

  • 你有一个简单的例子图片来说明你的意思,就像这样:imgur.com/LUwunAR
  • 如果是这样的话,我想我有适合你的解决方案,这次是实际的实时工作代码
  • 亲爱的让我给你看图片。
  • imgur.com/92DCTpv 喜欢这些环绕全球的圆圈。
  • 啊,好吧,让我看看我能做什么

标签: ios objective-c uiimage uibezierpath cashapelayer


【解决方案1】:

这是一个可行的解决方案:

它一直绕着圆圈,但你明白了,它看起来是一个渐变的笔触:

从宏开始:

#define   DEGREES_TO_RADIANS(degrees)  ((M_PI * degrees)/ 180)


UIImageView * shff = [UIImageView new];
    [shff setImage:[UIImage imageNamed:@"REPLACE_WITH_YOUR_IMAGE"]];
    [shff setBackgroundColor:[UIColor whiteColor]];
    [shff setClipsToBounds:true];
    [shff.layer setCornerRadius:SCREEN_HEIGHT/6];
    [shff setFrame:CGRectMake(SCREEN_HEIGHT/3/2, 100, SCREEN_HEIGHT/3, SCREEN_HEIGHT/3)];
    [self.view addSubview:shff];

    int radius = shff.frame.size.width/2+7;

    CAShapeLayer *arc = [CAShapeLayer layer];
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(shff.center.x, shff.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(-90) endAngle:DEGREES_TO_RADIANS(90) clockwise:YES].CGPath;


    arc.fillColor = [UIColor clearColor].CGColor;
    arc.strokeColor = [UIColor purpleColor].CGColor;
    arc.lineWidth = 15;
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 45.0;
    drawAnimation.repeatCount         = 1.0;
    drawAnimation.removedOnCompletion = NO;
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.view.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor ];
    gradientLayer.startPoint = CGPointMake(0,0.5);
    gradientLayer.endPoint = CGPointMake(1,0.5);

    [self.view.layer addSublayer:gradientLayer];

    gradientLayer.mask = arc;

截图:

我刚刚更改了我的答案,所以现在它可以工作了,只需使用度数到弧度宏即可。另外,我只是在解决方案中添加了一个圆角线帽,并更改了开始和结束动画的 % 帧。现在应该可以顺利运行了。

我为 Sh%ts 和咯咯笑做了一个不同的解决方案。这是使用发射器层的较新解决方案:

-(void)doGradientoutline {
    UIImageView * imageView = [UIImageView new];
    [imageView setImage:[UIImage imageNamed:@"df"]];
    [imageView setFrame:CGRectMake(SCREEN_WIDTH/2-imageView.image.size.width*3/2, SCREEN_HEIGHT/4, imageView.image.size.height*3, imageView.image.size.height*3)];
    [imageView setClipsToBounds:true];
    [imageView.layer setCornerRadius:imageView.frame.size.width/2];
    [self.view addSubview:imageView];

    int radius = imageView.frame.size.width/2+7;

    CAShapeLayer *arc = [CAShapeLayer layer];
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.center.x, imageView.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath;

    arc.fillColor = [UIColor clearColor].CGColor;
    arc.strokeColor = [UIColor purpleColor].CGColor;
    arc.lineWidth = 15;
    [arc setLineCap:@"round"];

    CAEmitterLayer * _myEmitter = [CAEmitterLayer layer];

    _myEmitter.emitterPosition = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
    _myEmitter.emitterSize = CGSizeMake(1.0,1);
    _myEmitter.emitterMode = kCAEmitterLayerPoints;
    _myEmitter.emitterShape = kCAEmitterLayerSphere;
    _myEmitter.renderMode = kCAEmitterLayerOldestFirst;
    _myEmitter.shadowOpacity = 0.0;
    _myEmitter.shadowRadius = 0.0;
    _myEmitter.shadowOffset = CGSizeMake(-10.0,-10);
    _myEmitter.shadowColor = [[UIColor colorWithRed:1.00 green:1.00 blue:0.99 alpha:1.0] CGColor];

    CAEmitterCell * _myCell = [CAEmitterCell emitterCell];
    _myCell = [CAEmitterCell emitterCell];
    _myCell.name = @"_myCell";
    _myCell.beginTime = CACurrentMediaTime();
    _myCell.birthRate = 80;
    _myCell.lifetime = 8.0;
    _myCell.color = [[UIColor colorWithRed:0.1000 green:0.00 blue:0.5000 alpha:1.00] CGColor];
    _myCell.redSpeed = 1.10;
    _myCell.blueSpeed = 1.10;
    _myCell.alphaSpeed = 0;
    _myCell.redRange = 0.0;
    _myCell.blueRange = 0.0;
    _myCell.alphaRange = 0.0;
    _myCell.contents = (id)[[UIImage imageNamed:@"ffd.png"] CGImage];
    _myCell.emissionRange = 0.00;
    _myCell.emissionLatitude = 0.00;
    _myCell.emissionLongitude = 0.00;
    _myCell.velocity = 0.00;
    _myCell.velocityRange = 0.00;
    _myCell.spin = 2*M_PI;
    _myCell.spinRange = 2*M_PI;
    _myCell.scale = 1.5/ [[UIScreen mainScreen] scale];
    _myCell.scaleSpeed = 0.00;
    _myCell.scaleRange = 0.0;
    _myEmitter.emitterCells = [NSArray arrayWithObject:_myCell];

    CAKeyframeAnimation *particleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"emitterPosition"];
    [particleAnimation setPath:arc.path];
    [particleAnimation setDuration:8.0];
    [particleAnimation setRepeatCount:HUGE_VAL];
    [particleAnimation setCalculationMode:kCAAnimationPaced];
    [_myEmitter addAnimation:particleAnimation forKey:@"yourAnimation"];

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 1.50;
    drawAnimation.repeatCount         = 1.0;
    drawAnimation.removedOnCompletion = NO;
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.f];
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    [self.view.layer addSublayer:_myEmitter];
}

您必须下载此图像并将其存储在您的捆绑包中才能使其正常工作,这不是标准图像,它使用 Adob​​e Illustrator 使用了几层外发光,这是发射器发光的部分原因并更改颜色,只需单击下面的紫色模糊图像,您将右键单击并保存然后导入到您的项目中。在你的 viewDidAppear 中调用上面的方法可以无缝查看它是如何工作的,祝你好运:

新结果:

【讨论】:

  • 不是drawCircleAnimation,只是一半strokeColor。您的代码正在用该图像绘制整个圆圈。
  • 如果你看到图片,我想要全球范围内的线条。我使用 CAShaperLayer 和 UIBezierPath 制作它们。
  • 我知道,我告诉过你,你只需要把角向下放到末端角上,就是这样
  • 好的。我稍后会检查。顺便谢谢。如果我成功了。我会告诉你的:)
  • 不合适,但很欣赏。我不想尾巴碰到它,你可以说它会覆盖270度并不断移动。像一个加载指示器。 @Larcerax
猜你喜欢
  • 2012-02-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-02-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多