這是有關(guān)新CSS Shape（）函數(shù)的系列中的第四篇文章。到目前為止，我們已經(jīng)涵蓋了您將用來(lái)繪製各種形狀的最常見命令，包括線條，弧線和曲線。這次，我想向您介紹另外兩個(gè)命令：關(guān)閉和移動(dòng)。它們?cè)趯?shí)踐中相當(dāng)簡(jiǎn)單，我認(rèn)為您很少使用它們，但是當(dāng)您需要時(shí)它們非常有用。

使用Shape（）更好的CSS形狀

1. 線和弧
2. 更多ONARCS
3. 曲線
4. 關(guān)閉並移動(dòng)（您在這裡?。?/li>

關(guān)閉命令

在第一部分中，我們說(shuō)Shape（）總是以從命令開始定義第一個(gè)起點(diǎn)，但是結(jié)束呢？它應(yīng)該以近距離命令結(jié)束。

但是您從未在上一篇文章中使用過(guò)任何緊密的命令！ ？

這是真的。我從來(lái)沒(méi)有這樣做，因?yàn)槲乙础伴]上”形狀，要么依靠瀏覽器為我“關(guān)閉”它。這樣說(shuō)，這有點(diǎn)令人困惑，但讓我們以一個(gè)簡(jiǎn)單的例子來(lái)更好地理解：

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

如果您嘗試此代碼，則會(huì)獲得三角形的形狀，但是如果仔細(xì)觀察，您會(huì)注意到我們只有兩個(gè)行命令，而要繪製三角形，我們總共需要三行。 100％100％和0 0之間的最後一行是隱式的，這是瀏覽器正在為我關(guān)閉形狀而無(wú)需明確使用密閉命令的部分。

我本可以寫下以下內(nèi)容：

剪輯路徑：形狀（從0 0，線至100％0，線至100％100％，關(guān)閉）

或者，我自己定義最後一行：

剪輯路徑：形狀（從0 0，行到100％0，線至100％100％，線至0 0）

但是，由於瀏覽器能夠單獨(dú)關(guān)閉形狀，因此無(wú)需添加最後一行命令，也不需要明確添加關(guān)閉命令。

這可能會(huì)導(dǎo)致您認(rèn)為近距離命令沒(méi)有用，對(duì)嗎？在大多數(shù)情況下是正確的（畢竟，我已經(jīng)寫了三篇有關(guān)Shape（）而不使用它的文章），但是了解它以及它的作用很重要。在某些特定情況下，它可能很有用，尤其是在形狀中間使用時(shí)。

在此示例中，我的起點(diǎn)是中心，形狀的邏輯是繪製四個(gè)三角形。在此過(guò)程中，我需要每次回到中心。因此，我只是簡(jiǎn)單地編寫關(guān)閉，而不是將行寫入中心，而瀏覽器將自動(dòng)回到初始點(diǎn)！

直觀地，我們應(yīng)該寫以下內(nèi)容：

剪輯路徑：形狀（ 
  從中心， 
  線至20％0，hline乘60％，線至中心， / *三角形1 * /
  線至100％20％，vline降到60％，排成中心， / *三角2 * /
  線至20％100％，hline乘60％，線到中心， / *三角形3 * /
  線至0 20％，vline為60％ / *三角形4 * /
）

但是我們可以對(duì)其進(jìn)行優(yōu)化，而簡(jiǎn)單地做到這一點(diǎn)：

剪輯路徑：形狀（ 
  從中心， 
  線至20％0，hline乘60％，關(guān)閉，
  線至100％20％，Vline升至60％，關(guān)閉，
  排為20％100％，Hline升至60％，關(guān)閉，
  排為0 20％，vline佔(zhàn)60％
）

當(dāng)然，我們編寫的代碼少，但是另一個(gè)重要的是，如果我用另一個(gè)位置更新中心值，則關(guān)閉命令將遵循該位置。

不要忘記這個(gè)技巧。它可以通過(guò)編寫更少的代碼來(lái)幫助您優(yōu)化很多形狀。

移動(dòng)命令

讓我們將注意力轉(zhuǎn)向您可能很少使用的另一個(gè)形狀（）命令，但在某些情況下可能非常有用：移動(dòng)命令。

大多數(shù)時(shí)候，當(dāng)我們需要繪製形狀時(shí)，它實(shí)際上是一種連續(xù)的形狀。但是可能會(huì)發(fā)生我們的形狀由未連接在一起的不同部分組成。在這些情況下，移動(dòng)命令是您需要的。

