删除填充或强制拟合或从方形矢量资产中删除空白空间以适合矩形按钮?

jon*_*adv 5 svg android crop padding imageview

我正在尝试将all_inclusive svg 图像调整为我的矩形按钮。形状本身也是矩形,但矢量资产是正方形 (24x24),形状上方和下方有空白。这些空间迫使形状本身非常小。如何通过删除顶部和底部的填充来制作全包 svg 矩形?

烦人的_无穷大

在这张图片中,图像设置为适合左侧、顶部和右侧的指南:

    <ImageView
        android:id="@+id/imgInfinity"
        app:srcCompat="@drawable/ic_infinity"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="0.75"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="0.75"
        app:layout_constraintEnd_toEndOf="0.25" />
Run Code Online (Sandbox Code Playgroud)

不起作用的事情:

  • 带有组的枢轴矢量资产-> 我无法在不弄乱原始形状的情况下弄清楚尺寸。与 scaleX/Y 或 translateX/Y 相同。我让它在我的其他形状更简单的按钮上工作。
  • 调整 android:viewportheight 或 android:height -> 它将图片变形为奇怪的形式
  • 在线裁剪 svg --> 由于 Google 的原始 SVG pathData 已经有 580 个字符长,裁剪工具只会使它变大以供 android 处理(超过 1000 个字符)
  • 使用 word 裁剪 svg 图片并从 zip 文件中提取 -> 它不会压缩 svg 图像,因此它保持矩形并带有上下空白。
  • 为图片的顶部设置单独的水平参考线。它可以解决问题,但每个图像的一个或多个指南变得非常混乱。一定有更好的方法吧?

接受的解决方案(使用 InkShape 编辑):

  • 安装InkShape
  • 打开 SVG
  • 单击图片一次以选择它
  • 转到文件-> 文档属性,然后单击“将分页器调整为绘图或选择的大小”(此按钮隐藏在第一个选项卡上,单击+将页面调整为内容以显示该选项);
  • 节省
  • 从保存的文件中提取 pathData 和(视口)宽度/高度。

Che*_*amp 2

使用 Inkscape 1.1 版更新:

不幸的是,最新版本的 Inkscape (1.1) 不再直接导入矢量可绘制文件,因此原始答案不是 100% 正确。该答案可能适用于可以处理矢量可绘制文件的其他编辑器。

这是对该答案的更新,可与 Inkscape 的更高版本一起使用,以从矢量可绘制对象中删除所有填充。

将矢量绘图转换为缩放矢量图形 (SVG):

  • 打开 Alex Lockwood 的Shape Shifter 网站
  • 将矢量绘图文件从 Android Studio 拖到 Shape Shifter。
  • 将图像作为 SVG 导出到本地文件

现在我们有了一个 SVG 文件,我们可以使用 Inkscape 对其进行编辑:

  • 如果尚未安装,请安装 Inkscape。
  • 在 Inkscape 中打开 SVG 文件。
  • 单击图像将其选中。
  • 将图像大小调整为所选内容(Shift+Ctrl+R 或编辑->将页面大小调整为所选内容)。如果您需要一些填充,您还可以指定备用尺寸。
  • 将图像另存为 SVG 文件。

图像现已裁剪为 SVG 文件。我们需要将其转换回矢量绘图。

  • 在 Android Studio 中,将 SVG 文件导入为矢量绘图。(文件->新建->矢量资源)资源类型=“本地文件(SVG、PSD)。

导入后,矢量绘图不再有任何填充。

使用可以处理 SVG 文件的图像编辑器来裁剪图像。我使用了 InkScape,但还有其他的。裁剪图像后,您可以将其作为 XML 文件导入 Android Studio。