我想将线性渐变中使用的角度→
我发现了一些相似的问题,但有一个警告,它们是针对原始的Canvas而不是Konva:
- https://dev59.com/mJfga4cB1Zd3GeqPAsfx - CSS convert gradient to the canvas version - Canvas to use liniear gradient background set with an angle - Calculate rotation of canvas gradient 但是当我尝试实现它们时,我得不到与CSS中相同的期望效果(请参见比较)。 代码与上面一些答案中发布的内容非常相似:
我认为错误在于
linear-gradient(140deg, rgba(165, 142, 251, 1), rgb(233, 191, 248))
计算为 x
和 y
坐标,以在Konva中使用,它基本上是Canvas的一个包装器。我发现了一些相似的问题,但有一个警告,它们是针对原始的Canvas而不是Konva:
- https://dev59.com/mJfga4cB1Zd3GeqPAsfx - 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, 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