讓我們舉個(gè)例子，類似於上一個(gè)，但是這次三角形不會(huì)彼此接觸：

直覺上，我們可能認(rèn)為我們需要具有自己的形狀（）定義的四個(gè)獨(dú)立元素。但是那個(gè)示例是一個(gè)形狀！

訣竅是繪製第一個(gè)三角形，然後“移動(dòng)”在其他地方繪製下一個(gè)三角形，依此類推。移動(dòng)命令類似於從命令中，但我們?cè)谛螤钪虚g使用它。

剪輯路徑：形狀（
  從50％40％，排名到20％0，Hline乘60％， / *三角形1 * /
  移至60％50％，排名為100％20％，vline升至60％， / *三角形2 * /
  移至50％60％，排名20％100％，Hline升至60％，關(guān)閉， / *三角3 * /
  移至40％50％，排名為0 20％，vline乘以60％ / *三角形4 * /
）

繪製第一個(gè)三角形後，我們將其“關(guān)閉”並“移動(dòng)”到一個(gè)新的點(diǎn)來(lái)繪製下一個(gè)三角形。我們可以使用單個(gè)形狀（）定義具有多種形狀。一個(gè)更通用的代碼看起來(lái)像以下內(nèi)容：

剪輯路徑：形狀（
  來(lái)自x1 y1，...，關(guān)閉， / *形狀1 * /
  移至x2 y2，...，關(guān)閉， / *形狀2 * /
  ...
  移至Xn yn，... / *形狀n * /
）

移動(dòng)命令之前的關(guān)閉命令不是強(qiáng)制性的，因此可以簡(jiǎn)化代碼：

剪輯路徑：形狀（
  來(lái)自x1 y1，...， / *形狀1 * /
  移至x2 y2，...， / *形狀2 * /
  ...
  移至Xn yn，... / *形狀n * /
）

讓我們看一些有趣的用例，在這些情況下，此技術(shù)可能會(huì)有所幫助。

切出的形狀

以前，我分享瞭如何使用剪輯式：polygon（）創(chuàng)建切割形狀的技巧。從任何類型的多邊形開始，我們可以輕鬆地將其倒入其切入版本：

我們可以使用Shape（）進(jìn)行相同的操作。這個(gè)想法是在符合元素邊界的主形狀和矩形形狀之間具有相交。我們需要兩個(gè)形狀，因此需要移動(dòng)命令。

代碼如下：

 。形狀 {
  剪輯路徑：形狀（從....移動(dòng)到0 0，hline至100％，vline至100％，hline至0）;
}

您首先創(chuàng)建主形狀，然後“移動(dòng)”到0 0，然後創(chuàng)建矩形形狀（請(qǐng)記住，這是我們?cè)诒鞠盗械谝徊糠种袆?chuàng)建的第一個(gè)形狀）。我們甚至可以走得更遠(yuǎn)，並引入一個(gè)CSS變量，以輕鬆在正常形狀和倒置形狀之間切換。

 。形狀 {
  剪輯路徑：形狀（來(lái)自.... var（-i，））;
}
.invert {
   -  i：，移動(dòng)到0 0，hline至100％，vline至100％，hline至0;
}

默認(rèn)情況下， - i未定義，因此var（-i，）將是空的，我們會(huì)得到主形狀。如果我們使用矩形形狀定義變量，則獲得倒置版本。

這是使用圓形六邊形形狀的示例：

實(shí)際上，代碼應(yīng)如下：

 。形狀 {
  剪輯路徑：shape（vertodd from .... var（-i，））;
}
.invert {
   -  i：，移動(dòng)到0 0，hline至100％，vline至100％，hline至0;
}

請(qǐng)注意，我在Shape（）開始時(shí)添加的fundodd。我不會(huì)用詳細(xì)的解釋來(lái)打擾您，但是在某些情況下，倒置的形狀不可見，解決方案是在開始時(shí)添加fivedd。您可以檢查MDN頁(yè)面以獲取更多詳細(xì)信息。

我們可以做的另一個(gè)改進(jìn)是添加一個(gè)變量來(lái)控制形狀周圍的空間。假設(shè)您想使上一個(gè)示例的六角形形狀較小。更新六角形的代碼是乏味的，但是更新矩形形狀的代碼會(huì)更容易。

 。形狀 {
  剪輯路徑：shape（fielodd from ... var（-i，））content-box;
}
.invert {
  -d：20px;
  填充：var（-d）;
  -i：，移動(dòng)到calc（-1*var（-d））calc（-1*var（-d）），
        hline到calc（100％var（-d）），
        vline to calc（100％var（-d）），
        hline到calc（-1*var（-d））;
}

