如果您正在關(guān)注，這是有關(guān)新CSS Shape（）函數(shù)的系列中的第三篇文章。我們已經(jīng)學(xué)會(huì)瞭如何繪製線路和弧線，在第三部分中，我將介紹曲線命令 - 您需要知道的缺少命令才能完全控制Shape（）函數(shù)。實(shí)際上，還有更多命令，但是您很少需要它們，並且您以後可以通過檢查文檔來輕鬆了解它們。

使用Shape（）更好的CSS形狀

1. 線和弧
2. 更多ONARCS
3. 曲線（您在這裡?。?/li>

曲線命令

通過指定控制點(diǎn)，此命令在兩個(gè)點(diǎn)之間添加了Bézier曲線。我們可以擁有一個(gè)控制點(diǎn)並創(chuàng)建一個(gè)二次曲線或兩個(gè)控制點(diǎn)並創(chuàng)建一個(gè)立方曲線。

Bézier，二次，立方，控制點(diǎn)？什麼？ ！

對(duì)於你們中的許多人來說，這個(gè)定義根本不清楚，甚至毫無用處！您可以花幾分鐘來閱讀有關(guān)Bézier曲線的信息，但真的值得嗎？可能不是，除非您的工作是全天創(chuàng)造形狀，並且在幾何學(xué)方面具有紮實(shí)的背景。

我們已經(jīng)將Cupic-Bezier（）作為動(dòng)畫的寬鬆功能，但是，老實(shí)說，誰真正了解它是如何工作的？我們要么依靠發(fā)電機(jī)來獲取代碼，要么讀了一個(gè)“無聊”的解釋，我們?cè)趦煞昼妰?nèi)忘記了。 （順便說一下，我在這裡有一個(gè)！）

不用擔(dān)心，這篇文章不會(huì)很無聊，因?yàn)槲抑饕獙⒅攸c(diǎn)放在實(shí)際示例上，更確切地說是將不規(guī)則形狀角落的用例。這是一個(gè)說明Bézier曲線的例子的數(shù)字。

藍(lán)點(diǎn)是起點(diǎn)和終點(diǎn)（我們稱它們?yōu)锳和B），而黑點(diǎn)是控制點(diǎn)。並註意曲線與紅色所示的虛線相切。

在本文中，我將僅考慮一個(gè)控制點(diǎn)。語法將遵循以下模式：

剪輯路徑：形狀（
  來自xa ya， 
  用XC YC曲線到XB YB
）；

弧命令與曲線命令

我們已經(jīng)在第1部分和第2部分中看到了ARC命令可以建立圓形邊緣和角落，但它不會(huì)涵蓋所有情況。這就是為什麼您需要曲線命令的原因。棘手的部分是知道何時(shí)使用每個(gè)人，答案是“取決於”。沒有一般規(guī)則，但我的建議是首先查看使用Arc是否可能（且容易）。如果沒有，則必須使用曲線。

對(duì)於某些形狀，我們可以使用這兩個(gè)命令獲得相同的結(jié)果，這對(duì)於我們了解曲線命令並將其與ARC進(jìn)行比較是一個(gè)很好的起點(diǎn)。

以以下示例：

這是第一個(gè)形狀的代碼：

 。形狀 {
  剪輯路徑：形狀（從0 0，
    弧達(dá)到100％100％CW的100％，
    線至0 100％）
}

對(duì)於第二個(gè)，我們有：

 。形狀 {
  剪輯路徑：形狀（從0 0，
    曲線至100％100％，100％0，
    線至0 100％）
}

ARC命令需要半徑（在這種情況下為100％），但是曲線命令需要一個(gè)控制點(diǎn)（在此示例中為100％0）。

現(xiàn)在，如果仔細(xì)觀察，您會(huì)注意到這兩個(gè)結(jié)果都不完全相同。使用ARC命令的第一個(gè)形狀是創(chuàng)建四分之一的圓，而使用曲線命令的形狀略有不同。如果您將兩者都置於彼此之上，則可以清楚地看到差異。

這很有趣，因?yàn)檫@意味著我們可以使用弧形或曲線繞一些角落，但結(jié)果略有不同。您問哪個(gè)更好？我想說這取決於您的視覺偏好和您正在創(chuàng)建的形狀。

在第1部分中，我們使用ARC命令創(chuàng)建了圓形選項(xiàng)卡，但是我們也可以用曲線創(chuàng)建它們。

你能發(fā)現(xiàn)差異嗎？它幾乎看不見，但在那裡。

請(qǐng)注意，我如何按照指令方式使用弧線，但是這次我們擁有控制點(diǎn)，這也是相對(duì)的。這部分可能會(huì)令人困惑，因此請(qǐng)密切注意下一位。

考慮以下內(nèi)容：

形狀（來自xa ya，xb yb xb yb的曲線）

這意味著（XB，YB）和（XC，YC）都是從起點(diǎn)的坐標(biāo)計(jì)算得出的相對(duì)坐標(biāo)。相當(dāng)於上述使用A指令的等效物是：

