标签: cashapelayer

我想向带有渐变的视图添加内边框。以下代码有效并给了我这个结果

import UIKit

class InnerGradientBorderView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = UIColor.clear
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        addGradientInnerBorder(width: 8, color: FlatWhite())
    }

    func addGradientInnerBorder(width: CGFloat, color: UIColor) {

        // Setup
        let topLeftO = CGPoint(x: 0, y: 0)
        let topLeftI = CGPoint(x: width, y: width)

        let topRightO = CGPoint(x: frame.width, y: 0)
        let topRightI = CGPoint(x: frame.width - width, y: width)

        let bottomLeftO …

我有一个CGRect价值，需要在它周围画一个边框。我只希望在没有任何线条连接它们的情况下绘制角落。

像这样的东西...

我将如何使用 swift 绘制这个数字？

我是核心动画的新手，我正在尝试根据新数据将strokeEnda 的CAShapeLayer，从旧值更新为新的更新值。

所以基本上我有一个绘制的CAShapeLayer，并更新它UIBezierPath，并使用，通过这样做来CABasicAnimation(forKey: "strokeEnd")为新的动画：strokeEnd

layerAnimation = CABasicAnimation(keyPath: "strokeEnd")
layerAnimation.toValue = 1
shapeLayer.strokeEnd = 1
layerAnimation.duration = 0.4
shapeLayer.add(layerAnimation, forKey: animation.identifier)

其中animation.identifier是String Enum确定应使用哪个动画的值。

到目前为止，我一直在深入研究苹果的核心动画文档，以及堆栈溢出，以寻找可能的线索，但到目前为止没有任何运气。

据我了解，通过仅在动画中分配一个值，核心动画本身就会找出路径，但到目前为止还没有运气。我还尝试计算新旧顶部 Y 值之间的差异，并使用byValue, 和不带fromValueor toValue。

绘制了更新的路径，但不幸的是更新时没有显示动画strokeEnd。

任何帮助、提示或建议，我们将不胜感激。

干杯!

根据 @matt 的反馈进行编辑以添加更多详细信息：TLDR；更新路径，我想我应该用 toValue 来制作动画。

我正在存储一个包含CAShapeLayer在UIBezierPath. 该路径是根据可以是三个不同值的数据确定的，并且应该从 (x: i, y: 0) -> (x: i, y: n) 开始。其中 x 是固定位置，y 是给定 array[i] 列中路径的终点。

如果第 …

我一直不成功,在一个动画闪烁的行程CAShapeLayer使用的答案从这个以前的线程,许多搜索后,我可以找到使用动画行程没有其他例子CABasicAnimation.

我想要做的是让我的CAShapeLayer脉冲在两种颜色之间.使用CABasicAnimation不透明效果很好,但是[CABasicAnimation animationWithKeyPath:@"strokeColor"]我不知道,我很欣赏有关如何成功实施的任何建议.

    CABasicAnimation *strokeAnim = [CABasicAnimation animationWithKeyPath:@"strokeColor"];
    strokeAnim.fromValue         = (id) [UIColor blackColor].CGColor;
    strokeAnim.toValue           = (id) [UIColor purpleColor].CGColor;
    strokeAnim.duration          = 1.0;
    strokeAnim.repeatCount       = 0.0;
    strokeAnim.autoreverses      = NO;
    [shapeLayer addAnimation:strokeAnim forKey:@"animateStrokeColor"];

//    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
//    opacityAnimation.fromValue         = [NSNumber numberWithFloat:0.0];
//    opacityAnimation.toValue           = [NSNumber numberWithFloat:1.0];
//    opacityAnimation.duration          = 1.0;
//    opacityAnimation.repeatCount       = 0.0;
//    opacityAnimation.autoreverses      = NO;
//    [shapeLayer addAnimation:opacityAnimation forKey:@"animateOpacity"];

取消注释不透明度动画会导致预期的不透明度淡化.笔画动画不起作用.隐式strokeColor按预期更改动画,但我想记录确认strokeColor可以使用CABasicAnimation显式动画.

更新:具体问题是shapeLayer.path为NULL.纠正修复问题.

我画CGPath的不是矩形或正方形,而是添加CGPath到CAShapeLayer.这CAShapeLayer是从CGPath使用中获得的框架CGPathGetBoundingBox(path).所以它将是矩形或方形.现在我想将渐变颜色设置为图层,但我的路径不是矩形或正方形,因此它不会在整体上均匀地传播渐变颜色CGPath.有没有办法将渐变颜色设置为CGPath或如何设置渐变颜色与角度？

请参考截图了解情况.这里白色表示框架CGPath和绿色,这是我们绘制的CGPath.在底部CGPath你可以看到不均匀分布的白色渐变色CGPath.

CAShapeLayer通过将其笔触颜色设置为红色,我创建了几个点.然后我用一种模式填充了颜色UIImage.我想CAShapeLayer用它的填充图案旋转它UIRotationGestureRecognizer.

我使用过CATransform3DRotate,但它无法正常工作.

CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DRotate(transform, recognizer.rotation, 0.0, 0.0, 1.0);
shapeLayer.transform = transform;

提前致谢

鉴于以下CAShapeLayer是否可以在提示处添加如下图所示的阴影？

我用a UIBezierPath来绘制条形图.

- (CAShapeLayer *)gaugeCircleLayer {

    if (_gaugeCircleLayer == nil) {

        _gaugeCircleLayer = [CAShapeLayer layer];
        _gaugeCircleLayer.lineWidth = self.gaugeWidth;
        _gaugeCircleLayer.fillColor = [UIColor clearColor].CGColor;
        _gaugeCircleLayer.strokeColor = self.gaugeTintColor.CGColor;
        _gaugeCircleLayer.strokeStart = 0.0f;
        _gaugeCircleLayer.strokeEnd = self.value;
        _gaugeCircleLayer.lineCap = kCALineCapRound;
        _gaugeCircleLayer.masksToBounds = NO;
        _gaugeCircleLayer.cornerRadius = 8.0;
        _gaugeCircleLayer.shadowRadius = 8.0;
        _gaugeCircleLayer.shadowColor = [UIColor blackColor].CGColor;
        _gaugeCircleLayer.shadowOpacity = 0.5;
        _gaugeCircleLayer.shadowOffset = CGSizeMake(0.0, 0.0);
        _gaugeCircleLayer.path = [self circlPathForCurrentGaugeStyle].CGPath;
    }

    return _gaugeCircleLayer;
}

它需要应用于此UIBezierPath:

- (UIBezierPath *)insideCirclePath {

    CGPoint arcCenter = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    UIBezierPath *path = [UIBezierPath …

这是我的尝试:

func round() {
    let width = bounds.width < bounds.height ? bounds.width : bounds.height
    let mask = CAShapeLayer()
    mask.path = UIBezierPath(ovalInRect: CGRectMake(bounds.midX - width / 2, bounds.midY - width / 2, width, width)).CGPath

    self.layer.mask = mask

    // add border
    let frameLayer = CAShapeLayer()
    frameLayer.path = mask.path
    frameLayer.lineWidth = 4.0
    frameLayer.strokeColor = UIColor.whiteColor().CGColor
    frameLayer.fillColor = nil

    self.layer.addSublayer(frameLayer)
}

它适用于iphone 6模拟器(故事板的大小为4.7),但在5s和6+上它看起来很奇怪:

这是一个自动布局问题吗？没有边框,自动布局工作正常.这是我第一次使用面具,所以我不确定我所做的是否正确.

round函数被调用viewDidLayoutSubviews.

有什么想法吗？

我附上了查看图片.我想在购买按钮和上面的航班信息视图之间实现底部的小切.

我有一个循环的UIBezierPath和2x CAShapeLayers,用于显示我的某个应用程序中特定里程碑的进度.

问题:当我通过CABasicAnimation为进度设置动画时,进度超出了应该做的范围.

上下文:我在milestonesCollectionView中的自定义单元格的子视图中显示此循环视图.

查看层次结构: CollectionView>自定义单元格>子视图> drawRect以在其中创建和添加图层.

我的代码:

定制单元格

在我的自定义单元格中,我设置了currentProgress(现在硬编码用于测试目的)

let placeHolderForProgressView: CircularTrackerView = {
        let ctv = CircularTrackerView()
        ctv.backgroundColor = UIColor.clear
        ctv.translatesAutoresizingMaskIntoConstraints = false
        ctv.currentProgress = 0.5  //set to 0.5 to get a circle filled at 50%
        return ctv
    }()

在CircularTrackerView里面

//每当设置单元格时,我都会为进度设置动画,并将currentProgress提供给progressView

var currentProgress: CGFloat = 0.0 {
        didSet {
            animate(to: currentProgress)
            let percent = Int(currentProgress * 100)
            percentLbl.text = "\(percent)%"
        }
    } 


let shapeLayer = CAShapeLayer() //displays the progress 
let trackLayer = CAShapeLayer() //background of the …