macOS swift下使用贝塞尔曲线制作五子棋盘（1）

制作棋盘

首先需要制作一个简单的500x500的棋盘窗口，这里使用xib来布局


下一步创建棋盘类，关联xib

class GobangChessBoard: NSView 
{
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
    }
}

draw 方法就是实现棋盘的关键，在里边进行棋盘绘制

画棋盘线

五子棋盘又横竖线交织排列形成，棋子落于交叉点

画横线

var horizontalLineNum: Int? //定义横线条数
//计算当前棋盘能占有多少条横线，横线距离为30，+ 1是为了封住最后一条横线，-30是为了距离左边30，不至于第一行落子无法显示。
horizontalLineNum = Int((view.frame.size.height-30)/30 + 1) 
//现在开始利用贝塞尔曲线来画出横线（如图1.1）
for i in 0..<horizontalLineNum! {
    let bezier = NSBezierPath()
    bezier.move(to: NSPoint(x: 23, y: 15 + CGFloat(i * 30)))
    bezier.line(to: NSPoint(x: CGFloat(horizontalLineNum! * 30) - 7, y: 15 + CGFloat(i * 30)))
    bezier.lineWidth = 1.0
    NSColor.black.set()
    bezier.stroke()
}

图1.1

画竖线

与横线同理了，继续贝塞尔曲线画

var verticalLineNum: Int? //定义竖线条数
//计算当前棋盘能占有多少条竖线，竖线距离为30，+ 1是为了封住最后一条竖线，-30是为了距离上边30，不至于第一行落子无法显示。
verticalLineNum = Int((view.frame.size.width-30)/30 + 1) 
//现在开始利用贝塞尔曲线来画出竖线（如图1.2）
for i in 0..<verticalLineNum! {
    let bezier = NSBezierPath()
    bezier.move(to: NSPoint(x: 23 + CGFloat(i * 30), y: 15))
    bezier.line(to: NSPoint(x: 23 + CGFloat(i * 30), y: CGFloat(verticalLineNum! * 30) - 15))
    bezier.lineWidth = 1.0
    NSColor.black.set()
    bezier.stroke()
}

图1.2

画棋子

棋子在此五子棋中，我直接就定义为一个圆形黑白快，依然使用贝塞尔曲线来绘制

let bezier = NSBezierPath()
bezier.lineWidth = 1.0
bezier.appendArc(withCenter: NSPoint(x: p.point.x*30+23, y: p.point.y*30+15), radius: 10, startAngle: 0, endAngle: 360, clockwise: false)
if p.isblackOrWhite {
    NSColor.black.set()
}else {
    NSColor.white.set()
}
bezier.stroke()
bezier.fill()

棋盘最终效果

我们将上述三种合并，看看棋盘的最终效果

END

下一节，我们实现黑白子交替落位，以及实现重开及悔棋两个小功能。