TryShape 背后的故事，CSS 剪辑路径属性的展示

我喜欢形状，尤其是彩色的！网站上的形状与背景颜色、图像、横幅、部分分隔符、艺术品等属于同一类别：它们可以帮助我们理解上下文并通过可供性告知我们的行动。

几个月前，我开发了一个应用程序，让我 7 岁的女儿学习数学。除了基本的加法和减法之外，我的目标是用形状来提出问题。那时我熟悉了 CSSclip-path属性，这是一种在网络上制作形状的可靠方法。然后，我最终使用clip-path.

我将带您了解TryShape背后的故事，以及它如何帮助创建、管理、共享和导出形状。在此过程中，我们将介绍很多关于 CSSclip-path的内容，以及它如何帮助我快速构建应用程序。

这里有几个重要的链接：

• TryShape 网站
• GitHub 仓库
• 视频演示
• clip-path为 React包装的npm 包

一、CSSclip-path属性和形状

想象一下，你有一张普通的纸和一支铅笔，可以在上面画一个形状（比如一个正方形）。你将如何进行？最有可能的是，您将从一个点t开始，然后画一条线到达另一个点，然后再重复三次以回到初始点。你还必须确保你有相反的线条parallel和same长度。

因此，形状的基本要素是点、线、方向、曲线、角度和长度等。CSSclip-path帮助指定许多这些属性来剪辑 HTML 元素的区域以显示特定区域。显示剪切区域内的部分，隐藏其余部分。它为开发人员提供了大量使用剪辑路径属性创建各种形状的机会。

了解有关剪裁及其与蒙版的不同之处的更多信息。

形状创建的剪辑路径值

该clip-path属性接受以下用于创建形状的值：

• circle()
• ellipse()
• inset()
• polygon()
• 一个剪辑源使用url()函数
• path()

我们需要稍微了解一下基本坐标系才能使用这些值。在clip-path元素上应用该属性来创建形状时，我们必须考虑 x 轴、y 轴和(0,0)元素左上角的初始坐标。

这是一个div带有 x 轴、y 轴和初始坐标的元素(0,0)。

初始坐标（0,0）与 x 轴和 y 轴

现在让我们使用该circle()值来创建一个圆形。我们可以使用此值指定圆的位置和半径。例如，要在坐标位置(70, 70)裁剪一个半径为 70px 的圆形，我们可以将clip-path属性值指定为：

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

因此，圆心位于(70, 70)半径为 70px的坐标处。现在，只有这个圆形区域被裁剪并显示在元素上。元素的其余部分被隐藏以创建圆形的印象。

圆的中心位于 (70, 70) 坐标处，并裁剪了 70px x 70px 的区域。因此显示了完整的圆圈。

接下来，如果我们想指定在 的位置(0,0)怎么办？在这种情况下，圆的中心(0,0)位于半径为 70px的位置。这使得元素内仅可见圆的一部分。

圆的中心位于 (0, 0) 坐标处，70px x 70px 区域剪裁了圆的左下角区域。

让我们继续使用其他两个基本值，inset()和polygon()。我们使用插图来定义矩形。我们可以指定四个边中的每一个可能必须从元素中剪切一个区域的间隙。例如：

clip-path: inset(30px)

上面的clip-path值通过从元素的边缘去掉 30px 值来裁剪一个区域。我们可以在下图中看到。我们还可以为每条边指定不同的插入值。

该inset()功能允许我们从形状的外边缘进行裁剪和区域。

接下来是polygon()价值。我们可以使用一组顶点创建一个多边形。拿这个例子：

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

在这里，我们指定一组顶点来创建用于裁剪的区域。下图显示了创建多边形的每个顶点的位置。我们可以指定任意数量的顶点。

polygon() 函数允许我们使用传递给它的一组顶点来创建多边形形状。

接下来，让我们看看ellipse()和url()值。该ellipse()值通过指定两个半径值和一个位置来帮助创建形状。在下图中，我们在半径所在的位置看到一个椭圆，(50%,50%)形状为 70 像素宽和 100 像素高。

我们需要指定两个半径值和一个位置来创建椭圆。

url()是一个 CSS 函数，用于指定clip-path元素的 ID 值以呈现 SVG 形状。请看下面的图片。我们已经使用clipPath和path元素定义了一个 SVG 形状。您可以使用clipPath元素的 ID 值作为url()函数的参数来呈现此形状。

