Question

在Android中（在Java中）我可以做这样的事情（在这里我试图绘制三角形图形，其中填充了不同的颜色，前半部分用红色，第二部分用绿色，还有黑色笔划围绕三角形图：

@Override
public void onDraw(Canvas canvas) {

        ....

        canvas.clipPath(pathBoundary); // triangle figure path
        canvas.drawPath(pathBoundary, paintBlack); // draw black stroke around figure
        canvas.drawRect(rectRed, paintRed); // fill first half with red color
        canvas.drawRect(rectGreen, paintGreen); // fill second half with green color

在iOS中我刚学会了如何用一种颜色绘制三角形图形，想用两种颜色绘制（就像在Android中一样）

  override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }
        context.beginPath()
        context.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        context.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        context.addLine(to: CGPoint(x: (rect.maxX / 2.0), y: rect.minY))
        context.setFillColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.60)
        context.fillPath()
        context.clip()
        ... how to draw path with specific color?
        ... how to draw rect with specific color?

Answer 1

你可以像在Android上一样：划线三角形路径，将其设置为剪切路径，用红色划线矩形，用绿色划线矩形。

UIGraphicsBeginImageContext(CGSize(width: 200, height: 200))
let context = UIGraphicsGetCurrentContext()!
context.beginPath()
context.move(to: CGPoint(x: 100, y: 0))
context.addLine(to: CGPoint(x: 0, y: 200))
context.addLine(to: CGPoint(x: 200, y: 200))
context.closePath()
let path = context.path!
context.setStrokeColor(UIColor.black.cgColor)
context.strokePath()
context.addPath(path)
context.clip()
context.setFillColor(UIColor.red.cgColor)
context.fill(CGRect(x: 0, y: 0, width: 200, height: 150))
context.setFillColor(UIColor.green.cgColor)
context.fill(CGRect(x: 0, y: 150, width: 200, height: 50))
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

您可以在游乐场中运行上面的代码。在右栏中将鼠标悬停在最后一行（图像的一行）上，单击眼睛图标，您将看到所绘图像的预览。

Answer 2

你这样做的方法基本上是绘制两条不同的路径。每个都有不同的填充颜色。这是一个例子：

  override func draw(_ rect: CGRect) {
    super.draw(rect)

    guard let context = UIGraphicsGetCurrentContext() else { return }
    let leftVertex = CGPoint(x: rect.minX, y: rect.maxY)
    let topVertex = CGPoint(x: rect.midX, y: rect.minY)

    let r = sqrt(pow(leftVertex.x - topVertex.x, 2) + pow(leftVertex.y - topVertex.y, 2))
    let leftAngle = atan(rect.maxY/rect.midX)

    context.beginPath()
    context.move(to: leftVertex)
    context.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    context.addLine(to: topVertex)
    context.closePath()
    context.setFillColor(red: 0.0, green: 1.0, blue: 0.0, alpha: 1)
    context.fillPath()

    let smallLeftVertex = CGPoint(x: r/2*cos(leftAngle), y: rect.midY)

    context.beginPath()
    context.move(to: smallLeftVertex)
    context.addLine(to: topVertex)
    context.addLine(to: CGPoint(x: rect.maxX - smallLeftVertex.x, y: rect.midY))
    context.closePath()
    context.setFillColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1)
    context.fillPath()

  }

有一些数学可以评估哪个是内部（较小）三角形的顶点。

结果如下：

如果你想要，你可以在操场上试试：

//: Playground - noun: a place where people can play

import UIKit

class TriangleView: UIView {
  override func draw(_ rect: CGRect) {
    super.draw(rect)

    guard let context = UIGraphicsGetCurrentContext() else { return }
    let leftVertex = CGPoint(x: rect.minX, y: rect.maxY)
    let topVertex = CGPoint(x: rect.midX, y: rect.minY)

    let r = sqrt(pow(leftVertex.x - topVertex.x, 2) + pow(leftVertex.y - topVertex.y, 2))
    let leftAngle = atan(rect.maxY/rect.midX)

    context.beginPath()
    context.move(to: leftVertex)
    context.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    context.addLine(to: topVertex)
    context.closePath()
    context.setFillColor(red: 0.0, green: 1.0, blue: 0.0, alpha: 1)
    context.fillPath()

    let smallLeftVertex = CGPoint(x: r/2*cos(leftAngle), y: rect.midY)

    context.beginPath()
    context.move(to: smallLeftVertex)
    context.addLine(to: topVertex)
    context.addLine(to: CGPoint(x: rect.maxX - smallLeftVertex.x, y: rect.midY))
    context.closePath()
    context.setFillColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1)
    context.fillPath()

  }
}


let triangle = TriangleView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
triangle.backgroundColor = .white

**

编辑：

**

您还可以使用CGContext的剪辑功能来避免绘制两个重叠的三角形。在这种情况下，代码看起来像这样：

  override func draw(_ rect: CGRect) {
    super.draw(rect)

    guard let context = UIGraphicsGetCurrentContext() else { return }
    let leftVertex = CGPoint(x: rect.minX, y: rect.maxY)
    let topVertex = CGPoint(x: rect.midX, y: rect.minY)

    var path = CGMutablePath()
    path.move(to: leftVertex)
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: topVertex)
    path.closeSubpath()

    context.addPath(path)
    context.clip()

    context.setFillColor(red: 1, green: 0, blue: 0, alpha: 1)
    context.fill(CGRect(x: 0, y: 0, width: rect.width, height: rect.height/2))
    context.setFillColor(red: 0, green: 1, blue: 0, alpha: 1)
    context.fill(CGRect(x: 0, y: rect.midY, width: rect.width, height: rect.height/2))
  }

在代码的第一部分中我们创建三角形，我们提取刚刚在上下文中淹没的路径，并将它添加为剪切路径。然后我们可以用两种不同的颜色填充两个矩形。

希望这能回答你的问题。

在Swift中使用特定颜色绘制路径/ rect是完全相同的

2 个答案:

编辑：