成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初識貝塞爾曲線

MasonEast / 2794人閱讀

摘要：貝塞爾曲線被廣泛用于制圖軟件中。多邊二次貝塞爾曲線可以看到有兩個控制點(diǎn)，這樣連續(xù)畫出來了。如果前一個曲線不存在，當(dāng)前點(diǎn)就是第一個控制點(diǎn)在中使用繪制二次貝塞爾曲線，參數(shù)分別為控制點(diǎn)和終點(diǎn)的值。繪制三次貝塞爾曲線。

貝塞爾曲線在CSS動畫中和canvas、svg繪圖中都是比較重要的一個東西！所以我來好好的小結(jié)一下關(guān)于它的一些東西。

什么是貝塞爾曲線 
貝塞爾曲線于1962，由法國工程師皮埃爾·貝塞爾（Pierre Bézier）所廣泛發(fā)表，他運(yùn)用貝塞爾曲線來為汽車的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線最初由Paul de Casteljau于1959年運(yùn)用de Casteljau演算法開發(fā)，以穩(wěn)定數(shù)值的方法求出貝茲曲線。

貝塞爾曲線被廣泛用于制圖軟件中。
以前描述曲線并沒有很好的方法，直到它的出現(xiàn)。
如果你用過PS、AI之類的制圖軟件，想必一定會很好理解。

你可以登錄https://bezier.method.ac/這個網(wǎng)站，在線學(xué)習(xí)體驗(yàn)使用PS中的鋼筆工具，進(jìn)行繪制各種形狀的圖案。

二次貝塞爾曲線

二次貝塞爾曲線，我們要繪制出來需要指定：

起點(diǎn)

終點(diǎn)

控制點(diǎn)

我們可以看到如圖所示，在控制點(diǎn)和起點(diǎn)的中點(diǎn)，連接上了控制點(diǎn)與終點(diǎn)的中點(diǎn)，這根線的終點(diǎn)，就是與曲線相交的一個點(diǎn)。
可以認(rèn)為控制點(diǎn)像一個磁鐵一樣，把線吸了過去。

多邊二次貝塞爾曲線
可以看到有兩個控制點(diǎn)，這樣連續(xù)畫出來了。
如果想要連貫的曲線，那么它們的控制點(diǎn)應(yīng)該是中心對稱的。

三次貝塞爾曲線

三次貝塞爾曲線可以包括一個拐點(diǎn)。
它擁有兩個控制點(diǎn)，兩個控制點(diǎn)中間的中點(diǎn)，分別連接控制點(diǎn)與起點(diǎn)、終點(diǎn)的連線的中點(diǎn)。這兩根線的中點(diǎn)分別相連接，這個中點(diǎn)就是和曲線相交的地方（有點(diǎn)繞，看圖就明白了?。?br>

這一般也是繪圖軟件里常用的：

應(yīng)用 在CSS中的應(yīng)用

我們可以指定動畫的運(yùn)動曲線。在CSS中運(yùn)用的也是三次貝塞爾曲線。

cubic-bezier(控制點(diǎn)x1, 控制點(diǎn)y1, 控制點(diǎn)x2, 控制點(diǎn)y2)

這個代表的是速度曲線，也就是y值是速度，可以看到粉紅色和藍(lán)色的圓點(diǎn)就是兩個控制點(diǎn)：

而我們CSS中內(nèi)置的一些默認(rèn)的屬性值，實(shí)際上是存了貝塞爾曲線的一些預(yù)設(shè):

更多可以在：貝塞爾CSS在線體驗(yàn) 這里進(jìn)行體驗(yàn)。

SVG

在SVG中定義一個二次貝塞爾曲線，用字母Q來表示，緊跟控制點(diǎn)和終點(diǎn)坐標(biāo)：

意思是，我們繪制一條路徑，先把點(diǎn)Move（M）移動到(30, 75)的位置，然后開始繪制！
以(240, 30)為控制點(diǎn)，曲線的終點(diǎn)是(300, 120)。

如果我們要繪制多邊二次貝塞爾曲線，直接在Q后面繼續(xù)跟兩組坐標(biāo)：

Q 80 30, 100 100, 130 65, 200 80

比如這組數(shù)據(jù)，就是在(100, 100)畫完一邊后，繼續(xù)以(130, 65)為控制點(diǎn)，畫到(200, 80)為終點(diǎn)。

