Android 用笔画宽度绘制矢量的正确方法

Question

您好，我正在尝试在我的 android 应用程序中使用矢量可绘制对象。

这是 xml 相同的

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="1024dp"
    android:height="1024dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
    <path
        android:pathData="M 0,0 L 50,0 L 50,50 z"
        android:strokeColor="#000000" />
</vector>

这是没有任何笔画宽度的样子

如果我添加 android:strokeWidth="10" 它看起来是这样的

笔划宽度在所有线条上都不一致（宽度相同），最左边的点似乎没有被切断

有什么方法可以使画出的3条线都一致（等宽）而不是不规则的？

Answer 1

将可绘制对象想象成一个坐标系，点 p(0,0) 在 top-left 角上。您的 x-axis 从 top-left 变为 top-right，您的 y-axis 从 top-left 变为 bottom-left。

创建路径时，它会从坐标系中的一点到另一点。当您抚摸这条路径时，绘制的线条有一些 strokeWidth 默认情况下为 1。但是当你将宽度设置为，比如说 10，那么你的 coordinate-system 中的线会更粗，但是如果你的路径是，例如已经在 y=0 ，这个“厚度”应该去哪里？可绘制对象不会显示任何负坐标。这就是为什么你的 drawable 得到 cut-off.

解决方法：将 strokeWidth 添加到小于 strokeWidth + 的坐标从大于 viewportWidth-strokeWidth and/or viewportHeight-strokeWidth 的坐标中减去 strokeWidth + 为位于视口边界的边缘提供间距（在本例中为额外的3的间距就可以了）

因此您的代码应如下所示：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="1024dp"
    android:height="1024dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
    <path
        android:pathData="M 13,13 L 50,13 L 50,50 z"
        android:strokeColor="#000000"
        android:strokeWidth="10"/>
</vector>

Android 用笔画宽度绘制矢量的正确方法

Android correct way to draw vector with stroke width

xml

android

vector-graphics

android-layout

android-drawable