SwiftUI：使用 ImagePaint 制作边框和填充

韦弦zhy

发布于 2020-05-08 00:57:15

1.7K0

发布于 2020-05-08 00:57:15

文章被收录于专栏：韦弦的偶尔分享

\color{red}{\Large \mathbf{Hacking \quad with \quad iOS： SwiftUI \quad Edition}}

SwiftUI严重依赖于协议，使用绘图时可能会有些混乱。例如，我们可以将Color用作视图，但它也符合ShapeStyle——用于填充，笔触和边框的另一种协议。

实际上，这意味着我们可以修改默认的文本视图，使其具有红色背景：

Text("Hello World")
    .frame(width: 300, height: 300)
    .background(Color.red)

或红色边框：

Text("Hello World")
    .frame(width: 300, height: 300)
    .border(Color.red, width: 30)

作为对比，我们可以将图像用作背景：

Text("Hello World")
    .frame(width: 300, height: 300)
    .background(Image("Example"))

但是使用相同的图像作为边框将不起作用：

Text("Hello World")
    .frame(width: 300, height: 300)
    .border(Image("Example"), width: 30)

如果您考虑一下，这是有道理的——除非图像大小正确正确，否则您对外观应该几乎没有控制权。

为了解决这个问题，SwiftUI为我们提供了一种专用类型，该类型可以完全控制应如何渲染图像的方式包装图像，这又意味着我们可以将它们用于边框和填充而不会出现问题。

该类型称为ImagePaint，它是使用一到三个参数创建的。至少需要给它一个Image作为其第一个参数，但是您也可以在该图像中提供一个矩形，用作在0到1（第二个参数）范围内指定的图形源。，以及该图像的比例（第三个参数）。这些第二和第三个参数具有合理的默认值“整个图像”和“ 100％比例”，因此有时您可以忽略它们。

举例来说，我们可以使用0.2比例尺绘制示例图像，这表示该图像的显示尺寸为正常尺寸的1/5：

Text("Hello World")
    .frame(width: 300, height: 300)
    .border(ImagePaint(image: Image("Example"), scale: 0.2), width: 30)

如果要尝试使用sourceRect参数，请确保传入相对大小和位置的CGRect 0表示“开始”，1表示“结束”。例如，这将显示示例图像的整个宽度，但仅显示中间一半：

Text("Hello World")
    .frame(width: 300, height: 300)
    .border(ImagePaint(image: Image("Example"), sourceRect: CGRect(x: 0, y: 0.25, width: 1, height: 0.5), scale: 0.1), width: 30)

值得一提的是，ImagePaint可用于查看背景和描边形状。例如，我们可以创建一个胶囊，将示例图像平铺为笔划：

VStack {
    Spacer()
    Text("Hello World")
        .frame(width: 300, height: 300)
        .border(ImagePaint(image: Image("Example"), sourceRect: CGRect(x: 0, y: 0.25, width: 1, height: 0.5), scale: 0.8), width: 30)
    Spacer()
    Capsule()
        .strokeBorder(ImagePaint(image: Image("Example"), scale: 0.4), lineWidth: 20)
        .frame(width: 300, height: 200)
    Spacer()
}
}

ImagePaint将自动继续平铺其图像，直到填充其区域为止——它可以与背景，笔触，边框和任何大小的填充一起使用。

译自Creative borders and fills using ImagePaint

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

swift

ios

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

swift

ios

登录后参与评论

0 条评论

热度