调整窗口大小时自定义视图损坏（可可）

Question

我的自定义视图遇到了这个奇怪的错误。自定义视图应该显示评级分布的米。它被添加到大纲视图的单元格视图中。

当我调整窗口大小时，自定义视图不知何故被压扁并且看起来损坏了。我已经粘贴了下面自定义视图的drawRect。

override func drawRect(r: NSRect) {
    super.drawRect(r)

    var goodRect: NSRect?
    var okRect: NSRect?
    var badRect: NSRect?
    let barHeight = CGFloat(10.0)

    if  self.goodPercent != 0.0 {
        goodRect = NSRect(x: 0, y: 0, width: r.width * CGFloat(goodPercent), height: barHeight)
        let goodPath = NSBezierPath(roundedRect:  goodRect!, xRadius: 6, yRadius: 6)
        RatingDistributionView.goodColor.setFill()
        goodPath.fill()
    }

    if self.okPercent != 0.0 {
        let okX = CGFloat(goodRect?.width ?? 0.0)
        okRect = NSRect(x: okX, y: 0, width: r.width * CGFloat(okPercent), height: barHeight)
        let okPath = NSBezierPath(roundedRect:  okRect!, xRadius: 6, yRadius: 6)

        RatingDistributionView.okColor.setFill()
        okPath.fill()
    }

    if self.badPercent != 0.0 {
        var badX: CGFloat
        //Cases:
        //Good persent and OK present - badX = okRect.x + okRect.width
        //Good persent and OK missing - badX = goodRect.x + goodRect.width
        //Good missing and OK present - badX = okRect.x + okRect.width
        //Both missing -

        if okRect !=  nil {
            badX = okRect!.origin.x + okRect!.width
        }else if goodRect != nil {
            badX = goodRect!.origin.x + goodRect!.width
        } else {
            badX = 0.0
        }

        badRect = NSRect(x: badX, y: 0, width: r.width * CGFloat(badPercent), height: barHeight)
        let badPath = NSBezierPath(roundedRect:  badRect!, xRadius: 6, yRadius: 6)
        RatingDistributionView.badColor.setFill()
        badPath.fill()
    }

    //Draw dividers
    let divWidth = CGFloat(6.75)

    if self.goodPercent != 0.0 && (self.okPercent != 0.0 || self.badPercent != 0.0) {
        let divX = goodRect!.origin.x + goodRect!.width
        let divRect = NSRect(x: divX - (divWidth / 2.0), y: 0.0, width: divWidth, height: barHeight)
        let divPath = NSBezierPath(roundedRect: divRect, xRadius: 0, yRadius: 0)
        NSColor.whiteColor().setFill()
        divPath.fill()
    }

    if self.okPercent != 0.0 && self.badPercent != 0.0 {
        let divX = okRect!.origin.x + okRect!.width
        let divRect = NSRect(x: divX - (divWidth / 2.0), y: 0.0, width: divWidth, height: barHeight)
        let divPath = NSBezierPath(roundedRect: divRect, xRadius: 0, yRadius: 0)
        NSColor.whiteColor().setFill()
        divPath.fill()
    }
}

Answer 1

您的问题的另一种解决方案是使用 NSView。您可以拥有一个带有圆角的容器视图，然后在该容器中绘制子视图（红色、橙色、绿色）。像这样；

我已经为它写了一个类，你可以根据你的要求自定义；

public class CProgressView:NSView {

    private lazy var goodView:NSView = {
        let viw:NSView = NSView(frame: NSRect.zero);
        viw.layer = CALayer();
        viw.layer?.backgroundColor = NSColor.greenColor().CGColor;
        self.addSubview(viw)
        return viw;
    } ();

    private lazy var okView:NSView = {
        let viw:NSView = NSView(frame: NSRect.zero);
        viw.layer = CALayer();
        viw.layer?.backgroundColor = NSColor.orangeColor().CGColor;
        self.addSubview(viw)
        return viw;
    } ();

    private lazy var badView:NSView = {
        let viw:NSView = NSView(frame: NSRect.zero);
        viw.layer = CALayer();
        viw.layer?.backgroundColor = NSColor.redColor().CGColor;
        self.addSubview(viw)
        return viw;
    } ();

    private var _goodProgress:CGFloat = 33;
    private var _okProgress:CGFloat = 33;
    private var _badProgress:CGFloat = 34;

    private var goodViewFrame:NSRect {
        get {
            let rect:NSRect = NSRect(x: 0, y: 0, width: (self.frame.size.width * (_goodProgress / 100.0)), height: self.frame.size.height);
            return rect;
        }
    }

    private var okViewFrame:NSRect {
        get {
            let rect:NSRect = NSRect(x: self.goodViewFrame.size.width, y: 0, width: (self.frame.size.width * (_okProgress / 100.0)), height: self.frame.size.height);
            return rect;
        }
    }


    private var badViewFrame:NSRect {
        get {
            let width:CGFloat = (self.frame.size.width * (_badProgress / 100.0));
            let rect:NSRect = NSRect(x: self.frame.size.width - width, y: 0, width: width, height: self.frame.size.height);
            return rect;
        }
    }

    override public init(frame frameRect: NSRect) {
        super.init(frame: frameRect);
        //--
        self.commonInit();
    }

    required public init?(coder: NSCoder) {
        super.init(coder: coder);
    }

    override public func awakeFromNib() {
        super.awakeFromNib();
        //--
        self.commonInit();
    }

    private func commonInit() {
        self.layer = CALayer();
        self.layer!.cornerRadius = 15;
        self.layer!.masksToBounds = true
        //-
        self.updateFrames();
    }

    public func updateProgress(goodProgressV:Int, okProgressV:Int, badProgressV:Int) {
        guard ((goodProgressV + okProgressV + badProgressV) == 100) else {
            NSLog("Total should be 100%");
            return;
        }

        _goodProgress = CGFloat(goodProgressV);
        _okProgress = CGFloat(okProgressV);
        _badProgress = CGFloat(badProgressV);
        //--
        self.updateFrames();
    }

    private func updateFrames() {
        self.layer?.backgroundColor = NSColor.grayColor().CGColor;

        self.goodView.frame = self.goodViewFrame;
        self.okView.frame = self.okViewFrame;
        self.badView.frame = self.badViewFrame;
    }

    public override func resizeSubviewsWithOldSize(oldSize: NSSize) {
        super.resizeSubviewsWithOldSize(oldSize);
        //--
        self.updateFrames();
    }

}

注意：调用updateProgress()方法改变进度默认为33, 33 & 34 (33+33+34 = 100);

您也可以从以下链接下载示例项目；

http://www.filedropper.com/osxtest

Answer 2

来自drawRect(_ dirtyRect: NSRect)的文档：

脏矩形： 定义需要重绘的视图部分的矩形。这个矩形通常代表需要更新的视图部分。启用响应式滚动后，此矩形还可以表示 AppKit 想要缓存的视图的不可见部分。

不要使用dirtyRect 进行计算，使用self.bounds。