然后，我們提到之前的中心對稱問題，可以直接使用T字母來表示中心對稱的控制點(diǎn)。

Q 80 30, 100 100, T, 200 80

如果我們要繪制三次貝塞爾曲線，后面跟著的坐標(biāo)組就有3個，分別就是起點(diǎn)的控制點(diǎn)、終點(diǎn)的控制點(diǎn)和端點(diǎn)（終點(diǎn)）。用字母C來開頭指定。

M20 80, C 50 20, 150 60, 200 120

另外還有字母S開頭，S x2 y2 x y，表示用x2 y2作為控制點(diǎn)，第一個控制點(diǎn)是前一個C命令的終點(diǎn)控制點(diǎn)的中心對稱點(diǎn)。（如果前一個曲線不存在，當(dāng)前點(diǎn)就是第一個控制點(diǎn)）

canvas

在canvas中使用quadraticCurveTo繪制二次貝塞爾曲線，參數(shù)分別為控制點(diǎn)和終點(diǎn)的x,y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20)"
ctx.stroke();

bezierCurveTo繪制三次貝塞爾曲線。參數(shù)為起點(diǎn)控制點(diǎn)、終點(diǎn)控制點(diǎn)和終點(diǎn)的x、y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)"
ctx.stroke();
最后

本文是根據(jù)自己的一些小積累和資料查找總結(jié)出來的，如果有錯誤歡迎指正^_^，謝謝。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114112.html

相關(guān)文章

  • 用canvas繪制一個曲線動畫——深入理解貝塞爾曲線

    摘要：實(shí)現(xiàn)這樣一個曲線動畫可以點(diǎn)擊這里查看在線演示在寫代碼之前，先了解一下什么是貝塞爾曲線吧。繪制二次貝賽爾曲線路徑這樣就完成了基本的繪制二次貝塞爾曲線的方法了。 我的github博客地址 https://github.com/hujiulong/... 前言 在前端開發(fā)中，貝賽爾曲線無處不在： 它可以用來繪制曲線，在svg和canvas中，原生提供的曲線繪制都是使用貝賽爾曲線 它也可以...

    xiaowugui666 評論0 收藏0

  • 如何理解并應(yīng)用貝塞爾曲線

    摘要：動畫曲線的應(yīng)用了解了如何用貝塞爾曲線來指定動畫曲線后，很多動畫涉及到速度方面的效果就可以實(shí)現(xiàn)了，例如小車加速剎車，彈簧動畫等速度軌跡都可以根據(jù)自己的需要來進(jìn)行定制。 貝塞爾曲線又叫貝茲曲線，在大學(xué)高數(shù)中一度讓我非常頭疼。前陣子練手寫動畫的時候，發(fā)現(xiàn)貝塞爾曲線可以應(yīng)用于軌跡的繪制以及定義動畫曲線。 本文就來探究一下，貝塞爾曲線到底是個什么樣的存在。 貝塞爾曲線原理 貝塞爾曲線由n個點(diǎn)來決...

    余學(xué)文 評論0 收藏0

  • css3 動畫（二）貝塞爾曲線

    摘要：根據(jù)方程的最高階數(shù)，可以分為線性貝塞爾曲線二次貝塞爾曲線三次貝塞爾曲線以及更高次的貝塞爾曲線。貝塞爾曲線掃盲在中使用的函數(shù)，是一個三次貝塞爾曲線函數(shù)。三次貝塞爾曲線中四個點(diǎn)，在中第一個點(diǎn)和最后一個點(diǎn)是固定坐標(biāo)的和是傳入函數(shù)中的參數(shù)的。 前言 上一篇 css3 動畫（一） transition 中，介紹了 transition 的用法。其中 transition 包含四個可設(shè)置的屬性： ...

    soasme 評論0 收藏0

  • 貝塞爾曲線算法之JS獲取點(diǎn)

    摘要：什么是貝塞爾曲線貝塞爾曲線，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。這個是三階貝塞爾曲線，同理，綠點(diǎn)有個，點(diǎn)與點(diǎn)之間都是按百分比運(yùn)動，最終得到一個小黑點(diǎn)。同理，還有四階貝塞爾。我們看看中階貝塞爾曲線上獲取點(diǎn)的效果的地址 什么是貝塞爾曲線？ 貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟(jì)埃曲線，是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。 showImg(htt...

    SQC 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<