在这里，我们使用url()函数创建一个心形

此外，我们可以直接在path()函数中使用路径值来绘制形状。

这里我们使用 path() 函数创建一个曲线形状。

好吧。我希望您已经了解不同的clip-path财产价值。有了这样的理解，让我们来看看一些实现并尝试使用它们。这是给你的钢笔。请使用它来尝试添加、修改值以创建新形状。

让我们谈谈 TryShape

是时候谈谈 TryShape 及其背景故事了。TryShape 是一款开源应用程序，可帮助创建、导出、共享和使用您选择的任何形状。您可以创建横幅、圆形、艺术作品、多边形并将它们导出为 SVG、PNG 和 JPEG 文件。您还可以创建一个 CSS 代码片段以在您的应用程序中复制和使用。

TryShape 是使用以下框架和库（clip-path当然还有 ）构建的：

• CSSclip-path：我们已经讨论过这个很棒的 CSS 属性的力量。
• Next.js：最酷的基于 React 的框架。它帮助我创建页面、组件、交互和 API 以连接到后端数据库。
• HarperDB：一个灵活的数据库，用于存储数据并使用 SQL 和 No-SQL 交互查询它们。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：clip-path在 React 应用程序中处理属性的自产模块
• react-draggable：使 HTML 元素在 React 应用程序中可拖动。TryShape 使用它来调整形状顶点的位置。
• downloadjs : 从 JavaScript 触发下载
• html-to-image：将 HTML 元素转换为图像（包括 SVG、JPEG 和 PNG）
• Vercel：最适合托管 Next.js 应用程序

使用 CSS 在 TryShape 中创建形状 clip-path

让我重点介绍有助于使用 CSSclip-path属性创建形状的源代码。下面的代码片段定义了Box300像素正方形的容器元素 ( )的用户界面结构。该Box元素有两个子元素，Shadow和Component。

<Box 
  height="300px" 
  width="300px" 
  onClick={(e) => props.handleChange(e)}>
  { 
    props.shapeInformation.showShadow && 
    <Shadow 
      backgroundColor={props.shapeInformation.backgroundColor} 
      id="shapeShadow" /> 
  }
  <Component 
    formula={props.shapeInformation.formula} 
    backgroundColor={props.shapeInformation.backgroundColor} 
    id="clippedShape" />
</Box>

该Shadow组件定义了被clip-path剪裁隐藏的区域。我们创建它以显示浅色背景，以使最终用户可以部分看到该区域。该Component是到指定clip-path的值，显示剪切区域。

见的风格，组件定义Box，Shadow以及Component下面：

// The styled-components code to create the UI components using CSS properties

// The container div
const Box = styled.div`
  width: ${props => props.width || '100px'};
  height: ${props => props.height || '100px'};
  margin: 0 auto;
  position: relative;
`;

// Shadow defines the area that is hidden by the `clip-path` clipping
// We show a light color background to make this area partially visible.
const Shadow = styled.div`
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  opacity: 0.25;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

// The actual component that takes the `clip-path` value (formula) and set
// to the `clip-path` property.
const Component = styled.div`
  clip-path: ${props => props.formula}; // the formula is the clip-path value
  background-color: ${props => props.backgroundColor || '#00c4ff'};
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
`;

裁剪后显示形状（可见区域和隐藏区域）的组件。

请随时查看GitHub 存储库中的整个代码库。

TryShape 的未来范围

TryShapeclip-path在后台使用 CSS 创建和管理基本形状时效果很好。导出形状和 CSS 代码片段以在您的 Web 应用程序中使用会很有帮助。它具有增长的潜力，具有更多有价值的功能。首要的是能够创建具有弯曲边缘的形状。

为了支持曲线形状，我们需要在 TryShape 中支持以下值：

• 使用url()和的剪辑源
• path().

借助这些值，我们可以使用 SVG 创建形状，然后使用上述值之一。这是url()使用 SVG 支持创建形状的CSS 函数示例。

<div class="heart">Heart</div>
<svg>
  <clipPath id="heart-path" 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" />
  </clipPath>
</svg>

然后，CSS::

.heart {
  clip-path: url(#heart-path);
}

现在，让我们使用该path()值创建一个形状。HTML 应该有一个类似 div 的元素：

<div class="curve">Curve</div>

在 CSS 中：

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