转http://blog.csdn.net/zimo2013/article/details/49824253
1.效果图
2.SVG-Path路径
下面的命令可用于路径数据:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
请把下面的代码拷贝到记事本,然后把文件保存为 "path1.svg"。把此文件放入您的 web 目录:
- <?xml version="1.0" standalone="no"?>
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
- <svg width="100%" height="100%" version="1.1"
- xmlns="http://www.w3.org/2000/svg">
- <path d="M250 150 L150 350 L350 350 Z" />
- </svg>
上面的例子定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。
3.图片生成SVG格式
这里推荐使用GIMP工具生成,具体步骤如下:
根据以上找到Path路径,将其保存起来
再到路径对话框中,将path导出
如果找不到路径对话框,可根据下图找到
- <?xml version="1.0" encoding="UTF-8" standalone="no"?>
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
- <svg xmlns="http://www.w3.org/2000/svg"
- width="1.77778in" height="1.77778in"
- viewBox="0 0 128 128">
- <path id="选区"
- fill="none" stroke="black" stroke-width="1"
- d="M 108.54,26.04
- C 131.59,52.94 125.04,97.93 93.00,114.74
- 79.15,122.00 75.25,122.17 60.00,122.00
- 22.32,121.56 -2.52,80.38 8.75,46.00
- 16.01,23.85 33.60,10.58 56.00,6.44
- 75.35,3.96 95.68,11.04 108.54,26.04 Z
- M 56.97,45.15
- C 52.64,43.32 36.54,44.00 31.00,44.00
- 31.00,44.00 31.00,76.00 31.00,76.00
- 31.02,78.13 30.74,81.51 32.60,82.98
- 34.49,84.47 42.35,84.00 45.00,84.00
- 49.96,83.99 56.82,83.94 60.73,80.43
- 66.36,75.36 66.06,66.13 56.97,63.00
- 56.97,63.00 56.97,61.00 56.97,61.00
- 65.30,56.20 63.38,47.91 56.97,45.15 Z
- M 75.00,47.00
- C 75.00,47.00 75.00,49.00 75.00,49.00
- 75.00,49.00 90.00,49.00 90.00,49.00
- 90.00,49.00 90.00,47.00 90.00,47.00
- 90.00,47.00 75.00,47.00 75.00,47.00 Z
- M 53.69,50.02
- C 56.68,52.02 56.68,57.83 53.69,59.83
- 51.13,61.53 42.36,61.00 39.00,61.00
- 39.00,61.00 39.00,49.00 39.00,49.00
- 42.16,49.00 51.36,48.47 53.69,50.02 Z
- M 90.00,71.00
- C 101.61,70.78 95.70,60.78 91.70,57.84
- 81.22,50.14 65.06,59.66 68.95,74.00
- 72.11,85.62 91.42,89.31 96.00,75.95
- 89.20,76.54 82.26,84.08 76.93,75.95
- 76.03,74.51 75.51,72.57 75.00,71.00
- 75.00,71.00 90.00,71.00 90.00,71.00 Z
- M 91.00,67.00
- C 91.00,67.00 75.00,67.00 75.00,67.00
- 77.80,56.34 89.44,55.99 91.00,67.00 Z
- M 48.00,65.14
- C 49.46,65.02 51.56,65.02 52.95,65.14
- 57.94,66.90 59.11,73.01 55.57,76.57
- 52.93,79.23 48.51,79.13 45.00,78.98
- 42.86,78.89 40.68,78.89 39.60,76.69
- 38.72,74.89 39.00,67.39 39.00,65.14
- 39.00,65.14 48.00,65.14 48.00,65.14 Z" />
- </svg>
4.实现方式
这里使用AndroidFillableLoaders框架加载svg,更多可以查看作者文章http://jorgecastillo.xyz/2015/08/16/android-fillable-loaders/
- <com.github.jorgecastillo.FillableLoader
- android:id="@+id/fillableLoader"
- android:layout_width="200dp"
- android:layout_height="100dp"
- app:fl_originalWidth="@integer/original_svg_width"
- app:fl_originalHeight="@integer/original_svg_height"
- app:fl_strokeColor="@color/stroke_color"
- app:fl_fillColor="@color/fill_color"
- app:fl_strokeWidth="@dimen/stroke_width"
- app:fl_strokeDrawingDuration="@integer/stroke_drawing_duration"
- app:fl_fillDuration="@integer/fill_duration"
- app:fl_clippingTransform="waves"
- />
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- String svg = "M 108.54,26.04\n" +
- "C 131.59,52.94 125.04,97.93 93.00,114.74\n" +
- " 79.15,122.00 75.25,122.17 60.00,122.00\n" +
- " 22.32,121.56 -2.52,80.38 8.75,46.00\n" +
- " 16.01,23.85 33.60,10.58 56.00,6.44\n" +
- " 75.35,3.96 95.68,11.04 108.54,26.04 Z\n" +
- "M 56.97,45.15\n" +
- "C 52.64,43.32 36.54,44.00 31.00,44.00\n" +
- " 31.00,44.00 31.00,76.00 31.00,76.00\n" +
- " 31.02,78.13 30.74,81.51 32.60,82.98\n" +
- " 34.49,84.47 42.35,84.00 45.00,84.00\n" +
- " 49.96,83.99 56.82,83.94 60.73,80.43\n" +
- " 66.36,75.36 66.06,66.13 56.97,63.00\n" +
- " 56.97,63.00 56.97,61.00 56.97,61.00\n" +
- " 65.30,56.20 63.38,47.91 56.97,45.15 Z\n" +
- "M 75.00,47.00\n" +
- "C 75.00,47.00 75.00,49.00 75.00,49.00\n" +
- " 75.00,49.00 90.00,49.00 90.00,49.00\n" +
- " 90.00,49.00 90.00,47.00 90.00,47.00\n" +
- " 90.00,47.00 75.00,47.00 75.00,47.00 Z\n" +
- "M 53.69,50.02\n" +
- "C 56.68,52.02 56.68,57.83 53.69,59.83\n" +
- " 51.13,61.53 42.36,61.00 39.00,61.00\n" +
- " 39.00,61.00 39.00,49.00 39.00,49.00\n" +
- " 42.16,49.00 51.36,48.47 53.69,50.02 Z\n" +
- "M 90.00,71.00\n" +
- "C 101.61,70.78 95.70,60.78 91.70,57.84\n" +
- " 81.22,50.14 65.06,59.66 68.95,74.00\n" +
- " 72.11,85.62 91.42,89.31 96.00,75.95\n" +
- " 89.20,76.54 82.26,84.08 76.93,75.95\n" +
- " 76.03,74.51 75.51,72.57 75.00,71.00\n" +
- " 75.00,71.00 90.00,71.00 90.00,71.00 Z\n" +
- "M 91.00,67.00\n" +
- "C 91.00,67.00 75.00,67.00 75.00,67.00\n" +
- " 77.80,56.34 89.44,55.99 91.00,67.00 Z\n" +
- "M 48.00,65.14\n" +
- "C 49.46,65.02 51.56,65.02 52.95,65.14\n" +
- " 57.94,66.90 59.11,73.01 55.57,76.57\n" +
- " 52.93,79.23 48.51,79.13 45.00,78.98\n" +
- " 42.86,78.89 40.68,78.89 39.60,76.69\n" +
- " 38.72,74.89 39.00,67.39 39.00,65.14\n" +
- " 39.00,65.14 48.00,65.14 48.00,65.14 Z";
- fillableLoader = (FillableLoader) findViewById(R.id.fillableLoader);
- //将生成svg作为字符串传参进来
- fillableLoader.setSvgPath(svg);
- }
- findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View view) {
- //开启
- fillableLoader.start();
- }
- });