macos - CustomView parece extraño en mi proyecto, pero bueno en el patio de recreo

swift cocoa

Question

Así que he creado un NSButton personalizado para tener un hermoso botón de NSButton , pero estoy experimentando un error muy extraño.

Mi botón de radio se ve bien en el patio de recreo, pero cuando lo agrego a mi proyecto, parece extraño.

Aquí hay capturas de pantalla:

Izquierda = en el patio de recreo .
Derecha = en mi proyecto .

Como puede ver, a la derecha (en mi proyecto), el punto azul se ve horrible , no es liso , lo mismo para el círculo blanco (es menos visible con el fondo oscuro).

En mi proyecto, NSShadow en mi CALayer también se voltea, incluso si la propiedad geometryFlipped en mi CALayer principal (_containerLayer_) se establece en true . -> CORREGIDO: ver respuesta @Bannings.

import AppKit
extension NSColor {
static func colorWithDecimal(deviceRed deviceRed: Int, deviceGreen: Int, deviceBlue: Int, alpha: Float) -> NSColor {
return NSColor(
deviceRed: CGFloat(Double(deviceRed)/255.0),
green: CGFloat(Double(deviceGreen)/255.0),
blue: CGFloat(Double(deviceBlue)/255.0),
alpha: CGFloat(alpha)
)
}
}
extension NSBezierPath {
var CGPath: CGPathRef {
return self.toCGPath()
}
/// Transforms the NSBezierPath into a CGPathRef
///
/// :returns: The transformed NSBezierPath
private func toCGPath() -> CGPathRef {
// Create path
let path = CGPathCreateMutable()
var points = UnsafeMutablePointer<NSPoint>.alloc(3)
let numElements = self.elementCount
if numElements > 0 {
var didClosePath = true
for index in 0..<numElements {
let pathType = self.elementAtIndex(index, associatedPoints: points)
switch pathType {
case .MoveToBezierPathElement:
CGPathMoveToPoint(path, nil, points[0].x, points[0].y)
case .LineToBezierPathElement:
CGPathAddLineToPoint(path, nil, points[0].x, points[0].y)
didClosePath = false
case .CurveToBezierPathElement:
CGPathAddCurveToPoint(path, nil, points[0].x, points[0].y, points[1].x, points[1].y, points[2].x, points[2].y)
didClosePath = false
case .ClosePathBezierPathElement:
CGPathCloseSubpath(path)
didClosePath = true
}
}
if !didClosePath { CGPathCloseSubpath(path) }
}
points.dealloc(3)
return path
}
}
class RadioButton: NSButton {
private var containerLayer: CALayer!
private var backgroundLayer: CALayer!
private var dotLayer: CALayer!
private var hoverLayer: CALayer!
required init?(coder: NSCoder) {
super.init(coder: coder)
self.setupLayers(radioButtonFrame: CGRectZero)
}
override init(frame frameRect: NSRect) {
super.init(frame: frameRect)
let radioButtonFrame = CGRect(
x: 0,
y: 0,
width: frameRect.height,
height: frameRect.height
)
self.setupLayers(radioButtonFrame: radioButtonFrame)
}
override func drawRect(dirtyRect: NSRect) {
}
private func setupLayers(radioButtonFrame radioButtonFrame: CGRect) {
//// Enable view layer
self.wantsLayer = true
self.setupBackgroundLayer(radioButtonFrame)
self.setupDotLayer(radioButtonFrame)
self.setupHoverLayer(radioButtonFrame)
self.setupContainerLayer(radioButtonFrame)
}
private func setupContainerLayer(frame: CGRect) {
self.containerLayer = CALayer()
self.containerLayer.frame = frame
self.containerLayer.geometryFlipped = true
//// Mask
let mask = CAShapeLayer()
mask.path = NSBezierPath(ovalInRect: frame).CGPath
mask.fillColor = NSColor.blackColor().CGColor
self.containerLayer.mask = mask
self.containerLayer.addSublayer(self.backgroundLayer)
self.containerLayer.addSublayer(self.dotLayer)
self.containerLayer.addSublayer(self.hoverLayer)
self.layer!.addSublayer(self.containerLayer)
}
private func setupBackgroundLayer(frame: CGRect) {
self.backgroundLayer = CALayer()
self.backgroundLayer.frame = frame
self.backgroundLayer.backgroundColor = NSColor.whiteColor().CGColor
}
private func setupDotLayer(frame: CGRect) {
let dotFrame = frame.rectByInsetting(dx: 6, dy: 6)
let maskFrame = CGRect(origin: CGPointZero, size: dotFrame.size)
self.dotLayer = CALayer()
self.dotLayer.frame = dotFrame
self.dotLayer.shadowColor = NSColor.colorWithDecimal(deviceRed: 46, deviceGreen: 146, deviceBlue: 255, alpha: 1.0).CGColor
self.dotLayer.shadowOffset = CGSize(width: 0, height: 2)
self.dotLayer.shadowOpacity = 0.4
self.dotLayer.shadowRadius = 2.0
//// Mask
let maskLayer = CAShapeLayer()
maskLayer.path = NSBezierPath(ovalInRect: maskFrame).CGPath
maskLayer.fillColor = NSColor.blackColor().CGColor
//// Gradient
let gradientLayer = CAGradientLayer()
gradientLayer.frame = CGRect(origin: CGPointZero, size: dotFrame.size)
gradientLayer.colors = [
NSColor.colorWithDecimal(deviceRed: 29, deviceGreen: 114, deviceBlue: 253, alpha: 1.0).CGColor,
NSColor.colorWithDecimal(deviceRed: 59, deviceGreen: 154, deviceBlue: 255, alpha: 1.0).CGColor
]
gradientLayer.mask = maskLayer
//// Inner Stroke
let strokeLayer = CAShapeLayer()
strokeLayer.path = NSBezierPath(ovalInRect: maskFrame.rectByInsetting(dx: 0.5, dy: 0.5)).CGPath
strokeLayer.fillColor = NSColor.clearColor().CGColor
strokeLayer.strokeColor = NSColor.blackColor().colorWithAlphaComponent(0.12).CGColor
strokeLayer.lineWidth = 1.0
self.dotLayer.addSublayer(gradientLayer)
self.dotLayer.addSublayer(strokeLayer)
}
private func setupHoverLayer(frame: CGRect) {
self.hoverLayer = CALayer()
self.hoverLayer.frame = frame
//// Inner Shadow
let innerShadowLayer = CAShapeLayer()
let ovalPath = NSBezierPath(ovalInRect: frame.rectByInsetting(dx: -10, dy: -10))
let cutout = NSBezierPath(ovalInRect: frame.rectByInsetting(dx: -1, dy: -1)).bezierPathByReversingPath
ovalPath.appendBezierPath(cutout)
innerShadowLayer.path = ovalPath.CGPath
innerShadowLayer.shadowColor = NSColor.blackColor().CGColor
innerShadowLayer.shadowOpacity = 0.2
innerShadowLayer.shadowRadius = 2.0
innerShadowLayer.shadowOffset = CGSize(width: 0, height: 2)
self.hoverLayer.addSublayer(innerShadowLayer)
//// Inner Stroke
let strokeLayer = CAShapeLayer()
strokeLayer.path = NSBezierPath(ovalInRect: frame.rectByInsetting(dx: -0.5, dy: -0.5)).CGPath
strokeLayer.fillColor = NSColor.clearColor().CGColor
strokeLayer.strokeColor = NSColor.blackColor().colorWithAlphaComponent(0.22).CGColor
strokeLayer.lineWidth = 2.0
self.hoverLayer.addSublayer(strokeLayer)
}
}
let rbFrame = NSRect(
x: 87,
y: 37,
width: 26,
height: 26
)
let viewFrame = CGRect(
x: 0,
y: 0,
width: 200,
height: 100
)
let view = NSView(frame: viewFrame)
view.wantsLayer = true
view.layer!.backgroundColor = NSColor.colorWithDecimal(deviceRed: 40, deviceGreen: 40, deviceBlue: 40, alpha: 1.0).CGColor
let rb = RadioButton(frame: rbFrame)
view.addSubview(rb)

