使用 Konva 和 React 计算 Canvas 中的线性梯度度数?
Calculate degrees of Linear Gradient in Canvas using Konva with React?
我想计算线性渐变中使用的度数 → linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248))
到 x
& y
坐标中以在 Konva 中使用它,它基本上是 Canvas.
我发现了非常相似的问题,但需要注意的是,它们是用原版 Canvas 回答的,而不是像 Konva 这样的:
但是当我尝试实施它们时,我没有得到与 CSS 中相同的预期效果(参见比较):
该代码与上面一些答案中发布的代码非常相似:
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
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, 142, 251, 1)",
1,
"rgb(233, 191, 248)",
]}
/>
</Layer>
</Stage>
<h1>CSS Gradient </h1>
<div
style={{
marginTop: 10,
width,
height,
backgroundImage:
"linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248))",
}}
></div>
</div>
)
}
我认为错误在 length
中,因为我不知道它应该是什么,当然也不清楚。另外,不确定 x1
和 y1
坐标,因为我认为它们应该为零,因此可以删除。
如何获得相同的效果?
Codesandbox → https://codesandbox.io/s/linear-gradient-in-react-konva-cpgrk?file=/src/App.tsx
在游戏开发者的 subreddit 上找到了答案 /r/gamedev where I shouldn't have asked but I did & 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, 142, 251, 1)",
1,
"rgb(233, 191, 248)",
]}
/>
</Layer>
</Stage>
<h1>CSS Gradient </h1>
<div
style={{
marginTop: 10,
width,
height,
backgroundImage: `linear-gradient(${angleInDeg}deg, rgba(165, 142, 251, 1), rgb(233, 191, 248))`,
}}
></div>
</div>
)
}
Codesandbox → https://codesandbox.io/s/linear-gradient-in-react-konva-cpgrk?file=/src/App.tsx
我想计算线性渐变中使用的度数 → linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248))
到 x
& y
坐标中以在 Konva 中使用它,它基本上是 Canvas.
我发现了非常相似的问题,但需要注意的是,它们是用原版 Canvas 回答的,而不是像 Konva 这样的:
但是当我尝试实施它们时,我没有得到与 CSS 中相同的预期效果(参见比较):
该代码与上面一些答案中发布的代码非常相似:
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
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, 142, 251, 1)",
1,
"rgb(233, 191, 248)",
]}
/>
</Layer>
</Stage>
<h1>CSS Gradient </h1>
<div
style={{
marginTop: 10,
width,
height,
backgroundImage:
"linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248))",
}}
></div>
</div>
)
}
我认为错误在 length
中,因为我不知道它应该是什么,当然也不清楚。另外,不确定 x1
和 y1
坐标,因为我认为它们应该为零,因此可以删除。
如何获得相同的效果?
Codesandbox → https://codesandbox.io/s/linear-gradient-in-react-konva-cpgrk?file=/src/App.tsx
在游戏开发者的 subreddit 上找到了答案 /r/gamedev where I shouldn't have asked but I did & 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, 142, 251, 1)",
1,
"rgb(233, 191, 248)",
]}
/>
</Layer>
</Stage>
<h1>CSS Gradient </h1>
<div
style={{
marginTop: 10,
width,
height,
backgroundImage: `linear-gradient(${angleInDeg}deg, rgba(165, 142, 251, 1), rgb(233, 191, 248))`,
}}
></div>
</div>
)
}
Codesandbox → https://codesandbox.io/s/linear-gradient-in-react-konva-cpgrk?file=/src/App.tsx