在 UIView 中绘制滚动线答案

【问题标题】：Draw a rolling line in a UIView在 UIView 中绘制滚动线
【发布时间】：2017-02-07 09:49:01
【问题描述】：

我在 IB 中有以下视图（使用 Swift 3）

绿色的 UIImageView 嵌套在 UIView 中。

当我按下开始时，我想画一条线，指示当前正在录制的声音级别。

我对 Core Graphics 非常陌生，并且在 SO 中找到了以下代码，它解释了如何在 UYIImageView 上绘图。

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0)

    plotArea.image?.draw(in: view.bounds)
    let context = UIGraphicsGetCurrentContext()

    context?.move(to: fromPoint)
    context?.addLine(to: toPoint)

    context?.setLineCap(CGLineCap.round)
    context?.setLineWidth(brushWidth)
    context?.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
    context?.setBlendMode(CGBlendMode.normal)
    context?.strokePath()

    plotArea.image = UIGraphicsGetImageFromCurrentImageContext()
    plotArea.alpha = opacity
    UIGraphicsEndImageContext()
}

当被调用时，这会在绿色的 UIImageView（称为 plotArea）内绘制一条漂亮的线。我想要发生的是线在 UIView（称为 rangeView）的顶部绘制（向用户表明，当线超过绿色图像视图时，他处于正确的级别）谁能指出我重构我的 drawLine 函数以在 UIView 而不是 UIImageView 上绘图

当我解决这个问题时，我还需要连续绘制线 - 这意味着当它到达视图的 2/3 时，它应该继续在那个固定的 x 坐标处绘制，然后消失到左侧（就像轧制线）

现在我使用这个函数每 0.1 秒调用一次 drawLine 函数：

func animatePin() {
    let viewHeight = self.rangeView.frame.height
    let ypos = viewHeight/maxDb*CGFloat(self.calculateLevel())
    let p = CGPoint(x:self.lastPoint.x+10, y: ypos)
    self.drawLine(from: self.lastPoint, to: p)
    self.lastPoint = p
}

编辑：通过调用此方法解决了第一部分：

func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = lineColor.cgColor
    shapeLayer.lineWidth = 1.0

    view.layer.addSublayer(shapeLayer)
}

EDIT2 - 通过将函数重构为，设法让行“滚动”

func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

        let path = UIBezierPath()
        path.move(to: start)
        path.addLine(to: end)
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.strokeColor = lineColor.cgColor
        shapeLayer.lineWidth = 1.0
        if(end.x > view.frame.width*0.95){

            let newRect = CGRect(x: view.frame.origin.x-10, y: view.frame.origin.y, width: view.frame.width+10, height: view.frame.height)
            view.frame = newRect
        }
        if(start != CGPoint.zero){
           view.layer.addSublayer(shapeLayer)
        }

    }

【问题讨论】：

标签： swift3 ios10 xcode8.2

【解决方案1】：

画线功能：

func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

        //create a path

        let path = UIBezierPath()
        path.move(to: start)
        path.addLine(to: end)

         //create a shape, and add the path to it

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.strokeColor = lineColor.cgColor
        shapeLayer.lineWidth = 1.0

        //if we are at the end of the view, move the view left by 10, and add the 10 to the right, making it roll

        if(end.x > view.frame.width*0.95){

            let newRect = CGRect(x: view.frame.origin.x-10, y: view.frame.origin.y, width: view.frame.width+10, height: view.frame.height)
            view.frame = newRect
        }

        //wait till there iss data to show, so we don't get a huge spike from 0.0

        if(start != CGPoint.zero){
           view.layer.addSublayer(shapeLayer)
        }

    }

【讨论】：