无法使用 react-konva 为线条提供渐变
Unable to give gradient to a line using react-konva
我用react-konva画了一条线。现在,我试图给那条线一个渐变,但它对我不起作用。相关代码如下:
<Layer>
<Motion
style={
{
startX: spring(100),
startY: spring(100),
endX: spring(!isLineScale ? 500 : 100),
endY: spring(!isLineScale ? 500 : 100),
}
}
>
{({startX, startY, endX, endY}) => {
return(
<Line
points={[startX, startY, endX, endY]}
stroke={stroke}
strokeWidth={5}
fillLinearGradientStartPointX={100}
fillLinearGradientStartPointY={100}
fillLinearGradientEndPointX={500}
fillLinearGradientEndPointY={500}
fillLinearGradientColorStops={[0, 'green', 0.5, 'red']}
/>
)
}}
</Motion>
</Layer>
react-konva
不支持通过配置渐变描边。但是你可以手动创建渐变,然后使用 as stroke
属性.
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0.00, 'red');
gradient.addColorStop(1 / 6, 'orange');
gradient.addColorStop(2 / 6, 'yellow');
gradient.addColorStop(3 / 6, 'green')
gradient.addColorStop(4 / 6, 'aqua');
gradient.addColorStop(5 / 6, 'blue');
gradient.addColorStop(1.00, 'purple');
function App() {
return (
<Stage width={700} height={700}>
<Layer>
<Line points={[50, 50, 200, 200]} stroke={gradient} />
</Layer>
</Stage>
);
}
我用react-konva画了一条线。现在,我试图给那条线一个渐变,但它对我不起作用。相关代码如下:
<Layer>
<Motion
style={
{
startX: spring(100),
startY: spring(100),
endX: spring(!isLineScale ? 500 : 100),
endY: spring(!isLineScale ? 500 : 100),
}
}
>
{({startX, startY, endX, endY}) => {
return(
<Line
points={[startX, startY, endX, endY]}
stroke={stroke}
strokeWidth={5}
fillLinearGradientStartPointX={100}
fillLinearGradientStartPointY={100}
fillLinearGradientEndPointX={500}
fillLinearGradientEndPointY={500}
fillLinearGradientColorStops={[0, 'green', 0.5, 'red']}
/>
)
}}
</Motion>
</Layer>
react-konva
不支持通过配置渐变描边。但是你可以手动创建渐变,然后使用 as stroke
属性.
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0.00, 'red');
gradient.addColorStop(1 / 6, 'orange');
gradient.addColorStop(2 / 6, 'yellow');
gradient.addColorStop(3 / 6, 'green')
gradient.addColorStop(4 / 6, 'aqua');
gradient.addColorStop(5 / 6, 'blue');
gradient.addColorStop(1.00, 'purple');
function App() {
return (
<Stage width={700} height={700}>
<Layer>
<Line points={[50, 50, 200, 200]} stroke={gradient} />
</Layer>
</Stage>
);
}