{"action":"opened","issue":{"url":"https://api.github.com/repos/chenxiaochun/blog/issues/2","repository_url":"https://api.github.com/repos/chenxiaochun/blog","labels_url":"https://api.github.com/repos/chenxiaochun/blog/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/chenxiaochun/blog/issues/2/comments","events_url":"https://api.github.com/repos/chenxiaochun/blog/issues/2/events","html_url":"https://github.com/chenxiaochun/blog/issues/2","id":223997958,"number":2,"title":"svg贝塞尔曲线","user":{"login":"chenxiaochun","id":1744713,"avatar_url":"https://avatars0.githubusercontent.com/u/1744713?v=3","gravatar_id":"","url":"https://api.github.com/users/chenxiaochun","html_url":"https://github.com/chenxiaochun","followers_url":"https://api.github.com/users/chenxiaochun/followers","following_url":"https://api.github.com/users/chenxiaochun/following{/other_user}","gists_url":"https://api.github.com/users/chenxiaochun/gists{/gist_id}","starred_url":"https://api.github.com/users/chenxiaochun/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chenxiaochun/subscriptions","organizations_url":"https://api.github.com/users/chenxiaochun/orgs","repos_url":"https://api.github.com/users/chenxiaochun/repos","events_url":"https://api.github.com/users/chenxiaochun/events{/privacy}","received_events_url":"https://api.github.com/users/chenxiaochun/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-04-25T01:59:28Z","updated_at":"2017-04-25T01:59:28Z","closed_at":null,"body":"弧形的特点是整洁，也能达到我们想要的效果，但是很少有人用“优雅”这个词来形容它。如果想要优雅，则需要通过二次和三次方程绘图生成曲线。数学家在几百年前就知道这些曲线了，但是绘制它们始终是一个计算很复杂的任务。法国汽车制造商雷诺公司的工程师皮埃尔·贝塞尔和雪铁龙公司的物理学家和数学家Paul de Casteljau 改变了这一状况，他们开发并推广了一种更简便的方式来生成这些曲线。\r\n\r\n如果你用过Adobe Illustrator这类绘图程序，可以通过指定两个点以及移动如下图所示的“控制柄”来绘制这些贝塞尔曲线。控制柄的端点称为控制点，因为它控制着曲线的状态。当我们移动控制柄时，曲线以一种在外行看来非常神秘的方式变化着。Key Point软件公司的图形设计师迈克·伍德（Mike Woodburn），提出了下图这种形象的表示控制点和曲线关系的方式：想象一下线是由柔性金属制造的。控制点内部是一个磁铁，与控制点越近，吸引力越强。\r\n![](http://img14.360buyimg.com/uba/jfs/t4708/318/3266724377/26237/97002499/58fdc46bNdba1819b.png)\r\n\r\n## 二次贝塞尔曲线\r\n最简单的贝塞尔曲线就是二次曲线。我们要指定起点、终点和控制点。假设有两个支柱放在线的两个端点，这两个支柱的交点就是控制点。拉紧两个支柱中点的是一根橡皮筋。其中曲线弯曲的地方正好和橡皮筋的中点相连。如下图所示：\r\n![](http://img11.360buyimg.com/uba/jfs/t5266/323/352774589/31482/511a1b83/58fdcae7Nbfc49b16.png)\r\n\r\n起点/终点以及以及控制点之间的线与曲线的起点/终点成切线。曲线首先沿着到达控制点的线，然后弯曲到达中点，再顺着“支柱”线的方向。曲线最终从控制点沿着线向上滑到终点。Adobe Illustrator这类程序只会展示一个“支柱”。下次使用这类程序时，可以在心里添加第二个支柱，这样产生的曲线就不那么神秘了。\r\n\r\n可以通过在`<path>`中使用`Q`或者`q`命令指定一个二次曲线。这个命令后面紧跟着两组指定控制点和终点的坐标。大写命令意味着绝对坐标，小写意味着相对坐标。\r\n[http://oreillymedia.github.io/svg-essentials-examples/ch07/quadratic-bezier.html](http://oreillymedia.github.io/svg-essentials-examples/ch07/quadratic-bezier.html)\r\n\r\n"}}
{"actor":{"display_login":"chenxiaochun"}}