mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-02-24 17:42:43 +01:00
145 lines
10 KiB
HTML
145 lines
10 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>A Primer on Bézier Curves</title>
|
|||
|
|
|
|||
|
|
<!-- 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>
|
|||
|
|
<a 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.">
|
|||
|
|
<img src="https://www.redditstatic.com/spreddit1.gif" alt="submit to reddit" title="submit to reddit">
|
|||
|
|
</a>
|
|||
|
|
<a href="https://news.ycombinator.com/submitlink?u=https://pomax.github.io/bezierinfo&t=A Primer on Bézier Curves">
|
|||
|
|
<img src="https://news.ycombinator.com/y18.gif" alt="submit to hacker news" title="submit to hacker news">
|
|||
|
|
</a>
|
|||
|
|
<a 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">
|
|||
|
|
<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>命名的，尽管他并不是第一个，或者说唯一“发明”了这种曲线的人，但他让世界知道了这种曲线十分适合设计工作（在1962年为Renault工作并发表了他的研究）。有人也许会说数学家<a href="https://en.wikipedia.org/wiki/Paul_de_Casteljau">Paul de Casteljau</a>是第一个发现这类曲线特性的人，在Citroën工作时，他提出了一种很优雅的方法来画这些曲线。然而，de Casteljau没有发表他的工作，这使得“谁先发现”这一问题很难有一个确切的答案。
|
|||
|
|
贝塞尔曲线本质上是伯恩斯坦多项式，这是<a href="https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein">Sergei Natanovich Bernstein</a>研究的一种数学函数，关于它们的出版物至少可以追溯到1912年。无论如何，这些都只是一些冷知识，你可能更在意的是这些曲线很方便：你可以连接多条贝塞尔曲线，并且连接起来的曲线看起来就像是一条曲线。甚至，在你在Photoshop中画“路径”或使用一些像Flash、Illustrator和Inkscape这样的矢量绘图程序时，所画的曲线都是贝塞尔曲线。</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> 排版的“真正的”数学（LaTeX形式）。这个页面是用Webpack离线生成的React应用，这便让加入“查看源码”选项更具挑战性了。我仍然试图将它们添加回来，但跟前几年的版本相比，不觉得它能够支撑部署这个更新。</p>
|
|||
|
|
<h2 id="-">这本书是开源的。</h2>
|
|||
|
|
<p>这本书是开源的软件项目，现有两个github仓库。第一个<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>，是带有所有html, javascript和css的开发版本。你可以fork任意一个，随便做些什么，当然除了把它当作自己的作品来商用。 =)</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> （也可以点右上角的repo链接）。如果你有关于材料的一些问题，由于我现在在做改写工作，目前没有评论功能，但你可以用issue跟踪来发表评论。一旦完成重写工作，我会把评论功能加上，或者会有“选择文字段落，点击‘问题’按钮来提问”的系统。到时候我们看看。</p>
|
|||
|
|
<h2 id="-">给我买杯咖啡？</h2>
|
|||
|
|
<p>如果你很喜欢这本书，或发现它对你要做的事很有帮助，或者你想知道怎么表达自己对这本书的感激，你可以 <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW">给我买杯咖啡</a> ，所少钱取决于你。这份工作持续了很多年，从一份小小的简要到70多页关于贝塞尔曲线的读物，在完成它的过程中倾注了很多咖啡。我从未后悔花在这上面的每一分钟，但如果有更多咖啡的话，我可以坚持写下去!</p>
|
|||
|
|
</div></section>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<!-- the actual article is a JS bundle -->
|
|||
|
|
<script src="zh-CN/article.js" async></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|