iOS Quartz/CoreGraphics vẽ nét vẽ lông

Question

Tôi vẽ đường dẫn vào CGContext theo một tập hợp các điểm được thu thập từ người dùng. Dường như có một số jitter đầu vào ngẫu nhiên làm cho một số cạnh của đường trông bị lởm chởm. Tôi nghĩ một chiếc lông nhỏ sẽ giải quyết vấn đề này. Nếu tôi đang sử dụng OpenGL ES tôi chỉ đơn giản là sẽ áp dụng một lông để sprite tôi đang vuốt ve con đường với; tuy nhiên, dự án này đòi hỏi tôi phải ở lại Quartz/CoreGraphics và tôi dường như không thể tìm ra một giải pháp tương tự.

Tôi đã thử vẽ 5 dòng với mỗi dòng hơi lớn hơn và minh bạch hơn để gần đúng với lông. Điều này tạo ra một kết quả xấu và làm chậm hiệu suất đáng chú ý.

Đây là dòng mã vẽ:

CGContextMoveToPoint(UIGraphicsGetCurrentContext(),((int)lastPostionDrawing1.x), (((int)lastPostionDrawing1.y))); 
CGContextAddCurveToPoint(UIGraphicsGetCurrentContext(), ctrl1_x, ctrl1_y, ctrl2_x, ctrl2_y, lastPostionDrawing2.x, lastPostionDrawing2.y; 
[currentPath addCurveToPoint:CGPointMake(lastPostionDrawing2.x-((int)furthestLeft.x)+((int)penSize), lastPostionDrawing2.y controlPoint1:CGPointMake(ctrl1_x, ctrl1_y) controlPoint2:CGPointMake(ctrl2_x, ctrl2_y)]; 

Answer 1

Tôi sẽ đi trước và cho rằng CGContext của bạn vẫn có anti-aliasing bật, nhưng nếu không, thì đó là điều hiển nhiên đầu tiên nghĩ đến thử , như nhận xét của @ Davyd cho thấy: CGContextSetShouldAntialias là chức năng quan tâm.

Giả sử đó không phải là vấn đề và dòng đang bị chống răng cưa theo ngữ cảnh, nhưng bạn vẫn muốn thứ gì đó 'mềm hơn'. Tôi có thể nghĩ ra một vài cách để làm điều này mà hy vọng sẽ nhanh hơn vuốt ve 5 lần.

Trước tiên, bạn có thể thử lấy đường nét (ví dụ: đường dẫn mô tả đường viền của đường đi hiện tại) bằng cách sử dụng CGContextReplacePathWithStrokedPath, sau đó bạn có thể điền đường dẫn này với một gradient (hoặc bất kỳ kỹ thuật điền nào khác .) Điều này sẽ làm việc tốt cho các đường thẳng, nhưng sẽ không dễ dàng đối với các đường cong (vì gradient đang lấp đầy khu vực của đường nét vuốt, và sẽ là tuyến tính hoặc hướng tâm.)

Một tùy chọn ít rõ ràng hơn , có thể lạm dụng bản vẽ bóng của CG cho mục đích này. Các chức năng bạn muốn tìm kiếm là: CGContextSetShadowWithColor Dưới đây là phương pháp:

• Save the GState: CGContextSaveGState
• Lấy khung giới hạn của đường nét gốc
• Sao chép đường dẫn, dịch nó ra khỏi bản thân bằng cách 2.0 * bbox.width sử dụng CGPathCreateCopyByTransformingPath (lưu ý: sử dụng theo hướng X chỉ, như vậy bạn không cần phải lo lắng về flips trong bối cảnh)
• Clip bối cảnh vào bbox gốc sử dụng CGContextClipToRect
• Đặt một cái bóng trên bối cảnh wi th CGContextSetShadowWithColor:
  • Một số mờ tối thiểu (Bắt đầu bằng 0,5 và đi từ đó. Tham số mờ là phi tuyến tính và IME là kiểu hoạt động đoán và kiểm tra)
  • Mức chênh lệch bằng -2,0 * chiều rộng bbox và 0,0 chiều cao, được chia tỷ lệ thành không gian cơ sở. Điều này sẽ gây khó khăn để tìm ra, nhưng giả sử bạn không thêm biến đổi quy mô của riêng bạn, hệ số tỷ lệ sẽ là 1.0 hoặc 2.0, vì vậy thực tế nói, bạn sẽ thiết lập offset.width của -2.0 * bbox.width hoặc -4.0 * bbox.width)
  • Màu sắc bạn chọn.
• Làm theo đường dẫn đã dịch.
• Pop GState CGContextRestoreGState

này nên để lại cho bạn với "chỉ là" cái bóng, mà bạn hy vọng có thể điều chỉnh để đạt được kết quả mong muốn.

Tất cả những gì đã nói, hiệu suất vẽ bóng của CG là IME, ít hơn hoàn toàn tuyệt vời và ít hoàn toàn xác định. Tôi hy vọng nó sẽ nhanh hơn so với vuốt ve con đường 5 lần với 5 nét khác nhau, nhưng không quá áp đảo như vậy.

Nó sẽ đi xuống đến bao nhiêu đạt được hiệu ứng này là giá trị cho bạn.