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

Question

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

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

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

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

标签： javascriptcssgradientlinear-gradients

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>

---

正如你所看到的，在垂直方向上它有点容易。我们只需要找到渐变的大小、它的位置和渐变内的颜色停止。

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

这是一个示例的说明：

您的渐变由橙色线定义。第一步是根据文档绘制渐变线，这条线将与您的线平行。绘制这条线后，您将获得渐变的角度。

之后，我们对您的线条进行投影，您将拥有您的色标。所需值以绿色显示。

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

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因此差异是20%是（而12740 %是），因此第一个点将具有，最后一个点将具有。我们对绿色和蓝色进行相同的计算，得到以下梯度：25.450.4153.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));
}

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