合作咨询
我们的专家服务团队将竭诚为您提供专业的合作咨询服务
路径解析<PathUtil>
本文导读
动效概述
路径解析工具是对一段命令描述的路径字符串进行解析，实际是解析SVG路径。跑马灯动效可以通过pathname调用该路径，实现按照路径跑马灯的效果，注意跑马灯标签应该在该标签之后。路径指令中大写字母表示绝对位置，小写字母表示相对位置。
应用场景
- 可以实现图形用线条的方式展示，如爱心的形状
- 可以实现字体用线条展示，例如可以实现空心的“新年快乐”字体
- 可用于实现屏幕四周的跑马灯效果
XML规范
<PathUtil name="" path=""/>
参数说明
| 参 数 | 类 型 | 选 项 | 注 释 |
|---|---|---|---|
| name | 字符串 | 必填 | 路径名称 |
| path | 字符串 | 必填 | 路径的SVG指令描述，其中Path中以命令标志开头后接命令规定数量的参数。命令与参数之间可以用空格、逗号也可以没有任何字符分割，参数与参数之间用空格、逗号或者换行来分割。 |
path svg指令说明
| 指 令 | 参 数 | 注 释 |
|---|---|---|
| M,m | x,y | 该命令将绘制点移动至（x,y）点开始绘制 |
| L,l | x,y | 从路径当前绘制点绘制直线到（x,y）点，并将绘制点移动到(x,y)点 |
| H,h | x | 从路径当前绘制点绘制横线到x位置，并将绘制点移动到(x,y)点 |
| V,v | y | 从路径当前绘制点绘制竖线到x位置，并将绘制点移动到(x,y)点 |
| Z,z | 无 | 路径闭合参数，将当前绘制点与M指令的起始绘制点连接一条直线 |
| Q,q | x1,y1,x,y | 从路径当前绘制点绘制二次贝塞尔曲线至（x,y）点，控制点为（x1,y1），并移动绘制点至(x,y) |
| T,t | x,y | 从路径当前绘制点绘制二次贝塞尔曲线至（x,y）点，并移动绘制点至(x,y)。若前一个指令为Q或T，控制点为前一个控制点关于前一个指令终点的对称点，若前一个指令不为Q或T，则控制点与终点相同 |
| C,c | x1,y1,x2,y2,x,y | 从路径当前绘制点绘制三次贝塞尔曲线至（x,y）点，控制点1为（x1,y1）控制点2为（x2,y2），并移动绘制点至(x,y) |
| S,s | x2,y2,x,y | 从路径当前绘制点绘制二次贝塞尔曲线至（x,y）点，并移动绘制点至(x,y)。若前一个指令为C或S，控制点1为前一个控制点2关于前一个指令终点的对称点，若前一个指令不为C或S，则控制点1与控制点2相同 |
| A,a | rx,ry,x-axis-rotation,large-arc-flag,sweep-flag,x,y | 弧形命令A的前两个参数分别是x轴半径和y轴半径，弧形命令A的第三个参数表示弧形的旋转情况，large-arc-flag（角度大小） 和sweep-flag（弧线方向），large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧 |
基础图形指令
在SVG指令基础上新增圆角矩形、弧线（椭圆）、圆形、爱心基础图形的解析，与上述指令不可同时使用：
| 指 令 | 参 数 | 注 释 |
|---|---|---|
| Rect | left,top,right,bottom,rx,ry,direction | 绘制矩形，left,top,right,bottom表示矩形的左（x）、上(y)、右(x)、下(y)；rx,ry表示矩形圆角的x,y轴半径；direction为0表示路径为顺时针，1表示逆时针 |
| Circle | x,y,r,direction | 绘制圆形，x,y表示圆心坐标；r表半径；direction与矩形一致； |
| Arc | left,top,right,bottom,startAngle,sweepAngle | 绘制圆弧，left,top,right,bottom表示绘制的椭圆所在矩形的左（x）、上(y)、右(x)、下(y)；startAngle表示弧线绘制的起始角度；sweepAngle表示绘制弧线的角度。起点为矩形右边中点位置，顺时针方向。 |
| Love | 无 | 绘制爱心，爱心左上角坐标为（200,130）,w=200，h=170 |
应用示例
示例一：生成左上角坐标为（200,130）,w=200，h=170的爱心路径，路径的name为love，其中跑马灯可以用pathname属性来引用。
<PathUtil name="love" path="love"/>
示例二：生成左边x坐标为0，顶部y坐标为0，右边x左边为100，底部y坐标为100，圆角的x和y的半径都为15的圆角矩形路径。
<PathUtil name="rect" path="Rect 0,0,100,100,15,15,0"/>
示例三：以x坐标100，y坐标100，生成一个半径为100的圆形路径。
<PathUtil name="circle" path="Circle 100,100,100,0"/>
示例四：以左边x坐标100，顶部y坐标100，右边x坐标300，底部y坐标400生成一个椭圆，其中椭圆的y方向轴为300，x方向轴为200。生成一个沿着椭圆，从最右边点开始，以矩形中点为旋转中心，顺时针360度的路径。
<PathUtil name="Arc" path="Arc 100,100,300,400,0,360"/>
示例五：沿着Path的规划绘制相关的路径，其中c是按照三次贝塞尔曲线连接并移动绘制点，Z是封闭路径的绘制点和初始绘制点，M是移动绘制点并设置成初始绘制点。 该条路径是抠图后由GIMP软件生成路径得到的“新年快乐”四个字描边路径。
<PathUtil name="d" path="M 0.00,0.00 C 0.00,0.00 0.00,178.00 0.00,178.00 0.00,178.00 418.00,178.00 418.00,178.00 418.00,178.00 418.00,0.00 418.00,0.00 418.00,0.00 0.00,0.00 0.00,0.00 Z M 68.02,18.34 C 72.55,17.82 75.53,17.69 78.77,21.47 82.61,25.93 80.10,31.06 75.98,32.05 69.92,33.51 56.15,22.09 68.02,18.34 Z M 362.00,31.00 C 362.00,31.00 352.00,29.00 352.00,29.00 348.89,35.59 344.64,37.48 340.56,43.00 337.52,47.10 337.06,50.69 334.64,55.00 333.50,57.04 331.22,59.82 330.84,62.00 330.51,63.88 331.43,66.09 331.75,68.00 332.80,74.21 333.83,85.23 341.01,87.83 345.45,89.44 347.05,84.20 347.79,81.00 350.53,69.04 347.66,68.13 347.00,58.00 355.79,60.74 351.11,65.66 352.80,72.00 353.92,76.20 356.47,78.67 359.00,82.00 361.78,79.09 367.22,72.67 371.00,71.64 375.82,70.33 382.28,76.08 381.39,81.01 379.98,88.75 367.27,98.51 365.02,103.00 363.33,106.38 364.01,119.52 364.00,124.00 363.98,133.49 362.58,134.22 355.07,139.58 352.99,141.07 350.34,143.82 347.62,141.99 345.26,140.40 344.46,136.35 344.18,133.72 344.18,133.72 343.30,123.00 343.30,123.00 343.38,119.72 344.71,115.28 343.30,112.11 341.05,106.40 335.76,109.91 328.00,104.36 319.34,98.18 315.12,86.35 315.00,76.00 314.88,64.75 315.94,65.94 318.86,56.00 318.86,56.00 322.83,41.04 322.83,41.04 326.16,34.47 331.39,31.00 336.83,26.53 340.05,23.88 342.68,21.07 346.99,20.43 349.90,19.45 352.21,20.38 355.09,20.43 355.09,20.43 360.72,20.43 360.72,20.43 364.19,21.48 369.66,26.68 370.77,30.04 372.05,33.86 373.85,46.80 366.05,44.34 360.93,42.73 362.00,35.20 362.00,31.00 Z M 187.00,44.00 C 181.43,45.37 175.73,45.99 170.00,46.00 166.63,46.01 162.00,45.46 159.60,48.31 156.66,51.81 158.43,61.68 159.00,66.00 162.38,65.55 170.09,64.82 172.42,62.44 174.48,60.32 174.25,56.32 176.49,55.17 179.12,53.82 180.93,57.05 181.66,59.02 184.23,65.89 185.98,70.58 186.00,78.17 187.80,78.02 190.26,77.98 191.98,78.17 194.29,78.83 196.34,79.78 197.22,82.13 199.43,88.05 192.54,92.16 189.14,95.51 187.84,96.79 186.78,97.91 186.81,99.85 186.81,99.85 189.71,108.00 189.71,108.00 191.27,114.95 191.01,120.03 191.00,127.00 191.00,130.08 191.20,134.06 189.55,136.77 187.15,140.70 178.78,141.31 175.98,137.57 173.16,133.79 174.09,119.20 174.00,114.00 173.74,100.16 164.42,109.97 152.00,110.40 149.70,110.48 145.29,109.97 144.17,107.57 142.11,103.20 151.31,99.35 153.03,95.83 154.38,93.04 152.45,90.82 152.35,87.00 152.35,87.00 154.00,72.00 154.00,72.00 151.29,71.63 146.72,71.19 144.70,69.27 139.00,63.84 142.36,46.19 148.18,41.82 153.93,37.50 155.92,42.66 159.17,43.12 159.17,43.12 169.00,40.58 169.00,40.58 176.01,39.09 184.39,33.80 187.00,44.00 Z M 233.00,38.00 C 237.78,44.71 236.58,50.52 237.09,58.00 237.09,58.00 238.00,68.00 238.00,68.00 238.00,68.00 238.00,104.00 238.00,104.00 238.00,104.00 236.17,128.00 236.17,128.00 234.35,147.06 236.21,152.07 227.00,170.00 224.05,167.19 222.33,165.18 222.05,160.96 221.82,157.47 223.47,141.88 224.20,138.00 224.20,138.00 227.92,111.00 227.92,111.00 229.11,104.43 231.07,103.99 231.03,100.56 231.03,100.56 230.04,93.00 230.04,93.00 230.04,93.00 231.72,51.00 231.72,51.00 232.23,46.65 231.37,42.10 233.00,38.00 Z M 94.00,40.00 C 101.03,50.11 91.58,50.28 89.55,59.00 88.65,62.85 90.96,65.17 90.51,69.00 90.51,69.00 88.01,77.00 88.01,77.00 88.01,77.00 88.01,90.00 88.01,90.00 88.01,90.00 86.65,96.00 86.65,96.00 85.72,102.37 93.89,109.47 92.16,114.82 90.64,119.49 79.96,122.15 76.60,127.10 72.33,133.39 84.16,142.56 73.96,145.89 64.19,149.08 62.17,133.81 59.69,131.51 57.05,129.06 51.57,128.88 48.00,128.00 51.49,119.61 54.08,122.06 59.82,117.37 63.13,114.65 69.32,105.21 70.00,101.00 70.00,101.00 57.00,100.00 57.00,100.00 59.89,95.05 68.58,93.30 74.00,91.00 74.00,91.00 74.00,89.00 74.00,89.00 63.67,85.29 62.85,81.75 60.00,72.00 66.56,75.90 66.32,83.43 71.05,83.91 74.08,84.21 78.36,80.82 79.12,77.96 79.62,76.06 79.03,65.89 77.98,64.31 76.25,61.73 72.73,62.02 70.00,62.00 70.00,62.00 54.00,62.69 54.00,62.69 51.68,62.24 46.50,59.23 44.00,58.00 44.00,58.00 59.00,53.01 59.00,53.01 59.00,53.01 65.00,49.45 65.00,49.45 65.00,49.45 80.00,41.84 80.00,41.84 80.00,41.84 94.00,40.00 94.00,40.00 Z M 270.00,142.00 C 264.26,136.19 268.17,129.17 264.41,125.72 261.37,122.93 253.41,124.89 253.34,120.75 253.29,118.14 257.16,115.15 259.00,113.66 266.35,107.74 279.37,98.86 270.84,88.76 268.79,86.33 268.17,85.42 265.00,85.00 267.52,75.73 274.57,74.09 275.77,67.00 276.44,63.05 273.92,56.09 277.47,54.17 279.26,53.20 280.71,54.80 281.64,56.15 284.00,59.59 284.06,64.50 287.39,67.28 291.08,70.34 298.30,69.51 301.69,72.56 303.98,74.62 303.94,77.16 304.00,80.00 304.00,80.00 302.69,101.91 302.69,101.91 301.21,107.33 289.48,111.53 285.28,116.18 281.71,120.13 281.97,125.33 279.81,130.00 277.60,134.80 273.67,138.32 270.00,142.00 Z M 221.00,65.00 C 223.33,72.19 225.52,88.10 222.28,95.00 221.03,97.65 218.06,103.66 215.79,105.25 210.88,108.70 207.34,105.17 207.04,100.00 206.85,96.68 207.14,92.03 208.93,89.17 210.57,86.55 213.43,85.00 214.98,81.99 214.98,81.99 219.00,65.00 219.00,65.00 219.00,65.00 221.00,65.00 221.00,65.00 Z M 118.00,69.00 C 114.73,75.55 111.50,78.37 113.00,86.00 113.00,86.00 133.00,76.25 133.00,76.25 133.00,76.25 141.00,80.00 141.00,80.00 136.58,86.86 124.80,87.46 118.15,93.53 111.83,99.28 117.38,109.19 113.69,114.49 111.22,118.02 105.13,116.70 102.99,113.47 101.76,111.60 102.00,108.20 102.00,106.00 101.99,99.80 101.23,87.17 103.98,82.00 105.07,79.94 107.03,77.88 108.49,76.00 112.07,71.38 111.85,69.49 118.00,69.00 Z M 168.01,71.74 C 161.47,75.34 161.16,80.25 162.90,87.00 163.81,90.51 165.48,94.62 169.99,93.21 174.12,91.91 174.55,88.43 175.85,85.00 176.48,83.35 178.06,80.57 178.15,79.00 178.45,73.44 172.85,70.72 168.01,71.74 Z M 246.00,91.00 C 253.45,90.26 255.18,94.10 254.98,101.00 254.86,104.93 252.99,109.65 248.13,108.16 241.89,106.29 248.03,102.05 248.13,98.95 248.27,97.23 246.56,93.01 246.00,91.00 Z M 131.00,99.00 C 133.28,107.07 138.99,117.39 134.55,125.96 133.40,128.18 129.21,133.26 126.30,132.30 123.08,131.24 122.99,125.70 123.29,123.00 124.38,113.10 125.65,107.56 131.00,99.00 Z M 292.33,114.64 C 300.35,113.42 312.21,122.36 307.97,128.44 307.09,129.71 304.40,130.85 303.00,131.57 301.76,132.21 300.39,133.06 299.02,133.34 297.39,133.67 296.03,133.44 294.81,132.26 292.88,130.39 289.87,118.81 290.77,116.31 291.27,114.90 292.05,114.88 292.33,114.64 Z M 384.17,118.87 C 394.20,119.95 396.44,137.61 385.00,139.13 380.67,139.70 376.83,135.03 376.64,131.00 376.44,126.44 380.29,120.85 384.17,118.87 Z M 325.79,121.17 C 333.23,124.76 333.03,141.36 323.00,143.11 318.24,143.93 314.25,141.03 314.71,136.00 315.22,130.55 320.26,122.10 325.79,121.17 Z M 86.17,124.17 C 87.96,124.01 91.13,123.95 92.98,124.17 103.95,126.69 93.93,142.41 87.85,133.85 87.04,132.71 86.62,131.35 86.17,130.00 85.98,128.22 86.02,125.83 86.17,124.17 Z M 20.00,139.00 C 21.25,140.51 23.88,144.06 25.37,144.98 32.86,149.58 46.76,140.71 54.00,139.00 51.19,144.23 40.22,154.45 34.00,154.57 31.90,154.61 29.93,153.61 28.00,152.93 28.00,152.93 22.06,150.84 22.06,150.84 17.38,148.13 17.01,143.06 20.00,139.00 Z"/>
制作视频
在 内容分发 中进行搜索
请输入您想要搜索的关键词