我們首先將形狀的參考框更新為content-box。然後，我們添加一些填充物，可以從邏輯上降低形狀的面積，因?yàn)樗鼘⒉辉侔ㄌ畛湮铮ㄒ膊话ㄟ吙颍?。默認(rèn)情況下，將填充物排除在外（看不見），這是我們更新矩形形狀以重新包含填充填充的技巧。

這就是為什麼-i變量如此詳細(xì)的原因。它使用填充物的值擴(kuò)展了矩形區(qū)域並覆蓋整個(gè)元素，就像我們沒(méi)有內(nèi)容框一樣。

您不僅可以輕鬆地扭轉(zhuǎn)任何形狀，而且還可以控制周圍的空間！這是另一個(gè)使用CSS-Tricks徽標(biāo)的演示，以說(shuō)明該方法的容易程度：

我的SVG-TO-CSS轉(zhuǎn)換器中可以使用這個(gè)完全相同的示例，為您提供了Shape（）代碼，而無(wú)需進(jìn)行所有數(shù)學(xué)。

重複形狀

移動(dòng)命令的另一個(gè)有趣的用例是我們需要多次重複相同的形狀。您還記得By和To指令之間的區(qū)別嗎？根據(jù)指令，我們可以定義相對(duì)坐標(biāo)考慮上一點(diǎn)點(diǎn)。因此，如果我們僅使用By創(chuàng)建形狀，我們可以輕鬆地將相同的代碼重複使用，以便多次使用相同的代碼。

讓我們從一個(gè)簡(jiǎn)單的圓形示例開始：

剪輯路徑：形狀（摘自xy，弧線為0 -50px 1％，弧線為0 50px 1％）

從XY開始，我繪製了第一個(gè)弧線向上移動(dòng)50px，然後使用相同的偏移量返回XY，但向下返回。如果您對(duì)語(yǔ)法有些丟失，請(qǐng)嘗試查看第1部分以刷新有關(guān)ARC命令的內(nèi)存。

我如何繪製形狀並不重要。重要的是，無(wú)論xy的價(jià)值是什麼，我總是會(huì)得到相同的圈子，但位置不同。您知道我要去哪裡？如果我想添加另一個(gè)圓圈，我簡(jiǎn)單地用不同的x y重複了相同的代碼。

剪輯路徑：形狀（
  從X1 Y1，弧徵為0 -50px 1％，弧均為0 50px 1％，
  移至X2 Y2，弧線為0 -50px 1％，弧線為0 50px 1％
）

而且由於代碼是相同的，因此我可以將圓形形狀存儲(chǔ)到CSS變量中，並根據(jù)需要繪製盡可能多的圓圈：

 。形狀 {
  -sh：，弧度為0 -50px 1％，弧線為0 50px 1％；
  
  剪輯路徑：形狀（
    來(lái)自x1 y1 var（-sh），
    移至x2 y2 var（ -  sh），
    ... 
    移至Xn Yn var（ -  SH）
  ） 
}

你不要圓嗎？簡(jiǎn)單，您可以使用所需的任何形狀更新-sh變量。這是一個(gè)具有三種不同形狀的示例：

猜猜是什麼？您可以通過(guò)添加矩形形狀的結(jié)尾來(lái)使用切割技術(shù)倒轉(zhuǎn)整個(gè)過(guò)程：

該代碼是Shape（）函數(shù)冪的完美示例。我們沒(méi)有任何代碼重複，我們可以簡(jiǎn)單地使用CSS變量調(diào)整形狀。這是我們無(wú)法使用Path（）函數(shù)來(lái)實(shí)現(xiàn)的，因?yàn)樗恢С肿兞俊?/p>

結(jié)論

這就是我們?cè)贑SS Shape（）函數(shù)上的系列第四部分的全部?jī)?nèi)容！我們沒(méi)有做任何超級(jí)複雜的形狀，但是我們了解了兩個(gè)簡(jiǎn)單的命令如何使用Shape（）打開可以完成的操作的許多可能性。

只是為了娛樂(lè)，這裡還有一個(gè)演示，使用我們涵蓋的最後一個(gè)技術(shù)重新創(chuàng)建經(jīng)典的三點(diǎn)裝載機(jī)。請(qǐng)注意，我們可以走多遠(yuǎn)，將動(dòng)畫之類的內(nèi)容添加到混音中：

使用Shape（）更好的CSS形狀

1. 線和弧
2. 更多ONARCS
3. 曲線
4. 關(guān)閉並移動(dòng)（您在這裡?。?/li>

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