如何在给定形状中旋转线性渐变？

Question

我试图找到一种方法来旋转嵌套在例如Rectangle对象中的LinearGradient对象，如下所示：

Rectangle rect = new Rectangle(0, 0, 200, 200);

LinearGradient lg = new LinearGradient(0, 0, 100, 0, false, CycleMethod.REPEAT, new Stop[] {
    new Stop(0, Color.BLACK);
    new Stop(0.5, Color.WHITE);
    new Stop(1, Color.BLACK);
});

rect.setFill(lg);

现在，我尝试将这个lg对象旋转，例如向左旋转45度，但不旋转整个rect。有没有办法实现这个目标？

- bluevoxel

---

new LinearGradient(0, 0, 70, 70...) 不应该已经做到这一点了吗？ - Marco13

好的，但是其他值呢？如何掌握将“LinearGradient”旋转任意角度的“规则”？ - bluevoxel

你需要给构造函数提供两个点的X-Y坐标：(x1, y1)和(x2, y2)。通过两点之间的直线相对于Y（或X）轴形成的角度可以很容易地计算出来。这与“LinearGradient”无关。你能完成这个计算吗？ - user1803551

Answer 1

传递给LinearGradient构造函数的第一个参数分别是渐变轴起点和终点的坐标。这意味着您可以通过传入适当旋转的渐变轴来实现“旋转”渐变。

对于您描述的示例，最简单的方式是使用以下模式：

double angleInRadians = Math.toRadians(45);
double length = 100; 

double endX = Math.cos(angleInRadians) * length;
double endY = Math.sin(angleInRadians) * length;

LinearGradient lg = new LinearGradient(0, 0, endX, endY, ...);

这将导致一个旋转了45度的渐变。

这里的固定值将与其他参数一起影响渐变的最终外观。参考您的示例，具有与先前相同的“波长”（即100）并以相同颜色从左上角开始（即Color.BLACK将位于坐标(0,0)）的渐变。

- Marco13

---

是的，我通过在纸上画出来理解了 :) 但非常感谢您的解释。对于上面给出的 Rectangle，给定度数的示例斜率可以是：0d LinearGradient(0,50,100,50)，45d LinearGradient(0,100,100,0)，90d LinearGradient(50,100,50,0)和135d LinearGradient(100,100,0,0)。 - bluevoxel

@famfamfam 将代码片段中的 45 替换为 90。（真的吗？） - Marco13

Answer 2

三角函数比率可用于更灵活的渐变角度。请注意：它不实现重复，因此在渐变对象中添加更多停止。

private fun createGradient(width: Float, height: Float): LinearGradient {
    val mode = TileMode.CLAMP
    val angleInRadians = Math.toRadians(mAngle.toDouble())
    val halfWidth = width / 2
    val halfHeight = height / 2
    val sinAngle = sin(angleInRadians)
    val cosAngle = cos(angleInRadians)
    val x0 = (halfWidth * (1 + sinAngle)).toFloat()
    val y0 = (halfHeight * (1 - cosAngle)).toFloat()
    val x1 = (halfWidth * (1 - sinAngle)).toFloat()
    val y1 = (halfHeight * (1 + cosAngle)).toFloat()

    return LinearGradient(x0, y0, x1, y1, mGradient, null, mode)
}

- Blessing Charumbira

---

谢谢，也许这不是问题的正确答案，但这正是我在寻找的。 - Rob