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

Question

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



我希望输出为CSS线性渐变值的形式。 CSS线性渐变的构造方式是 Angular 和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>

如您所见，当涉及垂直方向时，这很容易。我们只需要找到渐变的大小，渐变的位置和颜色在渐变内即可。

当然，当涉及其他 Angular 值时，它会更加棘手。

这是一个示例的说明:



渐变由橙色线定义。第一步是根据 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％。我们使用这些百分比来查找新颜色。

对于 红色，我们有 128和 255，因此区别是 127和 ，其中20％是 25.4(而 40％是 50.4)，因此第一个点将具有 153.4 (128 + 25.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));
}

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