Estoy usando exactamente el mismo código en mi proyecto y en el patio de recreo.
Aquí hay un zip que contiene el patio de recreo y el proyecto.

Para que quede claro: quiero saber por qué los dibujos circulares son suaves en el patio de recreo pero no en los proyectos. (Ver la respuesta de @Bannings, es más obvio con sus capturas de pantalla)

Answer 1

Lo arreglé por reemplazar este código de línea:

self.dotLayer.shadowOffset = CGSize(width: 0, height: 2)

con:

self.dotLayer.shadowOffset = CGSize(width: 0, height: -2)

y reemplace innerShadowLayer.shadowOffset = CGSize(width: 0, height: 2) con:

innerShadowLayer.shadowOffset = CGSize(width: 0, height: -2)

Creo que obtendrás el mismo resultado así:

Izquierda = en el patio de recreo .
Derecha = en mi proyecto .

Parece que el Playground muestra la ruta Bezier en el sistema de coordenadas LLO, puede visitar el enlace: https://forums.developer.apple.com/message/39277#39277

Answer 2

Tomó tiempo pero creo que finalmente descubrí todo o casi todo.

1. Primero algo de ciencia: los círculos o arcos no se pueden representar a través de las curvas de Bézier. Esa es una propiedad de las curvas de Bézier como se indica aquí: https://en.wikipedia.org/wiki/Bézier_curve

   Por lo tanto, al usar NSBezierPath(ovalInRect:) , de hecho estás generando una curva de Bézier que se aproxima a un círculo. Esto puede conducir a una diferencia en apariencia y a cómo se renderiza la forma. Aún así, esto no debería ser un problema en nuestro caso porque la diferencia está entre dos curvas de Bézier (la de Playground y la de un proyecto de OS X real), pero aún así me parece interesante observar en caso de que creas que el círculo no es lo suficientemente perfecto .

