MIUI论坛 下载APP

官方团队

Rank: 8Rank: 8

积分
2014
机型
未知设备
签到次数
176
MIUI版本
9.5.29
私信

[制作教程] MAML绘制几何图形

[复制链接]
5175 14 |
2015-9-14 15:48 | 来自PC
| |
|
跳转
本帖最后由 天使使planB 于 2015-9-14 15:47 编辑

Ⅰ.Rectangle(矩形、圆角矩形)
  1. <Rectangle x="10" y="20" w="100" h="200" cornerRadius="5,10" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="round" dash="1,2,3,4" strokeAlign="center" xfermode="" xfermodeNum="">
  2.        <StrokeShaders>
  3.                <LinearGradient x="" y="" x1="" y1="" tile="">
  4.                        <GradientStop color="" position=""/>
  5.                        ......
  6.                        <GradientStop color="" position=""/>
  7.                </LinearGradient>
  8.                <RadialGradient x="" y="" rX="" rY="" tile="">
  9.                        <GradientStop color="" position=""/>
  10.                        ......
  11.                        <GradientStop color="" position=""/>
  12.                </RadialGradient>
  13.                <SweepGradient x="" y="" rotation="" tile="">
  14.                        <GradientStop color="" position=""/>
  15.                        ......
  16.                        <GradientStop color="" position=""/>
  17.                </SweepGradient>
  18.                <BitmapShader src="" tile="," />
  19.        </StrokeShaders>
  20.        <FillShaders>
  21.        </FillShaders>
  22. </Rectangle>
复制代码
1.1 属性
  • x, y: 左上角点
  • cornerRadius: 倒角半径,格式"x向半径,y向半径"
  • strokeColor: 描边颜色。与Text的color相同,支持多种color指定方式,如无特别说明,以下所有color类的属性都是如此。
  • fillColor: 填充色
  • weight: 描边的线宽
  • cap: 线头形状。butt无线头(默认), round(半圆), squre(方形)
  • dash: 虚线模式。格式“线长,间隔,线长,间隔....”,e.g. dash="1,2,3,4":1像素宽的线段,2像素的间隔,3像素的线段,4像素的间隔,如此重复...
  • strokeAlign: 描边对齐方式,inner内描,center中心描边,outer外描(默认)
  • xfermode, xfermodeNum: 混合模式,与<Image/>相同
1.2 StrokeShaders
描边的着色器:支持线性渐变着色,放射渐变着色(径向渐变),扫描渐变着色(圆周渐变),位图着色。
1.2.1<LinearGradient>线性渐变:
x, y, x1, y1: 渐变轴线(x,y) --> (x1,y1)
tile(铺展模式):clamp拉伸(默认),mirror镜像,repeat重复
1.2.2<RadialGradient>放射渐变:
x, y: 圆心位置
rX, rY: x, y方向的半径
1.2.3<SweepGradient>扫描渐变:
x, y: 中心点位置
rotation: 旋转角
1.2.4<BitmapShader>位图着色:
src: 图片源
tile: 格式"x方向模式,y方向模式"
1.2.5 GradientStop渐变点:
在指定的几个渐变点颜色之间做渐变
color: 渐变点的颜色
position: 渐变点位置,0~1.0的浮点数
1.3 FillShaders
填充的着色器:与StrokeShaders语法完全相同。
例子:
  1. <Rectangle x="110" y="220" w="500" h="800" cornerRadius="50,50" strokeColor="#ffff0033" fillColor="#ff000000" weight="15" cap="squre" dash="5,10,7,14" strokeAlign="outer" >
  2.     <StrokeShaders>
  3.         <LinearGradient x="0" y="0" x1="0" y1="800" tile="clamp">
  4.             <GradientStop color="#ffff0033" position="0"/>
  5.             <GradientStop color="#ffe4ff00" position="0.5"/>
  6.             <GradientStop color="#ff9b2fee" position="1"/>
  7.         </LinearGradient>
  8.     </StrokeShaders>
  9.     <FillShaders>
  10.                 <BitmapShader src="test.png" tile="repeat"/>
  11.     </FillShaders>
  12. </Rectangle>
复制代码
这是一个圆角矩形,横纵向的倒角都是50,描边采用的是外描边,线头形状是方形,大小是15像素,采用虚线,先画5个像素,然后空10个像素,再画7个像素,空14个像素,如此循环,且描边的颜色是从上到下线性渐变;圆角矩形的填充方式是图案填充即位图着色。如下图:
2015_09_14_11_19_35.jpg
Ⅱ.Ellipse(椭圆)
  1. <Ellipse x="10" y="20" w="100" h="200" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="round" dash="1,2,3,4" strokeAlign="center" xfermode="" xfermodeNum="">
  2.        <StrokeShaders>
  3.        </StrokeShaders>
  4.        <FillShaders>
  5.        </FillShaders>
  6. </Ellipse>
