使用 Konva 和 React 计算画布中线性梯度的度数？

如何解决使用 Konva 和 React 计算画布中线性梯度的度数？

我想计算线性渐变中使用的度数 → linear-gradient(140deg,rgba(165,142,251,1),rgb(233,191,248)) 到 x & y 坐标以在 Konva 中使用它，这基本上是 Canvas 的包装。

我发现了非常相似的问题，但需要注意的是，它们是在 vanilla Canvas 中回答的，而不是像 Konva 这样的：

• https://stackoverflow.com/questions/37669239/how-can-i-rotate-a-linear-gradient
• CSS convert gradient to the canvas version
• Canvas to use liniear gradient background set with an angle
• Calculate rotation of canvas gradient

但是当我尝试实现它们时，我没有得到与 CSS 中相同的预期效果（参见比较）：

代码与上面一些答案中发布的代码非常相似：

import { Stage,Layer,Rect } from "react-konva"

// linear-gradient(140deg,248))
export default function App() {
    const width = window.innerWidth / 1.25 // random width
    const height = window.innerHeight / 1.5 // random height

    const x1 = 0
    const y1 = 0
    const angle = (140 / 180) * Math.PI
    const length = width
    const x2 = x1 + Math.cos(angle) * length
    const y2 = y1 + Math.sin(angle) * length

    return (
        <div className="App">
            <h1>Linear Gradient in Konva ?</h1>
            <Stage width={width} height={height}>
                <Layer>
                    <Rect
                        name="transparentBackground"
                        width={width}
                        height={height}
                        x={0}
                        y={0}
                        fillPriority="linear-gradient" // 'color','pattern','linear-gradient','radial-gradient'
                        /* linear-gradient */
                        fillLinearGradientStartPoint={{ x: x1,y: y1 }}
                        fillLinearGradientEndPoint={{ x: x2,y: y2 }}
                        fillLinearGradientColorStops={[
                            0,"rgba(165,1)",1,"rgb(233,248)",]}
                    />
                </Layer>
            </Stage>

            <h1>CSS Gradient ?</h1>
            <div
                style={{
                    marginTop: 10,width,height,backgroundImage:
                        "linear-gradient(140deg,248))",}}
            ></div>
        </div>
    )
}

我认为错误在 length 中，因为我不知道它应该是什么，这当然不清楚。另外，不确定 x1 和 y1 坐标，因为我认为它们应该为零，因此可以删除。

如何获得相同的效果？

代码沙盒 → https://codesandbox.io/s/linear-gradient-in-react-konva-cpgrk?file=/src/App.tsx

解决方法

在 Game Developers /r/gamedev 的 subreddit 上找到了答案，我不应该问，但我问了 it worked。

import { Stage,Layer,Rect } from "react-konva"

// linear-gradient(140deg,rgba(165,142,251,1),rgb(233,191,248))
export default function App() {
    const width = window.innerWidth / 1.25 // random width
    const height = window.innerHeight / 1.5 // random height

    // Specify angle in degrees
    const angleInDeg = 140

    // Compute angle in radians - CSS starts from 180 degrees and goes clockwise
    // Math functions start from 0 and go anti-clockwise so we use 180 - angleInDeg to convert between the two
    const angle = ((180 - angleInDeg) / 180) * Math.PI

    // This computes the length such that the start/stop points will be at the corners
    const length =
        Math.abs(width * Math.sin(angle)) + Math.abs(height * Math.cos(angle))

    // Compute the actual x,y points based on the angle,length of the gradient line and the center of the div
    const halfx = (Math.sin(angle) * length) / 2.0
    const halfy = (Math.cos(angle) * length) / 2.0
    const cx = width / 2.0
    const cy = height / 2.0
    const x1 = cx - halfx
    const y1 = cy - halfy
    const x2 = cx + halfx
    const y2 = cy + halfy

    return (
        <div className="App">
            <h1>Linear Gradient in Konva ?</h1>
            <Stage width={width} height={height}>
                <Layer>
                    <Rect
                        name="transparentBackground"
                        width={width}
                        height={height}
                        x={0}
                        y={0}
                        fillPriority="linear-gradient" // 'color','pattern','linear-gradient','radial-gradient'
                        /* linear-gradient */
                        fillLinearGradientStartPoint={{ x: x1,y: y1 }}
                        fillLinearGradientEndPoint={{ x: x2,y: y2 }}
                        fillLinearGradientColorStops={[
                            0,"rgba(165,1)",1,"rgb(233,248)",]}
                    />
                </Layer>
            </Stage>

            <h1>CSS Gradient ?</h1>
            <div
                style={{
                    marginTop: 10,width,height,backgroundImage: `linear-gradient(${angleInDeg}deg,248))`,}}
            ></div>
        </div>
    )
}

代码沙盒 → https://codesandbox.io/s/linear-gradient-in-react-konva-cpgrk?file=/src/App.tsx