From 9ddc3d4aba9a1b3226681131555789afb290f66c Mon Sep 17 00:00:00 2001 From: sloop Date: Thu, 2 Jun 2016 01:15:25 +0800 Subject: [PATCH] Update --- CustomView/Advance/[8]Path_Play.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/CustomView/Advance/[8]Path_Play.md b/CustomView/Advance/[8]Path_Play.md index 8ad6883..3126a68 100644 --- a/CustomView/Advance/[8]Path_Play.md +++ b/CustomView/Advance/[8]Path_Play.md @@ -433,6 +433,23 @@ measure.getMatrix(distance, matrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasur * 2.矩阵对旋转角度默认为图片的左上角，我们此处需要使用 `preTranslate` 调整为图片中心。 * 3.pre(矩阵前乘) 与 post(矩阵后乘) 的区别，此处请等待后续的文章或者自行搜索。 +***** + + +## Path & SVG + +我们知道，用Path可以创建出各种个样的图形，但如果图形过于复杂时，用代码写就不现实了，不仅麻烦，而且容易出错，所以在绘制复杂的图形时我们一般是将 SVG 图像转换为 Path。 + +你说什么是 SVG? + SVG 是一种矢量图，内部用的是 xml 格式化存储方式存储这操作和数据，你完全可以将 SVG 看作是 Path 的各项操作简化书写后的存储格式。 + + Path 和 SVG 结合通常能诞生出一些奇妙的东西，如下: + + + + +***** + ## Path使用技巧 **话说本篇文章的名字不是叫 玩出花样么？怎么只见前面啰啰嗦嗦的扯了一大堆不明所以的东西，花样在哪里？** @@ -480,12 +497,16 @@ measure.getMatrix(distance, matrix, PathMeasure.TANGENT_MATRIX_FLAG | PathMeasur 绘制部分是根据 当前状态以及从 ValueAnimator 获得的数值来截取 Path 中合适的部分绘制出来。 +### 最终效果 + + ### 源码 上面的内容是为了帮助大家从把控全局流程以及理解某些细节的设计思路，而更多的内容都藏在代码中，代码总体也不算长，感兴趣的可以自己敲一遍。 #### [戳这里查看源码]() +> PS: 本代码仅作为示例使用，还有诸多不足，如 自定义属性，视图大小， 点击事件， 监听回调 等，并不适合直接使用，有需要的可以自行补足相关内容。