探索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]；
}

登录后复制