如何绘制仅两个边角圆角的半圆角矩形？

嘿，我懂你遇到的这个问题——用常规的RadiusX/RadiusY属性会把四个角都弄成圆角，确实头疼！下面我给你分几种常见的UI场景，说说怎么只给两个边角做圆角处理：

WPF/UWP #

在WPF或UWP里，直接用Border控件的CornerRadius属性就搞定了，它支持单独设置每个角的圆角值，顺序是左上、右上、右下、左下。比如你想只让左上和右上变成圆角：

<Border Width="200" Height="100" Background="LightBlue" CornerRadius="10,10,0,0">
    <!-- 这里嵌套你的内容控件 -->
</Border>

如果用后台代码设置：

border.CornerRadius = new CornerRadius(10, 10, 0, 0);

Android #

Android里可以自定义shape drawable来实现。先在res/drawable目录下创建一个xml文件（比如rounded_two_corners.xml）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#ADD8E6"/>
    <!-- 按需指定要圆角的角落，这里设置左上+右上 -->
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"/>
</shape>

然后给目标View设置这个背景：

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/rounded_two_corners"/>

HTML/CSS #

网页开发里用CSS的border-radius属性就能轻松实现，同样支持单独指定每个角的圆角值：

.rounded-two-corners {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    /* 左上、右上圆角10px，其余两角无圆角 */
    border-radius: 10px 10px 0 0;
}

对应的HTML元素：

<div class="rounded-two-corners"></div>

iOS/SwiftUI #

SwiftUI里直接用.cornerRadius的重载方法，指定要圆角的角落即可：

Rectangle()
    .fill(Color.lightBlue)
    .frame(width: 200, height: 100)
    .cornerRadius(10, corners: [.topLeft, .topRight])

如果是UIKit，需要用UIBezierPath自定义路径做遮罩：

let rect = CGRect(x: 0, y: 0, width: 200, height: 100)
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 10, height: 10))
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.fillColor = UIColor.lightBlue.cgColor
yourTargetView.layer.mask = shapeLayer

内容的提问来源于stack exchange，提问作者Null Reference Exception