Tryshape背後的故事，這是CSS剪貼畫屬性的展示櫃

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

幾個月前，我為7歲的女兒開發了一個數學學習應用。除了基本的加減法外，我還想用形狀來呈現問題。那時我開始熟悉CSS clip-path屬性，這是在網頁上創建形狀的一種可靠方法。然後，我最終使用clip-path的強大功能構建了另一個名為TryShape 的應用程序。

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

以下是一些重要的鏈接：

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

CSS clip-path屬性和形狀

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

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

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

用於形狀創建的clip-path值

clip-path屬性接受以下值來創建形狀：

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

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

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

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

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

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

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

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

 clip-path: inset(30px)

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

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

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

在這裡，我們指定了一組頂點來創建一個用於裁剪的區域。下圖顯示了每個頂點的位置，以創建一個多邊形形狀。我們可以根據需要指定任意數量的頂點。

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

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

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

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

TryShape 介紹

現在該談談TryShape 及其背景故事了。 TryShape 是一款開源應用程序，可幫助創建、導出、共享和使用任何您選擇的形狀。您可以創建橫幅、圓形、藝術品、多邊形並將它們導出為SVG、PNG 和JPEG 文件。您還可以創建一個CSS 代碼片段以復制並在您的應用程序中使用。

TryShape 使用以下框架和庫（當然還有clip-path ）構建：

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

使用CSS clip-path在TryShape 中創建形狀

讓我重點介紹一下有助於使用CSS clip-path屬性創建形狀的源代碼。下面的代碼片段定義了一個容器元素(Box) 的用戶界面結構，該元素為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裁剪隱藏的區域。我們創建它以顯示淺色背景，使最終用戶可以部分看到此區域。 Component 用於分配clip-path值以顯示裁剪區域。

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

 // 使用CSS 屬性創建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` 裁剪隱藏的區域// 我們顯示淺色背景以使此區域部分可見。
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) 並將其設置為`clip-path` 屬性的實際組件。
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 的未來發展方向

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

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

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

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

<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);
}

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

<div> Curve</div>

在CSS 中：

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

結束語

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

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

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

以上是Tryshape背後的故事，這是CSS剪貼畫屬性的展示櫃的詳細內容。更多資訊請關注PHP中文網其他相關文章！