如何设计抠图背景图片？

Question

我想要在布局中实现以下结果：

https://displaypurposes.com/graph?tag=travel

我的方法是创建一个如下所示的自定义可绘制对象，但显然我不能使用负尺寸：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/blue"/>
<corners android:topLeftRadius="-25dp"/>

如何获得这样的插图形状？

Answer 1

您可以通过使用vector drawable来实现该背景，并自己绘制规则。我使用以下代码生成以下结果。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="6dp"
    android:viewportWidth="24.0"
    android:viewportHeight="6.0">

    <path
        android:fillColor="#1e319e"
        android:pathData="M2,0 h20 q0,2 2,2 v4 h-24 v-4 q2,0 2,-2"/>
</vector>

您可以忽略圆角处的背景和蓝线，因为它们来自布局预览。但是，此背景可能无法满足您的需要（也许您想要更大的拐角或更椭圆的形状），所以这是pathData的含义的细分（我还将添加我们所经过的点的坐标每个命令都可以更好地可视化此命令-另外，请记住，左上角为（0,0），右下角为（N，N））：

• M2,0将起点移动到坐标2,0，以便我们可以从那里开始绘制-位置（2,0）
• h20向右画长度为20的直线-位置（22，0）
• q0,2 2,2从当前点绘制一条曲线；该命令可能有点难理解，因为它有点怪异，但是这里是docs及其简短说明。如您所见，我使用了小写的q，因为我想相对于我已有的而不是绝对值绘制曲线（请务必阅读有关绝对与相对的文档）。该命令采用两组值q xc,yc xd,yd，其含义如下：必须将xd,yd添加到当前点（22,0）才能获得目标点（22 + 2 = 24和0 + 2 = 2->（24,2）是曲线的目标点），xc,yc是我们必须添加到当前点的值（在这种情况下仍为22,0，而不是目标点）要获得将决定如何绘制曲线的“控制点”（22、2）（基本上，从控制点开始并在曲线的开始/结束点结束的线仅在这些点处与曲线相交）点（Tangents-指针的当前位置（24，2）
• v4向下绘制一条长度为4的直线-位置（24，6）
• h-24向左绘制一条长度为24的直线（请注意，使用减号会更改方向）-位置（0，6）
• h-4向上画一条长度为4的直线（与上面的负号相同）–位置（0，2）
• q2,0 -2,2与另一个完全一样，我们最终从（2,0）开始。