joncardasis/ChromaColorPicker
1
1
Fork 0
mirror of https://github.com/joncardasis/ChromaColorPicker.git synced 2024-11-25 03:32:05 +03:00
Code Issues Projects Releases Wiki Activity

Added rounded mask to color wheel view to give nice rounded corners to the otherwise sharp-edged generated ciimage

Browse Source
This commit is contained in:
Jon Cardasis 2019-11-08 18:32:51 -05:00
parent 8bf9b34f9b
commit 26cd07fb83
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Example/ViewController.swift
View File

@ -100,7 +100,6 @@ extension ViewController: ChromaColorPickerDelegate {
// on the handle and change its tintColor. // on the handle and change its tintColor.
if handle === homeHandle, let imageView = homeHandle.accessoryView as? UIImageView { if handle === homeHandle, let imageView = homeHandle.accessoryView as? UIImageView {
let colorIsBright = color.isLight let colorIsBright = color.isLight
print(color.lightness)
UIView.animate(withDuration: 0.2, animations: { UIView.animate(withDuration: 0.2, animations: {
imageView.tintColor = colorIsBright ? .black : .white imageView.tintColor = colorIsBright ? .black : .white

26
Source/ColorWheelView.swift
View File

@ -8,6 +8,10 @@
import UIKit import UIKit
/// This value is used to expand the imageView's bounds and then mask back to its normal size
/// such that any displayed image may have perfectly rounded corners.
private let defaultImageViewCurveInset: CGFloat = 1.0
public class ColorWheelView: UIView { public class ColorWheelView: UIView {
public override init(frame: CGRect) { public override init(frame: CGRect) {
@ -26,11 +30,18 @@ public class ColorWheelView: UIView {
layer.cornerRadius = radius layer.cornerRadius = radius
let screenScale: CGFloat = UIScreen.main.scale let screenScale: CGFloat = UIScreen.main.scale
if let colorWheelImage = makeColorWheelImage(radius: radius * screenScale) { if let colorWheelImage: CIImage = makeColorWheelImage(radius: radius * screenScale) {
imageView.image = UIImage(ciImage: colorWheelImage, scale: screenScale, orientation: .up) imageView.image = UIImage(ciImage: colorWheelImage, scale: screenScale, orientation: .up)
} }
// Mask imageview so the generated colorwheel has smooth edges.
// We mask the imageview instead of image so we get the benefits of using the CIImage
// rendering directly on the GPU.
imageViewMask.frame = imageView.bounds.insetBy(dx: defaultImageViewCurveInset, dy: defaultImageViewCurveInset)
imageViewMask.layer.cornerRadius = imageViewMask.bounds.width / 2.0
imageView.mask = imageViewMask
} }
public var radius: CGFloat { public var radius: CGFloat {
return max(bounds.width, bounds.height) / 2.0 return max(bounds.width, bounds.height) / 2.0
} }
@ -119,6 +130,7 @@ public class ColorWheelView: UIView {
// MARK: - Private // MARK: - Private
internal let imageView = UIImageView() internal let imageView = UIImageView()
internal let imageViewMask = UIView()
internal func commonInit() { internal func commonInit() {
backgroundColor = .clear backgroundColor = .clear
@ -127,14 +139,16 @@ public class ColorWheelView: UIView {
internal func setupImageView() { internal func setupImageView() {
imageView.contentMode = .scaleAspectFit imageView.contentMode = .scaleAspectFit
imageViewMask.backgroundColor = .black
imageView.translatesAutoresizingMaskIntoConstraints = false imageView.translatesAutoresizingMaskIntoConstraints = false
addSubview(imageView) addSubview(imageView)
NSLayoutConstraint.activate([ NSLayoutConstraint.activate([
imageView.leadingAnchor.constraint(equalTo: leadingAnchor), imageView.widthAnchor.constraint(equalTo: widthAnchor, constant: defaultImageViewCurveInset * 2),
imageView.trailingAnchor.constraint(equalTo: trailingAnchor), imageView.heightAnchor.constraint(equalTo: heightAnchor, constant: defaultImageViewCurveInset * 2),
imageView.topAnchor.constraint(equalTo: topAnchor), imageView.centerXAnchor.constraint(equalTo: centerXAnchor),
imageView.bottomAnchor.constraint(equalTo: bottomAnchor), imageView.centerYAnchor.constraint(equalTo: centerYAnchor),
]) ])
} }