2. En segundo lugar, como se indica en esta pregunta (Cómo dibujar un círculo suave con CAShapeLayer y UIBezierPath), existen diferencias en la forma en que se aplicará el antialiasing a su ruta, dependiendo de dónde se usa la ruta. NSView''s drawRect: siendo el lugar donde el antialiasing de la ruta será el mejor y CAShapeLayer será el peor .

   También encontré que la documentación de CAShapeLayer tiene una nota que dice esto:

   La rasterización de formas puede favorecer la velocidad sobre la precisión. Por ejemplo, los píxeles con múltiples segmentos de ruta de intersección pueden no dar resultados exactos.

   La respuesta de Glen Low a la pregunta que mencioné anteriormente parece funcionar bien en nuestro caso:

   layer.rasterizationScale = 2.0 * self.window!.screen!.backingScaleFactor;
   layer.shouldRasterize = true;

   Vea las diferencias aquí:

   Otra solución es aprovechar los radios de esquina en lugar de los caminos de Bézier para simular un círculo, y esta vez es bastante preciso:

3. Por último, mi suposición sobre la diferencia entre Playground y el proyecto real OS X es que Apple configuró Playground para que algunas optimizaciones se apaguen, por lo que la ruta, incluso pensada con CAShapeLayer obtiene el mejor anti-aliasing posible. Después de todo lo que está haciendo prototipos, las actuaciones no son realmente importantes, especialmente en las operaciones de dibujo.

   No estoy seguro de estar en lo cierto, pero creo que no sería sorprendente. Si alguien tiene alguna fuente, felizmente la agregaré.

Para mí, la mejor solución si realmente necesitas el mejor círculo posible es usar radios de esquina.

También según lo indicado por @Bannings en otra respuesta a esta publicación. Las sombras se invierten debido a que el patio de recreo se renderiza en un sistema de coordenadas diferente. Vea su respuesta para arreglar esto.