Question

我正在尝试在Sketch中重新创建渐变工具。 Sketch中的工具使用具有不同颜色的两个点来定义渐变：

我希望输出为CSS线性渐变值的形式。 CSS线性渐变的构造方式是角度和x个颜色停止点，并定义了颜色和百分比：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

所以我想将相对于矩形的两个点转换为应将渐变呈现为CSS格式的矩形（两个参数具有正确的百分比）。

关于如何解决此问题的任何想法？

Answer 1

没有通用公式，但您必须进行一些操作/计算才能找到渐变的程度以及渐变的background-size / background-position。

让我们从一个简单的示例开始：

这里我们有一个180deg（或0deg）的渐变。起点在顶部50px，终点在底部100px。考虑到这一点，我们将具有以下渐变：

.box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  margin: 20px;
  background-image: linear-gradient(180deg, white, black);
  background-size: 100% calc(100% + 50px + 100px);
  background-position: 0 -50px;
  background-repeat: no-repeat;
}

<div class="box"></div>

如您所见，总大小将为100% + 150px，并且该职位的偏移量为-50px。考虑到100px，我们也可以有一个偏移量，它将是100% + 100px：

.box {
  width:200px;
  height:100px;
  border:1px solid;
  margin:20px;
  background-image:linear-gradient(180deg,white,black);
  background-size:100% calc(100% + 50px + 100px);
  background-position:0 calc(100% + 100px);
  background-repeat:no-repeat;
}

<div class="box">

</div>

这里是另一个示例：

在这种情况下，这些点在内部，因此我们只需要在渐变内部调整色标即可：

.box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  margin: 20px;
  background-image: linear-gradient(90deg, white 50px, black calc(100% - 50px));
}

<div class="box"></div>

这是我们有一个外部和内部点的混合：

.box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  margin: 20px;
  background-image: linear-gradient(90deg, white 50px, black);
  background-size: calc(100% + 100px) 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

<div class="box"></div>

如您所见，在垂直方向上以某种方式很容易。我们只需要找到渐变的大小，其位置和颜色在渐变内即可。

当然，当涉及其他角度值时，会更加棘手。

以下是一个示例的说明：

您的渐变由橙色线定义。第一步是根据the documentation绘制渐变线，该线将与您的线平行。画完这条线之后，您将获得渐变的角度。

在那之后，我们对您的线条进行了投影，您将得到色标。所需的值以绿色显示。

我们的渐变看起来像这样：

background-image:linear-gradient(Xdeg,white Apx,black calc(100% - Bpx));

在这种情况下，我考虑了一个仅具有内部点的示例，但是如果橙色线的投影会导致外部点（如第一个示例），则它可能会变得更加复杂，在这种情况下，我们需要考虑增加background-size双向，这也有些棘手。

如您所见，我们有一个外部点，该点由距渐变点的距离B定义。我们已经建立了一个矩形三角形，以便找到如何增加background-size。

我们的渐变看起来像这样：

background-image:linear-gradient(Xdeg,white Apx,black);
background-size:calc(100% + w) calc(100% + h);
background-position:0 0;

更新

如果您不想玩background-size / background-position，另一种方法是将渐变转换为使用内部点。当然，这种方法仅在点位于外部且想法是找到最接近的内部点以使我们获得相同的梯度时才有用。

让我们以第一个例子为例。在该示例中，我们的第一个点位于50px的顶部，逻辑上最接近的内部点是0px的那个点（与另一个点的逻辑相同）。因此，我们只需要查找新点的颜色并使用它们即可。

.box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  margin: 20px;
}

.old {
  background-image: linear-gradient(180deg, white, black);
  background-size: 100% calc(100% + 50px + 100px);
  background-position: 0 -50px;
  background-repeat: no-repeat;
}
.new {
  background-image:linear-gradient(180deg,rgb(203, 203, 203),rgba(103, 103, 103));
}

<div class="box old"></div>
<div class="box new"></div>

在此特定示例中，计算很容易，因为初始渐变的大小为250px，在白色（255,255,255）和黑色（0,0,0）之间，我们有255个值（几乎250种），因此我们不知何故删除了50种以找到第一种颜色，并添加了100种以找到最后一种颜色。

让我们采用相同的渐变，但使用不同的颜色：紫色（128,0,128）和橙色（255,165,0）。渐变的大小为250px，因此第一个偏移量（50px）为大小的 20％，第二个偏移量（100px）为大小的40％。我们使用这些百分比来查找新颜色。

对于 red ，我们有128和255，因此差异为127，而其中的 20％为{{ 1}}（ 40％为25.4），因此第一个点为50.4，最后一个点为153.4 (128 + 25.4)。我们对绿色和蓝色进行相同的计算，并获得以下渐变：

204.2 (255 - 50.4)

.box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  margin: 20px;
}

.old {
  background-image: linear-gradient(180deg, purple, orange);
  background-size: 100% calc(100% + 50px + 100px);
  background-position: 0 -50px;
  background-repeat: no-repeat;
}
.new {
  background-image:linear-gradient(180deg,rgb(153, 33, 102),rgba(204, 99, 51));
}

Answer 2

这就是我解决问题的方法！

如果您查看我随附的GIF，它说明了我在计算中使用的点。红线是矩形中心的渐变线，黑点是渐变线的起点和终点。另外两个点（黑色和白色）是用户控制的点，用户可以按自己喜欢的方式拖动它们。这两个红点是直线上相对于每个用户控制点（垂直线点p1和p2）的最近位置。

我得到了垂直线点与渐变线起点和终点之间的距离。然后，为了计算CSS线性梯度值所需的百分比值，我将两个距离相加，将其除以梯度线长，然后将该值乘以100。

ax = ((p1.x - gradientLine.point1.x) * (gradientLine.length / 2)) / (gradientLine.point2.x - gradientLine.point1.x);
ay = ((p1.y - gradientLine.point1.y) * (gradientLine.length / 2)) / (gradientLine.point2.y - gradientLine.point1.y);

percentValue = (((ax + ay) / line.length) * 100);

要获得线性梯度值中第二个参数的值，我只是做同样的事情，除了我将计算值减去100。

ax = ((p2.x - gradientLine.point2.x) * (gradientLine.length / 2)) / (gradientLine.point1.x - gradientLine.point2.x);
ay = ((p2.y - gradientLine.point2.y) * (gradientLine.length / 2)) / (gradientLine.point1.y - gradientLine.point2.y);
percentValue = 100 - ((((ax + ay) / gradientLine.length) * 100));

通过这种方式，我可以获得两个百分比值，并且可以轻松构造由两个用户控制点的角度加上我计算的两个百分比值组成的CSS线性梯度值：

background: linear-gradient([angle]deg, black [percentValue1]%, white [percentValue2]%)

基于相对于矩形的两个点创建CSS线性渐变

2 个答案: