我正在尝试在Sketch中重新创建渐变工具。 Sketch中的工具使用具有不同颜色的两个点来定义渐变:
我希望输出为CSS线性渐变值的形式。 CSS线性渐变的构造方式是 Angular 和x个颜色停止点(带有定义的颜色和百分比):https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
所以我想将相对于矩形的两个点转换为应将渐变呈现为CSS格式的矩形(两个参数具有正确的百分比)。
关于如何解决此问题的任何想法?
最佳答案
没有通用公式,但您必须进行一些操作/计算才能找到渐变的程度以及渐变的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>
关于javascript - 基于相对于矩形的两个点创建CSS线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51881307/