我熱愛各種形狀，尤其是色彩鮮豔的形狀！網(wǎng)站上的形狀與背景顏色、圖片、橫幅、分隔符、藝術(shù)作品等一樣重要：它們有助於我們理解上下文，並通過affordances 指導(dǎo)我們的操作。

幾個月前，我為7歲的女兒開發(fā)了一個數(shù)學(xué)學(xué)習(xí)應(yīng)用。除了基本的加減法外，我還想用形狀來呈現(xiàn)問題。那時我開始熟悉CSS clip-path屬性，這是在網(wǎng)頁上創(chuàng)建形狀的一種可靠方法。然後，我最終使用clip-path的強(qiáng)大功能構(gòu)建了另一個名為TryShape 的應(yīng)用程序。

我將帶您了解TryShape 背後的故事，以及它如何幫助創(chuàng)建、管理、共享和導(dǎo)出形狀。在此過程中，我們將深入探討CSS clip-path以及它如何幫助我快速構(gòu)建應(yīng)用程序。

以下是一些重要的鏈接：

• TryShape 網(wǎng)站
• GitHub 代碼庫
• 視頻演示
• 用於React 的clip-path封裝npm 包

CSS clip-path屬性和形狀

想像一下，你有一張普通的紙和一支鉛筆，要在上面畫一個形狀（比如正方形）。你會怎麼做？你很可能會從一個點(diǎn)開始，然後畫一條線到達(dá)另一個點(diǎn)，然後重複三次才能回到初始點(diǎn)。你還必須確保你擁有平行且長度相同的對邊。

因此，形狀的基本要素包括點(diǎn)、線、方向、曲線、角度和長度等等。 CSS clip-path有助於指定許多這些屬性來裁剪HTML 元素的區(qū)域，以顯示特定區(qū)域。裁剪區(qū)域內(nèi)的部分將顯示，其餘部分將隱藏。它為開發(fā)人員提供了大量機(jī)會，可以使用clip-path屬性創(chuàng)建各種形狀。

了解更多關(guān)於裁剪以及它與遮罩的不同之處。

用於形狀創(chuàng)建的clip-path值

clip-path屬性接受以下值來創(chuàng)建形狀：

• circle()
• ellipse()
• inset()
• polygon()
• 使用url()函數(shù)的剪輯源
• path()

我們需要稍微理解一下基本坐標(biāo)系才能使用這些值。當(dāng)在元素上應(yīng)用clip-path屬性來創(chuàng)建形狀時，我們必須考慮x 軸、y 軸以及元素左上角的初始坐標(biāo)(0,0)。

這是一個帶有x 軸、y 軸和初始坐標(biāo)(0,0) 的div 元素。

現(xiàn)在讓我們使用circle()值來創(chuàng)建一個圓形形狀。我們可以使用此值指定圓的位置和半徑。例如，要在坐標(biāo)位置(70, 70) 處創(chuàng)建一個半徑為70px 的圓形形狀，我們可以將clip-path屬性值指定為：

 clip-path: circle(70px at 70px 70px)

因此，圓的中心位於坐標(biāo)(70, 70) 處，半徑為70px。現(xiàn)在，只有這個圓形區(qū)域被裁剪並顯示在元素上。元素的其餘部分被隱藏，以創(chuàng)建圓形形狀的印象。

接下來，如果我們想將位置指定為(0,0) 會怎樣？在這種情況下，圓的中心位於(0,0) 位置，半徑為70px。這使得只有圓形的一部分在元素內(nèi)可見。

讓我們繼續(xù)使用另外兩個基本值inset()和polygon() 。我們使用inset來定義矩形形狀。我們可以指定四個邊可能具有的間隙，以從元素中裁剪一個區(qū)域。例如：

 clip-path: inset(30px)

上面的clip-path值通過從元素邊緣排除30px 值來裁剪區(qū)域。我們可以在下面的圖片中看到這一點(diǎn)。我們還可以為每個邊指定不同的inset值。

接下來是polygon()值。我們可以使用一組頂點(diǎn)來創(chuàng)建一個多邊形形狀。請看這個例子：

 clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)

在這裡，我們指定了一組頂點(diǎn)來創(chuàng)建一個用於裁剪的區(qū)域。下圖顯示了每個頂點(diǎn)的位置，以創(chuàng)建一個多邊形形狀。我們可以根據(jù)需要指定任意數(shù)量的頂點(diǎn)。

接下來，讓我們看一下ellipse()和url()值。 ellipse()值通過指定兩個半徑值和一個位置來幫助創(chuàng)建形狀。在下圖中，我們看到一個橢圓位於半徑為(50%,50%) 的位置，形狀寬度為70px，高度為100px。

url()是一個CSS 函數(shù)，用於指定clip-path元素的ID 值以呈現(xiàn)SVG 形狀。請看下圖。我們使用clipPath和path元素定義了一個SVG 形狀。您可以使用clipPath元素的ID 值作為url()函數(shù)的參數(shù)來呈現(xiàn)此形狀。

此外，我們可以在path()函數(shù)中直接使用path值來繪製形狀。

好了。我希望您已經(jīng)了解了不同的clip-path屬性值。有了這個理解，讓我們來看一些實(shí)現(xiàn)並嘗試一下。這裡有一個示例，請使用它嘗試添加、修改值以創(chuàng)建新的形狀。

TryShape 介紹

現(xiàn)在該談?wù)凾ryShape 及其背景故事了。 TryShape 是一款開源應(yīng)用程序，可幫助創(chuàng)建、導(dǎo)出、共享和使用任何您選擇的形狀。您可以創(chuàng)建橫幅、圓形、藝術(shù)品、多邊形並將它們導(dǎo)出為SVG、PNG 和JPEG 文件。您還可以創(chuàng)建一個CSS 代碼片段以復(fù)制並在您的應(yīng)用程序中使用。