复制代码
  • x, y: 椭圆的中心位置
  • w, h: 椭圆的宽,高

例子
  1. <Ellipse x="710" y="1220" w="600" h="500" strokeColor="#ffff0033" fillColor="#ff000000" weight="10" cap="round" dash="10,20,20,40" strokeAlign="inner" >
  2.         <StrokeShaders>
  3.             <SweepGradient x="0" y="0" rotation="90" tile="clamp">
  4.                 <GradientStop color="#ffff0033" position="0"/>
  5.                 <GradientStop color="#ff9b2fee" position="0.5"/>
  6.                                 <GradientStop color="#ffe4ff00" position="1"/>
  7.             </SweepGradient>
  8.         </StrokeShaders>
  9.         <FillShaders>
  10.                     <RadialGradient x="0" y="0" rX="100" rY="100" tile="repeat">
  11.                 <GradientStop color="#ff000000" position="0"/>
  12.                 <GradientStop color="#ff00b243" position="0.5"/>
  13.                 <GradientStop color="#ffff5a00" position="1"/>
  14.             </RadialGradient>
  15.         </FillShaders>
  16. </Ellipse>
复制代码
这是一个椭圆,描边采用的是内描边,线头形状是圆,大小是10像素,采用虚线,先画10个像素,然后空20个像素,再画20个像素,空40个像素,如此循环,且描边的颜色是以椭圆圆心为圆心的扫描渐变;填充方式是以椭圆圆心作为圆心的放射渐变,铺展模式是重复。如下图: 2015_09_14_03_03_45.png
Ⅲ.Circle(圆)
  1. <Circle x="10" y="20" r="50" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="round" dash="1,2,3,4" strokeAlign="center" xfermode="" xfermodeNum="">
  2.        <StrokeShaders>
  3.        </StrokeShaders>
  4.        <FillShaders>
  5.        </FillShaders>
  6. </Circle>
复制代码
  • x, y: 圆心位置
  • r: 半径
与椭圆类似,不赘述。
Ⅳ.Arc(扇形、弧线)
  1. <Arc x="10" y="20" w="100" h="200" startAngle="10" sweep="50" close="true" strokeColor="#ff00ff00" fillColor="#ff000000" weight="5" cap="round" dash="1,2,3,4" strokeAlign="center" xfermode="" xfermodeNum="">
  2.        <StrokeShaders>
  3.        </StrokeShaders>
  4.        <FillShaders>
  5.        </FillShaders>
  6. </Arc>
复制代码
  • x, y, w, h: 定位方式与Ellipse相同
  • startAngle: 起始角
  • sweep: 扫描角(扇形的角度)
  • close: 是否闭合,true闭合是扇形,false不闭合是弧线
例子:
  1. <Arc x="710" y="220" w="800" h="800" startAngle="60" sweep="120" close="true" strokeColor="#ff00ff00" fillColor="#ff000000" weight="15" cap="butt" dash="1,2,3,4" strokeAlign="center">
  2.         <StrokeShaders>
  3.                 <LinearGradient x="0" y="0" x1="0" y1="400" tile="clamp">
  4.                         <GradientStop color="#ffff0033" position="0"/>
  5.                         <GradientStop color="#ffe4ff00" position="0.5"/>
  6.                         <GradientStop color="#ff9b2fee" position="1"/>
  7.                 </LinearGradient>
  8.         </StrokeShaders>
  9.         <FillShaders>
  10.                         <SweepGradient x="-100" y="200" rotation="90" >
  11.                         <GradientStop color="#ff333333" position="0"/>
  12.                         <GradientStop color="#fffff000" position="0.5"/>
  13.                         <GradientStop color="#ffff0033" position="1"/>
  14.                 </SweepGradient>
  15.         </FillShaders>
  16. </Arc>
复制代码
这是一个扇形,描边采用的是居中描边,无线头形状即默认,大小是15像素,采用虚线,先画1个像素,然后空2个像素,再画3个像素,空4个像素,如此循环,且描边颜色是从上到下的线性渐变;填充方式是以扇形圆心左下角的一点作为圆心的扫描渐变,铺展模式是默认的拉伸。如下图: 2015_09_14_03_36_31.png
Ⅴ.Line(直线)
  1. <Line x="10" y="20" x1="100" y1="200" strokeColor="#ff00ff00" weight="5" cap="round" dash="1,2,3,4" strokeAlign="center" xfermode="" xfermodeNum="">
  2.        <StrokeShaders>
  3.        </StrokeShaders>
  4. </Line>
复制代码
  • x, y, x1, y1: 直线起点(x, y),终点(x1, y1)

