TryShape背后的故事--CSS clip-path属性的一个展示区

前端小工
126 阅读7分钟

我喜欢形状，尤其是五颜六色的!网站上的形状与背景颜色、图片、横幅、章节分隔符、艺术品等属于同一类别的帮助：它们可以帮助我们理解上下文，并通过承受力告知我们的行动。

几个月前，我建立了一个应用程序，让我7岁的女儿学习数学。除了基本的加减法之外，我的目的是用形状来展示问题。就在那时，我开始熟悉CSS的 clip-path属性，这是一种在网络上制作形状的可靠方法。然后，我最终利用clip-path ，建立了另一个名为TryShape的应用程序。

我将带领你了解TryShape背后的故事，以及它如何帮助创建、管理、分享和导出形状。在这一过程中，我们会涉及很多关于CSSclip-path 的内容，以及它是如何帮助我快速建立这个应用的。

首先，CSSclip-path 属性和形状

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

因此，形状的基本要素是点、线、方向、曲线、角度和长度，以及其他许多要素。CSSclip-path 有助于指定许多这些属性，以剪切一个HTML元素的区域来显示一个特定的区域。被剪切的区域内的部分被显示出来，其余部分被隐藏。它为开发者提供了大量的机会，让他们可以使用clip-path属性创建各种形状。

用于创建形状的剪辑路径值

clip-path 属性接受以下值来创建形状：

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

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

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

A blue square with its starting point located at a zero zero position on a chart with x and y axes.

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

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

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

因此，圆的中心被放置在坐标(70, 70) ，半径为70px。现在，只有这个圆形区域被剪切并显示在元素上。元素的其他部分被隐藏起来，以创造一个圆形的印象。

A blue circle on a grid with an x and y axis. The circle starts at the zero zero position and its center is located at 70 px and 70px. A zoomed in area shows the clipping path, which is also located at 70x and 70px.

圆心被放置在(70, 70)坐标上，有一个70px x 70px的区域被剪切。因此，整个圆被显示出来。

接下来，如果我们想指定在(0,0) 的位置呢？在这种情况下，圆的中心被放置在(0,0) ，半径为70px。这使得元素内部只有一部分圆是可见的。

The center of a blue circle is placed at the 0,0 coordinates with a 70px by 70px area clipping the bottom-left region of the circle.

圆心被放置在(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%)

这里我们指定一组顶点来创建一个区域进行剪裁。下面的图片显示了每个顶点的位置，以创建一个多边形形状。我们可以指定任意多的顶点。

A square with four points inside of it located at 10% by 10%, 90% by 10%, 10% by 80% and 90% by 90%, creating the clipped area.

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

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

A blue blue against a light blue background. The ellipse is 70 pixels wide and 100 pixels tall and it's radius is centered at 50% 50%.

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

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

Showing the SVG code for a heart-shaped path and the actual heart next to it in blue.

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

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

Showing a line of CSS code for the clip-path property filled in with the code of an SVG path inside the path function. The result is below the code, a parabolic curve that's filled in blue.

这里，我们正在使用path()函数创建一个弯曲的形状。

好了。我希望你已经对不同的clip-path 属性值有了了解。有了这样的理解，让我们来看看一些实现并玩玩它们。这里有一个Pen给你。请使用它来尝试添加、修改数值以创建一个新的形状。

CodePen嵌入回退

让我们来谈谈TryShape

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

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

让我强调一下帮助使用CSSclip-path 属性创建形状的源代码。下面的代码片段定义了一个300px的容器元素(Box)的用户界面结构。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;
`;

An illustration of a blue box with its inset clip points drawing another square that indicates the visible area of the shape in a darker blue.

这些组件在剪裁后显示一个形状（包括可见和隐藏区域）。

TryShape的未来范围

TryShape在后台使用CSSclip-path 创建和管理基本形状的工作很好。它有助于导出形状和CSS代码片段，以便在你的网络应用中使用。它有可能发展出许多更有价值的功能。最主要的将是创建具有弯曲边缘的形状的能力。

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

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

在这些值的帮助下，我们可以使用SVG创建形状，然后使用上述值中的一个。下面是一个使用SVG支持的CSS函数url() ，来创建一个形状的例子：

<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);
}

It produces a heart shape like this.

现在，让我们使用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");
}

在我们结束之前...

我希望你喜欢认识我的TryShape应用程序，了解导致它的想法，我考虑的策略，引擎盖下的技术，以及它未来的潜力。请考虑试用它，并查看源代码。当然，也欢迎你用问题、功能请求和代码来为它做贡献。

在我们结束之前，我想把这个为Hashnode黑客马拉松准备的简短视频留给你，TryShape是一个参赛项目，并最终进入了获奖名单。我希望你能喜欢它。

avatar
文章
阅读
粉丝