大海话语 2022-03-04 09:35 采纳率: 87.6%
浏览 34
已结题

安卓 vector标签 绘制图形

我想绘制一个箭头的图案,但是,不太清楚标签vector的一些使用。比如说:M 是移动绘制点,L是直线,这些都还了解,但是,有些属性就比如说 像下面的图中的 1024值,与有的直接写 24,这种对M 或 L 的设置就是不一样的了,这个有什么区别呢?该怎样用这种 android:viewportWidth="1024" 的写法呢?

img

我想绘制一个类似下面的箭头哈

img

  • 写回答

3条回答 默认 最新

  • ilmss 2022-03-05 10:06
    关注

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是

    <vector>
    

    画出的图形可以像一般的图片资源使用,例子如下:

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
        <path
            android:fillColor="#FF000000"
            android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />
    </vector>
    

    其所画出的图形为

    img


    于此同时,android studio提供了丰富的图片资源,可以右键module,new->vector asset选择,如下:

    img


    当然自己也可以去动手去做。显而易见,上面例子的重点是在PathData里面的那一大窜数字:
    android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />

    img


    共有三个标签,下面就是<path>部分:
    基本的语法:
    M:move to 移动绘制点,作用相当于把画笔落在哪一点。
    L:line to 直线,就是一条直线,注意,只是直线,直线是没有宽度的,所以你什么也看不到。
    android:strokeColor="#333330" android:strokeWidth="10" 设置颜色和线宽
    Z:close 闭合,嗯,就是把图封闭起来。
    C:cubic bezier 三次贝塞尔曲线
    Q:quatratic bezier 二次贝塞尔曲线
    A:ellipse 圆弧
    每个命令都有大小写形式,大写代表后面的参数是绝对坐标,小写表示相对坐标,相对于上一个点的位置。参数之间用空格或逗号隔开。
    命令详解:

    M (x y) 把画笔移动到x,y,要准备在这个地方画图了。
    L (x y) 直线连到x,y,还有简化命令H(x) 水平连接、V(y)垂直连接。
    Z,没有参数,连接起点和终点
    C(x1 y1 x2 y2 x y),控制点(x1,y1)( x2,y2),终点x,y 。
    Q(x1 y1 x y),控制点(x1,y1),终点x,y
    C和Q会在下文做简单对比。
    A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) 
    
    android:pathData=" M50,50 a10,10 1,1 0 1,0" />
    rx ry 椭圆半径 
    x-axis-rotation x轴旋转角度 
    large-arc-flag 为0时表示取小弧度,1时取大弧度 (舍取的时候,是要长的还是短的)
    sweep-flag 0取逆时针方向,1取顺时针方向 
    

    <path>里面属性</path>

    android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径
    android:pathData 和 SVG 中 d 元素一样的路径信息。
    android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径
    android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框
    android:strokeWidth 定义路径边框的粗细尺寸
    android:strokeAlpha 定义路径边框的透明度
    android:fillAlpha 定义填充路径颜色的透明度
    android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 01
    android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 01
    android:trimPathOffset 设置路径截取的范围 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.
    android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.
    android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
    android:strokeMiterLimit 设置斜角的上限,Sets the Miter limit for a stroked path.
    
    
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    
    有属性,
    android:name 定义该drawable的名字
    android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸,通常使用 dp
    android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸,通常使用 dp
    android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布
    android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布
    android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
    android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in
    android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片。比如 阿拉伯语。
    android:alpha 该图片的透明度属性
    <group>里面可以定义多了<path>,这样可以方便管理多个<path>
    
    android:name 定义 group 的名字
    android:rotation 定义该 group 的路径旋转多少度,这样图片就被旋转了,注意写数字的时候别晕了。
    android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
    android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
    android:scaleX 定义 X 轴的缩放倍数
    android:scaleY 定义 Y 轴的缩放倍数
    android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
    android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。
    
    </path>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月13日
  • 已采纳回答 3月5日
  • 创建了问题 3月4日

悬赏问题

  • ¥15 Centos7 / PETGEM
  • ¥15 csmar数据进行spss描述性统计分析
  • ¥15 各位请问平行检验趋势图这样要怎么调整?说标准差差异太大了
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 wpf界面一直接收PLC给过来的信号,导致UI界面操作起来会卡顿
  • ¥15 init i2c:2 freq:100000[MAIXPY]: find ov2640[MAIXPY]: find ov sensor是main文件哪里有问题吗
  • ¥15 运动想象脑电信号数据集.vhdr
  • ¥15 三因素重复测量数据R语句编写,不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