直线无描边,其余不赘述。
注意事项:
  • 对齐方式align,alignV:只有Rectangle支持,其他的都不支持,它们的x,y都是指的中心点位置,不需要对齐方式。
  • 填充:线条类的图形忽略fillColor和<FillShaders>;有面积的图形同时支持stroke和fill,分别用于描边和填充。
  • 优先级:当strokeColor和<StrokeShaders>同时存在时,优先使用<StrokeShaders>;fillColor和<FillShaders>亦如此。
  • 描边颜色:如果要出现描边,则strokeColor和<StrokeShaders>必须至少一个存在;都不存在就会没有描边。
  • 渐变定位:<LinearGradient x="" y="">...  中的x,y都是相对它所在的图形元素定位的
收藏18 分享  

已有 2 人评分 经验 理由  

八爪鱼462 + 1 感谢分享^_^
不要你说谎 + 6 MIUI 因你更精彩!

经验 +7  查看全部评分

玩机之皇

Rank: 6Rank: 6

积分
6341
机型
小米手机4
签到次数
160
MIUI版本
V10.3.1.0.OEGCNXM
私信
2015-9-14 16:25 | 来自PC
|
支持

内测粉丝组

怪脾气主题

Rank: 6Rank: 6

积分
14404
机型
未知设备
签到次数
210
MIUI版本
9.7.16
私信

点赞金米兔勋章MIUI 10专属勋章MIUI七周年MIUI 3000万MIUI 2000万MIUI 7MIUI五周年关注微信关注腾讯微博关注新浪微博

2015-9-14 17:33 | 来自PC
|
感谢分享

社区版主

Rank: 7Rank: 7Rank: 7

积分
65504
机型
小米手机4
签到次数
59
MIUI版本
7.8.29
私信

MIUI 10专属勋章2017圣诞节勋章MIUI3亿用户纪念勋章感恩节勋章万圣节勋章MIUI七周年MIUI 9纪念勋章小米7周年勋章“澎湃S1 ”芯片纪念勋章初音勋章2017年小金鸡勋章APP 1000万MIUI 300周小米六周年小米5发布会MIUI 3000万MIUI 2000万MIUI 7MIUI五周年关注微信极客勋章疾风测评勋章关注腾讯微博关注新浪微博年度优秀MIUI六周年

2015-9-15 00:32 | 来自PC
|
好教程,支持

玩机之王

Rank: 5Rank: 5

积分
2500
机型
未知设备
签到次数
106
MIUI版本
9.2.15
私信

APP 1000万MIUI 300周极客勋章关注微信关注新浪微博

2015-9-15 02:48 | 来自APP
|
感谢分享,miui有你更精彩!

内测粉丝组

Rank: 6Rank: 6

积分
9980
机型
未知设备
签到次数
159
MIUI版本
9.7.8
私信

MIUI 10专属勋章2018新年勋章2017圣诞节勋章MIUI3亿用户纪念勋章感恩节勋章万圣节勋章MIUI七周年MIUI 9纪念勋章“澎湃S1 ”芯片纪念勋章2017年小金鸡勋章圣诞节勋章APP 1000万小火箭勋章MIUI 300周MIUI 2000万1000万用户纪念勋章MIUI 7MIUI五周年MIUI三周年关注微信极客勋章关注腾讯微博关注新浪微博我爱米兔

2015-9-15 11:18 | 来自PC
|
学习进步。感谢分享

玩机之王

Rank: 5Rank: 5

积分
2409
机型
未知设备
签到次数
141
MIUI版本
V10.0.7.0.ODTCNFH
私信

国庆勋章MIUI七夕鹊桥勋章MIUI七周年

2015-9-15 17:37 | 来自PC
|
很棒!
http://zhuti.xiaomi.com/detail/784c4c6e-30e6-47ab-83e2-22462a373da0

玩机之王

Rank: 5Rank: 5

积分
2409
机型
未知设备
签到次数
141
MIUI版本
V10.0.7.0.ODTCNFH
私信

国庆勋章MIUI七夕鹊桥勋章MIUI七周年

2015-9-15 17:53 | 来自PC
|

金属的啥时间上线

秋风
http://zhuti.xiaomi.com/detail/784c4c6e-30e6-47ab-83e2-22462a373da0

玩机之皇

Rank: 6Rank: 6

积分
6341
机型
小米手机4
签到次数
160
MIUI版本
V10.3.1.0.OEGCNXM
私信
2015-9-15 18:26 | 来自PC
|
晓画郎 发表于 2015-9-15 17:53
金属的啥时间上线

秋风

刚看到上架了

玩机大师

Rank: 4

积分
1388
机型
未知设备
签到次数
41
MIUI版本
9.2.21
私信
2015-9-16 10:50 | 通过手机发布
|
请问alignv除了center其他两个是top和bottom吗
快速回复 返回顶部 返回列表