形狀（從xa ya，曲線到（xa xb）（ya yb）（ya yb）（xa xc）（yb yc））

我們可以通過添加指令來更改控制點(diǎn)的參考。我們可以使用啟動(dòng)（默認(rèn)值），結(jié)束或原點(diǎn)。

形狀（從Xa Ya，XB YB曲線，XB YB從末端帶有XC YC）

以上意味著控制點(diǎn)現(xiàn)在將考慮終點(diǎn)而不是起點(diǎn)。結(jié)果類似於：

形狀（從xa ya，曲線到（xa xb）（ya yb），帶（xa xb xc）（ya yb yb））

如果使用原點(diǎn)，則參考將是原點(diǎn)，因此控制點(diǎn)的坐標(biāo)為絕對(duì)而不是相對(duì)。

從指令中可能會(huì)為代碼和計(jì)算增加一些複雜性，因此不要打擾自己。只需知道它存在，以防萬一，但請(qǐng)繼續(xù)使用默認(rèn)值。

我認(rèn)為是時(shí)候做您的第一次作業(yè)了！類似於圓形的表練習(xí)，嘗試創(chuàng)建我們使用曲線而不是ARC在第1部分中覆蓋的倒半徑形狀。這是兩個(gè)版本供您參考，但是如果可以的話，請(qǐng)嘗試在不先窺視的情況下進(jìn)行操作。

讓我們畫更多的形狀！

既然我們已經(jīng)對(duì)曲線命令進(jìn)行了很好的概述，那麼讓我們考慮更複雜的形狀，而弧無法幫助我們圍繞角落，而唯一的解決方案是繪製曲線?？紤]到每個(gè)形狀都是獨(dú)特的，因此我將重點(diǎn)放在技術(shù)上，而不是代碼本身。

傾斜的邊緣

讓我們從具有傾斜邊緣的矩形形狀開始。

在左側(cè)獲得形狀非常簡單，但是右側(cè)的形狀有點(diǎn)棘手。我們可以用簡單的邊界 - 拉迪烏斯（Radius）繞兩個(gè)角，但是對(duì)於傾斜的邊緣，我們將使用shape（）和兩個(gè)曲線命令。

第一步是編寫形狀的代碼而沒有圓角（左角），這很簡單，因?yàn)槲覀冎皇褂胠ine命令：

 。形狀 {
  -s：90px; / *傾斜尺寸 */

  剪輯路徑： 
    形狀（從0 0，
    線到calc（100％-var（-s））0，
    線至100％100％，
    線至0 100％
    ）；
}

然後，我們沿每個(gè)角落，嘗試通過修改代碼將其圍住。這是一個(gè)說明我要在每個(gè)角落使用的技術(shù)的數(shù)字。

我們定義一個(gè)控制半徑的距離R。從角點(diǎn)的每一側(cè)，我沿著該距離移動(dòng)以創(chuàng)建兩個(gè)新點(diǎn)，上面以紅色為例。然後，我使用新點(diǎn)作為起點(diǎn)和終點(diǎn)來繪製曲線。角點(diǎn)將是控制點(diǎn)。

代碼變?yōu)椋?/p>

 。形狀 {
  -s：90px; / *傾斜尺寸 */

  剪輯路徑： 
    形狀（從0 0，
    到Xa ya，
    用計(jì)算（100％-var（-s））0的曲線到XB YB，0，
    線至100％100％，
    線至0 100％
    ）；
}

請(qǐng)注意曲線如何使用指令中的角點(diǎn)的坐標(biāo)，我們有兩個(gè)新點(diǎn)A和B。

到目前為止，該技術(shù)並不那麼複雜。對(duì)於每個(gè)轉(zhuǎn)角點(diǎn)，您可以用線曲線命令替換線命令，其中曲線命令在其指令中重複其舊點(diǎn)。

如果我們將相同的邏輯應(yīng)用於另一個(gè)角落，我們將獲得以下內(nèi)容：

 。形狀 {
  -s：90px; / *傾斜尺寸 */

  剪輯路徑： 
    形狀（從0 0，
    到Xa ya， 
    用計(jì)算（100％-var（-s））0的曲線到XB YB，0，
    線到XC YC，
    曲線至XD YD，100％100％，
    線至0 100％
    ）；
}

現(xiàn)在，我們需要計(jì)算新點(diǎn)的坐標(biāo)。這是棘手的部分，因?yàn)樗鼇K不總是簡單，並且可能需要一些複雜的計(jì)算。即使我詳細(xì)介紹了這種情況，邏輯對(duì)於我們製作的其他形狀也不相同，因此我會(huì)跳過數(shù)學(xué)部分並為您提供最終代碼：

 。盒子 {
  -H：200px; / *元素高度 */
  -s：90px; / *傾斜尺寸 */
  -r：20px; /* 半徑 */
  
  高度：var（-h）;
  邊界 - 拉迪烏斯：var（-r）0 0 var（-r）;
  -_ a：atan2（var（-s），var（-h））;
  剪輯路徑： 
    形狀（從0 0，
    線到calc（100％-var（-s） -  var（-r））0，
    Calc（var（-r） *（1 sin（var（-_ a））））的曲線） 
              calc（var（-r） * cos（var（-_ a）））
    使用var（-r）0，
    線到calc（100％-var（-r） * sin（var（-_ a））） 
              calc（100％-var（-r） * cos（var（-_ a））），
    曲線到計(jì)算（100％-var（-r））100％，100％100％，
    線至0 100％
    ）；
}

