探索CSS油漆API：多邊形邊框

用clip-path創建複雜的形狀很簡單，但是添加邊框提出了一個持續的挑戰。 CSS缺乏強大的解決方案，通常需要麻煩的解決方案。本文使用CSS塗料API演示了解決方案。

此CSS油漆API探索系列繼續：

• 第1部分：圖像碎片效應
• 第2部分： Blob動畫
• 第3部分：多邊形邊界（當前文章）
• 第4部分：圓形形狀

本文詳細介紹了創建多邊形邊界。請記住，目前僅在基於鉻的瀏覽器（Chrome，Edge，Opera）中支持此技術。檢查Caniuse以獲取最新的兼容性信息。

該代碼保持簡潔和適應性，僅需要修改形狀的次要變量調整。

核心概念

多邊形邊框是通過將clip-path和用油漆API產生的自定義面膜結合來實現的：

1. 從標準矩形開始。
2. 應用clip-path將其塑造成多邊形。
3. 應用自定義掩碼來創建多邊形邊框。

CSS結構

clip-path步驟的CSS是：

 。盒子 {
   - 路徑：50％0,100％100％，0 100％；

  寬度：200px;
  身高：200px;
  背景：紅色；
  顯示：內聯塊；
  剪輯路徑：多邊形（var（ - 路徑））;
}

關鍵是CSS變量--path 。 clip-path和蒙版都將此變量用於一致的參數。

完整的CSS代碼變為：

 。盒子 {
   - 路徑：50％0,100％100％，0 100％；
  -border：5px;

  寬度：200px;
  身高：200px;
  背景：紅色；
  顯示：內聯塊；
  剪輯路徑：多邊形（var（ - 路徑））;
  -webkit mask：油漆（多邊形）;
}

除了clip-path外，還使用自定義掩碼，並且--border控制邊界厚度。 CSS仍然很簡單且通用，突出了油漆API的易用性。

JavaScript實現

請參閱本系列的第1部分，以更好地了解油漆API結構。

paint()函數的JavaScript代碼：

 const points = properties.get（' -  path'）。tostring（）。split（'，'）;
const b = parsefloat（properties.get（' -  border'）。value）;
const w = size.width;
const h = size.height;

const cc =函數（x，y）{
  // ...
}

var p =點[0] .trim（）。split（“”）;
p = cc（p [0]，p [1]）;

ctx.beginath（）;
ctx.moveto（p [0]，p [1]）;
for（var i = 1; i <points.length i p="點[i]" .trim ctx.lineto ctx.closepath ctx.linewidth="2" b ctx.strokestyle="'black';" ctx.stroke><p>該代碼讀取<code>--path</code>變量，將其轉換為點數組，然後使用<code>moveTo</code>和<code>lineTo</code>繪製多邊形。該多邊形反映了<code>clip-path</code>多邊形。中風創造了邊界。形狀的填充是透明的。</p><p>修改路徑和厚度可以產生各種多邊形邊界。由於使用CSS <code>background</code>屬性，梯度和圖像可以替換純色。</p><p>要合併內容，必須進行偽元素以防止剪輯。蒙版屬性移至偽元素，而<code>clip-path</code>仍保留在主要元素上。</p><h3 id="常見問題">常見問題</h3><p>有關提供腳本的幾個常見問題將在下面解決。</p><h4 id="什麼是-code-cc-code-函數">什麼是<code>cc()</code>函數？</h4><p>該函數將點坐標（百分比或像素值）轉換為在畫布元素中可用的像素值。</p><pre class="brush:php;toolbar:false"> const cc =函數（x，y）{
  var fx = 0，fy = 0;
  if（x.indexof（'％'）> -1）{
    fx =（parsefloat（x）/100）*w;
  } else if（X.Indexof（'px'）> -1）{
    fx = parsefloat（x）;
  }
  if（y.indexof（'％'）> -1）{
     fy =（parsefloat（y）/100）*h;
  } else if（y.indexof（'px'）> -1）{
    fy = parsefloat（y）;
  }
  返回[FX，FY]；
}

如果面具已經剪輯，為什麼還要使用clip-path ？

僅使用口罩會導致中風對齊和懸停區域的問題。 clip-path解決了這些問題。

為什麼要將@property與邊界值一起使用？

@property註冊自定義屬性，定義其類型（在這種情況下，<length></length> ），啟用瀏覽器識別和處理為有效類型，而不僅僅是字符串。這允許各種長度單元。

--path變量呢？

由於用@property註冊複雜類型的限制，因此--path變量被作為字符串處理。 cc()函數處理字符串到像素轉換。

我們可以有一個虛線的邊界嗎？

是的，使用ctx.setLineDash() 。一個附加變量控制儀表板模式。

為什麼不將@property用於儀表板變量？

雖然在技術上可能是可能的，但檢索paint()中的值證明是有問題的。目前， --dash變量被視為字符串。

實際應用

幾個用例展示了多邊形邊界技術：

• 按鈕：創建具有懸停效果的自定義形式按鈕。
• 麵包屑：簡化麵包屑導航。
• 卡片揭示動畫：動畫邊框厚度，以備懸停效果或揭示動畫。
• 標註和語音氣泡：輕鬆地將邊界添加到復雜的形狀中。
• 動畫破折號：使用setLineDash()和lineDashOffset創建各種破折號動畫。

本文提供了使用CSS油漆API創建多邊形邊界的綜合指南，從而提供了形狀樣式的靈活性和效率。

以上是探索CSS油漆API：多邊形邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！