快速繪製應用程序 - 基於滑塊改變線寬值

Question

我試圖改變我的繪圖應用程序的線寬使用滑塊，但每次我改變滑塊並重畫一條線，所有線條在屏幕上更改爲當前選定的線寬。我一定做錯了什麼。

var layers:[Array<CGPoint>] = [] 
var layerIndex = 0 
var sliderValue: CGFloat = 3.0 
var strokeInfo:[[String:Any]] = [] 

//change the slider 
func slider(value: CGFloat) { 
    sliderValue = value 
    print("Slider value is \(sliderValue)") 
} 

//on new touch, start a new array (layer) of points 
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { 
    var points:[CGPoint] = [] 
    layers.append(points) 
    var info = Dictionary<String,Any>() 
    info["line"] = sliderValue 
    strokeInfo.insert(info, at: layerIndex) 
    let pt = (touches.first!).location(in: self) 
    points.append(pt) 
} 


//add each point to the correct array as the finger moves 
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { 
    let pt = (touches.first!).location(in: self) 
    layers[layerIndex].append(pt) 
    self.setNeedsDisplay() 
} 


override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { 
    print("layer \(layerIndex) now has \(layers[layerIndex].count)") 
    layerIndex += 1 
} 

override func draw(_ rect: CGRect) { 
    //get pointer to view 
    let context = UIGraphicsGetCurrentContext() 
    context?.clear(rect) 

    for (index, element) in strokeInfo.enumerated() { 
     if index == layerIndex { 
      context?.setLineWidth(element["line"] as! CGFloat) 
     } 
    } 

    //loop through the layers if any 
    for points in layers { 

     UIColor.cyan.set() 

     //loop through each layer's point values 
     if points.count - 1 > 0 { 

     for i in 0 ..< points.count-1 { 

      let pt1 = points[i] as CGPoint 
      let pt2 = points[i + 1] as CGPoint 

      context?.setLineCap(.round) 
      context?.move(to: pt1) 
      context?.addLine(to: pt2) 
      context?.strokePath() 
     } 
     } 
    } 
} 

Answer 1

您正在更改上下文的線寬和線條寬度。圖形上下文的設置會影響與上下文關聯的整個路徑。

如果您想繪製不同的路徑，我建議您使用多個UIBezierPath對象，每個對象都有自己的寬度，顏色和線條上限設置。你可以在drawRect方法中繪製你的貝塞爾路徑。

或者，您可以使用多個CAShapeLayers，每個都有不同的路徑繪製設置，並將它們堆疊在彼此之上以獲取所需的合成圖像。