layer-list 画三角形(四种朝向)

效果图

实现过程

简书-IT一书生使用layer-list实现了倒三角形，但没有解释。对于使用的rotate动画中的 fromDegrees 、toDegrees、pivotX、pivotY代表的意思及其效果没直观感觉。在看到优快云_aLLLiyyy的原理解释才了解。因此关键是确定旋转角度和旋转中心点

左边红心代表坐标原点，右边红点代表旋转中心点，这个值的计算过程见后面。
以此为参考，得到如第一个图所示四个三角形。
注意，代码中的旋转中心点不是唯一的，对应的旋转角度也不是唯一的，但是旋转中心点与相邻两边的比例 15%，35%是确定的，据此算出旋转中心点，进而确定旋转角度。可以推出有八个可行旋转中心点

代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#000" />
        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%">
            <shape android:shape="rectangle">
                <solid android:color="#f00" />
            </shape>
        </rotate>
    </item>


    <item>
        <rotate
            android:fromDegrees="-45"
            android:pivotX="85%"
            android:pivotY="-35%">
            <shape android:shape="rectangle">
                <solid android:color="#0f0" />
            </shape>
        </rotate>
    </item>

    <item>
        <rotate
            android:fromDegrees="-45"
            android:pivotX="15%"
            android:pivotY="135%">
            <shape android:shape="rectangle">
                <solid android:color="#00f" />
            </shape>
        </rotate>
    </item>

    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="-35%"
            android:pivotY="85%">
            <shape android:shape="rectangle">
                <solid android:color="#666" />
            </shape>
        </rotate>
    </item>
</layer-list>

参考文献

1 简书_IT一书生
2 优快云_aLLLiyyy
1 Google文档
2 Google文档

修改记录

1 20200110 增加旋转点计算

附图 旋转点计算过程