探索CSS油漆API：多邊形邊框-css教學-PHP中文網

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

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

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

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

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

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

核心概念

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

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

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>常見問題</h3><p>有關提供腳本的幾個常見問題將在下面解決。</p><h4>什麼是<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]；
}

登入後複製