我知道該代碼看起來有些可怕，但是好消息是，使用CSS變量，代碼也很容易控制。因此，即使數(shù)學(xué)不容易掌握，您也不必處理它。應(yīng)該注意的是，我需要知道能夠計(jì)算坐標(biāo)的高度，這意味著解決方案不是完美的，因?yàn)楦叨仁枪潭ㄖ怠?/p>

箭頭盒

這是一個(gè)類似的形狀，但是這次我們使用曲線命令有三個(gè)角落可以四捨五入。

最終代碼仍然很複雜，但我遵循相同的步驟。我從此開始：

 。形狀 {
  -s：90px; 

  剪輯路徑： 
    形狀（從0 0，
    / *角＃1 */
    線到calc（100％-var（-s））0，
    / *角＃2 */
    線至100％50％，
    / *角＃3 */
    線至計(jì)算（100％-var（-s））100％，

    線至0 100％
    ）；
}

然後，我將其修改為：

 。形狀 {
  -s：90px; 

  剪輯路徑： 
    形狀（從0 0，
    / *角＃1 */
    線到xa ya
    用計(jì)算（100％-var（-s））0的曲線到XB YB，0，
    / *角＃2 */
    線到xa ya
    曲線至XB YB，100％50％，
    / *角＃3 */
    線到XA YB
    用計(jì)算（100％-var（-s））100％的曲線到XB YB，

    線至0 100％
    ）；
}

最後，我使用筆和紙進(jìn)行所有計(jì)算。

您可能會(huì)認(rèn)為，如果您對(duì)數(shù)學(xué)和幾何學(xué)不擅長，那麼這種技術(shù)是沒有用的，對(duì)嗎？並非如此，因?yàn)槟匀豢梢宰プ〈a並輕鬆使用它，因?yàn)樗鞘褂肅SS變量進(jìn)行了優(yōu)化的。另外，您沒有義務(wù)是超準(zhǔn)確和精確的。您可以依靠上述技術(shù)，並使用反複試驗(yàn)來近似坐標(biāo)。與完成所有數(shù)學(xué)相比，這可能會(huì)花費(fèi)的時(shí)間少。

圓形多邊形

我知道你在等待這個(gè)，對(duì)嗎？多虧了新的形狀（）和曲線命令，我們現(xiàn)在可以具有圓形的多邊形形狀！

這是我使用SASS的實(shí)現(xiàn)，您可以控制半徑，側(cè)面數(shù)和形狀的旋轉(zhuǎn)：

如果我們省略複雜的幾何部分，則循環(huán)非常簡單，因?yàn)樗蕾囲睹總€(gè)角線曲線的相同技術(shù)。

 $ n：9; /*邊數(shù)*/
$ r：.2; / *控制半徑[0 1] */
$ a：15deg; / *控制旋轉(zhuǎn) */

.poly {
  方面比例：1;
  $ m：（）;
  @for $ i從0到（$ n -1）{
    $ m：附錄（$ m，xai yai的行，逗號(hào)）；
    $ m：附錄（$ m，曲線xbi ybi，帶有XCI YCI，逗號(hào)）；
  } 
  剪輯 - 式：shape（＃{$ m}）;
}

這是我定義CSS而不是SASS中的變量的另一個(gè)實(shí)現(xiàn)：

在CSS中擁有變量非常方便，特別是如果您想擁有一些動(dòng)畫。這是適用於六角形形狀的涼爽懸停效果的示例：

我還更新了我的在線發(fā)電機(jī)以添加半徑參數(shù)。如果您不熟悉SASS，則可以輕鬆地從那裡複製CSS代碼。您還將找到僅邊框和切割版本！

結(jié)論

我們使用曲線命令完成了嗎？可能不是，但是我們對(duì)其潛力以及我們可以使用它的所有復(fù)雜形狀有很好的概述。至於代碼，我知道我們已經(jīng)達(dá)到了一個(gè)並不容易的水平。我本可以通過明確分解數(shù)學(xué)來擴(kuò)展說明，但是本文過於復(fù)雜，使其看起來像使用Shape（）更難。

也就是說，我代碼的大多數(shù)形狀都可以在我的在線集合中不斷更新和優(yōu)化，因此您可以輕鬆獲取任何形狀的代碼！

如果您想對(duì)本文進(jìn)行良好的跟進(jìn)，我為Frontend Masters撰寫了一篇文章，可以在其中使用曲線命令創(chuàng)建斑點(diǎn)形狀。

使用Shape（）更好的CSS形狀

1. 線和弧
2. 更多ONARCS
3. 曲線（您在這裡?。?/li>

以上是更好的CSS形狀使用Shape（） - 第3部分：曲線的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！