创建向上箭头

Question

我正在尝试显示我选择的页面菜单的箭头。但是，我画的箭头并没有像我预期的那样显示。它需要起来

这是我的代码：

class ArrowView : UIView {

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.clear
}

var rect: CGRect!
var arrorBackgroundColor: UIColor?

var midX: CGFloat { return rect.midX }
var midY: CGFloat { return rect.midY }
var maxX: CGFloat { return rect.maxX }
var maxY: CGFloat { return rect.maxY }

override func draw(_ rect: CGRect) {
    self.rect = rect

    let ctx = UIGraphicsGetCurrentContext()

    ctx?.beginPath()
    ctx?.move(to: CGPoint(x: 0, y: 0))

//        Old code which the arrow was down
//        ctx?.addQuadCurve(to: CGPoint(x:maxX * 0.2 , y: maxY * 0.2), control: CGPoint(x: maxX * 0.12, y: 0))
//        ctx?.addLine(to: CGPoint(x: midX - maxX * 0.05, y: maxY * 0.9))
//        ctx?.addQuadCurve(to: CGPoint(x: midX + maxX * 0.05, y: maxY * 0.9), control: CGPoint(x: midX, y: maxY))
//        ctx?.addLine(to: CGPoint(x: maxX * 0.8, y: maxY * 0.2))
//        ctx?.addQuadCurve(to: CGPoint(x: maxX, y: 0), control: CGPoint(x: maxX * 0.88, y: 0))

    ctx?.addLine(to: CGPoint(x: midX - maxX * 106.5, y: maxY * 65.5))
    ctx?.addLine(to: CGPoint(x: maxX * 128.5, y: maxY * 88.5))
    ctx?.addLine(to: CGPoint(x: 85.5, y: 88.5))
    ctx?.closePath()

    ctx?.setFillColor((arrorBackgroundColor?.cgColor)!)
    ctx?.fillPath();
}

}

这里是怎么回事

其实我正在尝试自定义这个库：https://github.com/azurechen/ACTabScrollView

并尝试像这样存档：https://puu.sh/viWwc/35a6bddb0d.png

由于我是 UIBezierPath 的初学者，因此感谢您提供任何帮助。

Answer 1

我不明白你对addLine(to:) 的调用中的常量，我认为ArrowView 的实现是不必要的奇怪。

您似乎对 midX/maxX/... 感到困惑（或者我现在太密集了，无法理解）。 CGRect documentation 应该会有所帮助。

我认为ArrowView 的原作者（来自您链接到的github 项目）在设置箭头位置时不知何故混淆了bounds 和frame。哦，他还滥用了draw(_:)中的rect参数，见the docs。具体来说（强调我的）：

矩形
需要更新的视图边界部分。这 第一次绘制视图时，这个矩形通常是整个 您视图的可见边界。 但是，在随后的绘图过程中 操作，矩形可能只指定视图的一部分。

另外，ACTabScrollView 似乎只在某些时候有效。在我的浅层实验中，它大部分时间都会弄乱视图定位。

无论如何，要实现一个简单的UIView 用于向上的箭头，这是可行的：

class ArrowView : UIView {
    var arrorBackgroundColor: UIColor = UIColor.red

    override func draw(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }

        // Sample to really fill the background before drawing the arrow.    
        ctx.setFillColor(UIColor.yellow.cgColor)
        ctx.fill(bounds)

        ctx.beginPath()
        ctx.move(to: CGPoint(x: 0, y: bounds.maxY))
        ctx.addLine(to: CGPoint(x: bounds.midX, y: bounds.minY))
        ctx.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        ctx.addLine(to: CGPoint(x: 0, y: bounds.maxY))
        ctx.closePath()

        ctx.setFillColor(arrorBackgroundColor.cgColor)
        ctx.fillPath()
    }
}

核心使用视图的bounds 来计算坐标。

来自the UIView docs：

视图的几何结构由其框架、边界和中心定义 特性。框架定义视图的原点和尺寸 其superview的坐标系，常用于 布局以调整视图的大小或位置。中心物业 可以用来调整视图的位置而不改变它的 尺寸。边界定义视图的内部尺寸，因为它 看到它们并且几乎只在自定义绘图代码中使用。这 框架的大小部分和边界矩形耦合在一起 这样更改任一矩形的大小都会更新 两者都有。

我认为arrorBackgroundColor 真的应该被称为arrowColor（因为它被用作箭头的颜色）并且您可能还有另一个属性arrorBackgroundColor 确实是用于背景。我添加了两条用黄色填充背景的线条作为示例。