Android vector矢量图-画圆详解

详细介绍Vector中用XML绘制圆

大致了解一下基本命令,能理解的先理解,不理解没关系,我们带着问题一步步实践。

A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

  • rx ry 椭圆半径
  • x-axis-rotation x轴旋转角度
  • large-arc-flag 为0时表示取小弧度,1时取大弧度 (舍取的时候,是要长的还是短的)
  • sweep-flag 0取逆时针方向,1取顺时针方向
  • x y终点位置

简单点:

A(圆的x轴半径,y轴半径,x轴旋转角度0/1-小/大弧度,0/1-逆/顺时针圆的终点位置x点,圆的终点位置y点

光看其解释,大致部分应该都能理解,但是小部分并不是很明白。

下面我们来一一实践知晓

先看效果:

先移动到画布中心点的位置(24,24),画一个半径为10的圆形,终点为12,12 效果图如下:

这样看点的位置不清晰,我们换种方式。(每个方块为12x12

如图,毕竟这vector画图主要还是跟每个点的位置打交道,我以这种形式,相比大家应该能很清楚的明白每个坐标的位置吧。这样我也不用一直标某个点x1,y1  某个点x2,y2 巴拉巴拉巴拉的  看的头的大了,我个人还是比较喜欢看图说话的~~毕竟这样也方便我,哈哈。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportHeight="48"
        android:viewportWidth="48">


    <path
        android:fillColor="#ff000000"
        android:pathData="M0 0 0 48 48 48 48 0z"
        android:strokeAlpha="1"/>
    <path
        android:pathData="M24 24 A 10,10 0 1 0 12,12"
        android:strokeAlpha="1"
        android:strokeColor="@color/colorAccent"
        android:strokeLineCap="round"
        android:strokeWidth="1"/>
</vector>

这里我基本属性先介绍下,怕很新的小伙伴不理解:

  • strokeWidth : 划线宽度
  • strokeColor:划线颜色
  • strokeAlpha:划线透明度 1 = FF  也可以通过改变color来实现(0xffff0000=红色)

 

好,屁话说了一堆,我们进入正题:

猜想:以M x,y为起点 和 A(....endX,endY)为终点,以两点之间的直线,画一个半圆弧(圆的大小由x,y半径决定),再根据顺逆时针改变旋转方向。

回顾我们的基本命令:

A(圆的x轴半径,y轴半径,x轴旋转角度,0/1-小/大弧度,0/1-逆/顺时针圆的终点位置x点,圆的终点位置y点

上面标红的属性就是我们接下来要验证。

为了证实猜想,我做了2个效果图,并附上代码。

效果图1:

关键代码1:

<path
    android:pathData="M12 12 A 5,5 0 1 1 24,12"
    android:strokeWidth="1"
    android:strokeColor="#ffff0000"
    android:strokeAlpha="1"
    />
<path
    android:pathData="M12 12 A 5,5 0 1 0 24,12"
    android:strokeWidth="1"
    android:strokeColor="#ff00ff00"
    android:strokeAlpha="1"
    />
<path
    android:pathData="M24 24 A 5,5 0 1 0 24,36"
    android:strokeWidth="1"
    android:strokeColor="#ffff0000"
    android:strokeAlpha="1"
    />
<path
    android:pathData="M24 24 A 5,5 0 1 1 24,36"
    android:strokeWidth="1"
    android:strokeColor="#ff00ff00"
    android:strokeAlpha="1"
    />
<path
    android:pathData="M36 36 A 5,5 0 1 0 36.1,35.9"
    android:strokeWidth="1"
    android:strokeColor="#ff0000ff"
    android:strokeAlpha="1"
    />

 

效果图2:

 

关键代码2:

<!--半圆-->
<path
    android:pathData="M12 12 A 5,5 0 1 1 36,12 M12 12 L 36 12"
    android:strokeWidth="0.1"
    android:strokeColor="#ff00ff00"
    />
<path
    android:pathData="M12 12 A 5,5 0 1 1 32,13 M12 12 L 32 13"
    android:strokeWidth="0.1"
    android:strokeColor="#ffff0000"
    />
<path
    android:pathData="M12 12 A 5,5 0 1 1 28,15 M12 12 L 28 15"
    android:strokeWidth="0.1"
    android:strokeColor="#ff0000ff"
    />
<path
    android:pathData="M12 12 A 5,5 0 1 1 24,18 M12 12 L 24 18"
    android:strokeWidth="0.1"
    android:strokeColor="#ffffff00"
    />


<!--圆-->
<path
    android:pathData="M12 36 A 5,5 0 1 1 11,36 M12 36 L 11 36"
    android:strokeWidth="0.1"
    android:strokeColor="#ff00ff00"
    />
<path
    android:pathData="M12 36 A 5,5 0 1 1 10,34 M12 36 L 10 34"
    android:strokeWidth="0.1"
    android:strokeColor="#ffff0000"
    />
<path
    android:pathData="M12 36 A 5,5 0 1 1 12,32 M12 36 L 12 32"
    android:strokeWidth="0.1"
    android:strokeColor="#ff0000ff"
    />
<path
    android:pathData="M12 36 A 5,5 0 1 1 16,37 M12 36 L 16 37"
    android:strokeWidth="0.1"
    android:strokeColor="#ffffff00"
    />

 

如效果图,其实不用我说多,看图说话大家应该差不多明白了吧。

重点:
 

A(圆的x轴半径,y轴半径x轴旋转角度0/1-小/大弧度,0/1-逆/顺时针圆的终点位置x点,圆的终点位置y点

结论

  • 以起点(Mx,y A...)和终点(圆的终点位置x点,圆的终点位置y点)来确定一条直线,通过直线画一个半圆弧。

  • 起点和终点不能为同一个点,只能无限接近。因为两点才能有一条直线。

  • 圆的x轴半径,y轴半径 和 0/1-小/大弧度: 决定圆的大小

  • 0/1-逆/顺时针:决定画圆的方向

  • x轴旋转角度:???

x轴旋转角度我也没搞懂,怎么调都没反应,懂的大佬感谢评论区留言一下,谢谢了。(绿色的我都不懂,?)

 

 

  • 6
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲁蛋蛋呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值