探索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中文网其他相关文章！