TryShape 使用以下框架和庫（當(dāng)然還有clip-path ）構(gòu)建：

• CSS clip-path ：我們已經(jīng)討論了這個強(qiáng)大的CSS 屬性的功能。
• Next.js：最酷的基於React 的框架。它幫助我創(chuàng)建頁面、組件、交互和API 以連接到後端數(shù)據(jù)庫。
• HarperDB：一個靈活的數(shù)據(jù)庫，用於存儲數(shù)據(jù)並使用SQL 和NoSQL 交互來查詢它們。 TryShape 在HarperDB 雲(yún)中創(chuàng)建了其模式和表。 Next.js API 與模式和表交互，以執(zhí)行用戶界面所需的CRUD 操作。
• Firebase：來自Google 的身份驗(yàn)證服務(wù)。 TryShape 使用它來實(shí)現(xiàn)使用Google、GitHub、Twitter 和其他帳戶的社交登錄。
• react-icons：一個用於React 應(yīng)用程序的所有圖標(biāo)的商店
• date-fns：用於日期格式化的現(xiàn)代輕量級庫
• axios：簡化React 組件中的API 調(diào)用
• styled-components：一種從React 組件創(chuàng)建CSS 規(guī)則的結(jié)構(gòu)化方法
• react-clip-path：一個自製的模塊，用於在React 應(yīng)用程序中處理clip-path屬性
• react-draggable：使HTML 元素在React 應(yīng)用程序中可拖動。 TryShape 使用它來調(diào)整形狀頂點(diǎn)的位置。
• downloadjs：觸發(fā)JavaScript 下載
• html-to-image：將HTML 元素轉(zhuǎn)換為圖像（包括SVG、JPEG 和PNG）
• Vercel：最適合託管Next.js 應(yīng)用程序

使用CSS clip-path在TryShape 中創(chuàng)建形狀

讓我重點(diǎn)介紹一下有助於使用CSS clip-path屬性創(chuàng)建形狀的源代碼。下面的代碼片段定義了一個容器元素(Box) 的用戶界面結(jié)構(gòu)，該元素為300px 正方形。 Box 元素有兩個子元素，Shadow 和Component。

<box height="300px" onclick="{(e)"> props.handleChange(e)} width="300px">
  {
    props.shapeInformation.showShadow &&
    <shadow backgroundcolor="{props.shapeInformation.backgroundColor}"></shadow>
  }
  <component backgroundcolor="{props.shapeInformation.backgroundColor}" formula="{props.shapeInformation.formula}"></component>
</box>

Shadow 組件定義了被clip-path裁剪隱藏的區(qū)域。我們創(chuàng)建它以顯示淺色背景，使最終用戶可以部分看到此區(qū)域。 Component 用於分配clip-path值以顯示裁剪區(qū)域。

請參見下面Box、Shadow 和Component 的styled-component 定義：

 // 使用CSS 屬性創(chuàng)建UI 組件的styled-components 代碼// 容器div
const Box = styled.div`
  width: ${props => props.width || '100px'};
  height: ${props => props.height || '100px'};
  margin: 0 auto;
  position: relative;
`;

// Shadow 定義了被`clip-path` 裁剪隱藏的區(qū)域// 我們顯示淺色背景以使此區(qū)域部分可見。
const Shadow = styled.div`
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  opacity: 0.25;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

// 獲取`clip-path` 值(formula) 並將其設(shè)置為`clip-path` 屬性的實(shí)際組件。
const Component = styled.div`
  clip-path: ${props => props.formula}; // formula 是clip-path 值background-color: ${props => props.backgroundColor || '#00c4ff'};
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

請隨時查看GitHub 代碼庫中的完整代碼庫。

TryShape 的未來發(fā)展方向

TryShape 可以很好地處理使用後臺CSS clip-path創(chuàng)建和管理基本形狀。它有助於導(dǎo)出形狀和CSS 代碼片段以在您的Web 應(yīng)用程序中使用。它有潛力發(fā)展出更多有價值的功能。主要功能是能夠創(chuàng)建具有曲線邊緣的形狀。

為了支持曲線形狀，我們需要在TryShape 中支持以下值：

• 使用url()的剪輯源
• path() 。

借助這些值，我們可以使用SVG 創(chuàng)建形狀，然後使用上述值之一。這是一個使用SVG 支持創(chuàng)建形狀的url() CSS 函數(shù)示例。

<div> Heart</div>
<svg><clippath clippathunits="objectBoundingBox"><path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z"></path></clippath></svg>

然後是CSS：

 .heart {
  clip-path: url(#heart-path);
}

現(xiàn)在，讓我們使用path()值創(chuàng)建一個形狀。 HTML 應(yīng)該有一個像div 這樣的元素：

<div> Curve</div>

在CSS 中：

 .curve {
  clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

結(jié)束語

我希望您喜歡我的TryShape 應(yīng)用程序，並了解其背後的理念、我考慮的策略、底層技術(shù)及其未來的潛力。請考慮嘗試一下並查看源代碼。當(dāng)然，您可以隨時通過問題、功能請求和代碼為其做出貢獻(xiàn)。

在結(jié)束之前，我想向您展示為Hashnode 黑客馬拉松準(zhǔn)備的簡短視頻，TryShape 是參賽作品，最終入選獲獎名單。我希望您喜歡它。

讓我們聯(lián)繫。您可以在Twitter 上@ 我(@tapasadhikary) 發(fā)表評論，或者隨時關(guān)注。

以上是Tryshape背後的故事，這是CSS剪貼畫屬性的展示櫃的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！