2017-03-05 18:33:44 -08:00
<!doctype html>
< html >
< head >
< meta charset = "utf-8" >
< title > A Primer on Bézier Curves< / title >
2017-04-12 10:25:23 -07:00
< link rel = "shortcut icon" href = "favicon.png" type = "image/png" >
2017-03-05 18:33:44 -08:00
2017-03-07 08:27:07 -08:00
< script >
(function() {
// force https except during local testing (e.g. not on port 80)
let loc = window.location.toString();
if (loc.indexOf(":8080") === -1 & & loc.indexOf("http:") === 0) {
window.location = loc.replace("http:","https:");
}
// if we're still here, load google analytics
2017-04-02 22:26:28 -07:00
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69475841-3', 'auto');
ga('send', 'pageview');
2017-03-07 08:27:07 -08:00
}());
< / script >
2017-03-05 18:33:44 -08:00
<!-- optional <base> element to make sure localised content still uses the base location -->
< base href = ".." >
<!-- mobile optimize -->
< meta name = "viewport" content = "width=800, initial-scale=1.0" >
<!-- opengraph information -->
< meta property = "og:title" content = "A Primer on Bézier Curves" >
< meta property = "og:type" content = "text" >
< meta property = "og:url" content = "http://pomax.github.io/bezierinfo" >
< meta property = "og:description" content = "A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them." >
< meta property = "og:locale" content = "en_GB" >
< meta property = "og:type" content = "article" >
< meta property = "og:published_time" content = "2013-06-13 12:00:00" >
< meta property = "og:author" content = "Mike 'Pomax' Kamermans" >
< meta property = "og:section" content = "Bézier Curves" >
< meta property = "og:tag" content = "Bézier Curves" >
< style >
html, body, article { height: 100%; margin: 0; }
body { width: 800px; margin: auto; font-size: 4.25mm!important; }
< / style >
< link rel = "stylesheet" href = "stylesheets/style.css" >
< / head >
< body >
<!-- referral tracking, because I like knowing who's linking to my book -->
< script src = "lib/site/referrer.js" async > < / script >
< div class = "dev" style = "display:none;" >
< style >
div.dev {
background: rgb(43, 49, 95);
color: rgb(81, 181, 255);
position: fixed;
transform: rotate(-45deg);
width: 22em;
text-align: center;
top: 4em;
left: -6em;
font-variant: small-caps;
font-weight: bolder;
font-family: Helvetica;
box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3);
}
< / style >
DEV PREVIEW ONLY
< script >
(function() {
var loc = window.location.toString();
if(loc.indexOf('localhost')!==-1 || loc.indexOf('-2')!==-1) {
var e = document.querySelector('div.dev');
e.removeAttribute("style");
}
}());
< / script >
< / div >
<!-- Because people probably want to share this article -->
< div class = "sharebuttons" >
< style >
div.sharebuttons {
position: fixed;
top: 1rem;
left: 1rem;
padding: 0.1em;
background: white;
}
div.sharebuttons img {
min-width: 1.25rem;
min-height: 1.25rem;
max-height: 1.25rem;
}
}
< / style >
2017-04-12 09:55:28 -07:00
< a class = "social reddit" href = "https://www.reddit.com/submit?url=https://pomax.github.io/bezierinfo&title=A Primer on Bézier Curves&text=A free, online book for when you really need to know how to do Bézier things." >
2017-03-05 18:33:44 -08:00
< img src = "https://www.redditstatic.com/spreddit1.gif" alt = "submit to reddit" title = "submit to reddit" >
< / a >
2017-04-12 09:55:28 -07:00
< a class = "social hn" href = "https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves" >
2017-03-05 18:33:44 -08:00
< img src = "https://news.ycombinator.com/y18.gif" alt = "submit to hacker news" title = "submit to hacker news" >
< / a >
2017-04-12 09:55:28 -07:00
< a class = "social twitter" href = "https://twitter.com/intent/tweet?hashtags=bezier,curves,maths&original_referer=https://pomax.github.io/bezierinfo&text=Reading%20%22A%20Primer%20on%20Bezier%20Curves%22%20by%20@TheRealPomax%20over%20on%20https://pomax.github.io/bezierinfo" >
2017-03-05 18:33:44 -08:00
< img src = "images/twitter.ico" alt = "tweet your read" title = "tweet your read" >
< / a >
< / div >
< article >
< div id = "article" >
<!-- these rules will get overwritten by the style in the article.js React bundle -->
< style >
header h1, header h2 { text-align: center; }
header h1 { font-size: 300%; margin: 0.2em; }
p.jsnote { margin: 2em; text-align: justify; }
p.jsnote:first-child { width: 13em; margin: auto; }
< / style >
< header >
< h1 > A Primer on Bézier Curves< / h1 >
< h2 > A free, online book for when you really need to know how to do Bézier things.< / h2 >
< / header >
<!-- This content only shows for as long as JS/React hasn't loaded the page content -->
< section >
< p class = "jsnote" > Loading the article< span id = "loader" > ...< / span > < / p >
< p class = "enabling jsnote" > If you have JavaScript disabled, you'll have to enable it, as this book heavily relies on JS rendering, both for the base content (it's been written as a React application) and all the interactive graphics, which rely on JS not just for the user interaction but also for the live-drawing (none of the graphics in this book are flat images, they're all live-rendered).< / p >
< script > var n = document . querySelector ( ".enabling" ) ; n . parentNode . removeChild ( n ) ; ( function update ( el , str ) { str = ( str . length === 3 ) ? '' : str + '.' ; el . textContent = str ; setTimeout ( function ( ) { update ( el , str ) ; } , 333 ) ; } ( document . querySelector ( "#loader" ) , "..." ) ) ; < / script >
< / section >
<!-- this content is retrieved from the preface section -->
< section > < h2 > 序言< / h2 >
< p > 我们通常用线条来绘制2D图形， ： ， ， ！ < / p >
< p > 然而，绘制曲线却是个大问题。虽然我们可以很容易地徒手画出曲线，但除非给出描述曲线的数学函数，不然计算机无法画出曲线。实际上，画直线时也需要数学函数，但画直线所需的方程式很简单，我们在这里不去考虑。在计算机看来，所有线条都是“函数”，不管它们是直线还是曲线。然而，这就表示我们需要找到能在计算机上表现良好的曲线方程。这样的曲线有很多种，在本文我们主要关注一类特殊的、备受关注的函数，基本上任何画曲线的地方都会用到它：贝塞尔曲线。< / p >
< p > 它们是以< a href = "https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier" > Pierre Bézier< / a > 命名的， ， ， （ ） < a href = "https://en.wikipedia.org/wiki/Paul_de_Casteljau" > Paul de Casteljau< / a > 是第一个发现这类曲线特性的人， ， ， ，
贝塞尔曲线本质上是伯恩斯坦多项式，这是< a href = "https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein" > Sergei Natanovich Bernstein< / a > 研究的一种数学函数， ， ， ： ， ， ， < / p >
< p > 那么，要是你自己想编程实现它们呢？有哪些陷阱？你怎么画它们？包围盒是怎么样的，怎么确定交点，怎么拉伸曲线，简单来说：你怎么对曲线做一切你想做的事？这就是这篇文章想说的。准备好学习一些数学吧!< / p >
< p > —Pomax (推特账号, < a href = "https://twitter.com/TheRealPomax" > @TheRealPomax< / a > )< / p >
< div className = "note" >
< h2 id = "-" > 注意：几乎所有的贝塞尔图形都是可交互的。< / h2 >
< p > 这个页面使用了基于< a href = "http://pomax.github.io/bezierjs" > Bezier.js< / a > 的可交互例子，还有一些用< a href = "http://MathJax.org" > MathJax< / a > 排版的“真正的”数学（ ） ， ， ， < / p >
< h2 id = "-" > 这本书是开源的。< / h2 >
< p > 这本书是开源的软件项目， < a href = "https://github.com/pomax/bezierinfo" > https://github.com/pomax/bezierinfo< / a > ，它是你现在在看的这个，纯粹用来展示的版本。另外一个< a href = "https://github.com/pomax/BezierInfo-2" > https://github.com/pomax/BezierInfo-2< / a > ， ， ， < / p >
< h2 id = "-" > 用到的数学将有多复杂？< / h2 >
< p > 这份入门读物用到的大部分数学知识都是高中所学的。如果你理解基本的计算并能看懂英文的话，就能上手这份材料。有时候会用到< em > 复杂< / em > 一点的数学，但如果你不想深究它们，可以选择跳过段落里的“详解”部分，或者直接跳到章节末尾，避开那些看起来很深入的数学。章节的末尾往往会列出一些结论，因此你可以直接利用这些结论。< / p >
< h2 id = "-" > 问题，评论：< / h2 >
< p > 如果你有对于新章节的一些建议，点击 < a href = "https://github.com/pomax/BezierInfo-2/issues" > Github issue tracker< / a > （ ） ， ， ， ， ， ， ‘ ’ < / p >
< h2 id = "-" > 给我买杯咖啡？< / h2 >
< p > 如果你很喜欢这本书，或发现它对你要做的事很有帮助，或者你想知道怎么表达自己对这本书的感激，你可以 < a href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW" > 给我买杯咖啡< / a > ， ， ， ， ， < / p >
< / div > < / section >
< / div >
< / article >
<!-- the actual article is a JS bundle -->
< script src = "zh-CN/article.js" async > < / script >
2017-04-12 10:03:56 -07:00
< script src = "lib/site/social-updater.js" async > < / script >
2017-03-05 18:33:44 -08:00
< / body >
< / html >
