代码之家 › 专栏 › 技术社区 › Arslan Tariq

无法使用react konva为线条提供渐变

konvajs canvas reactjs javascript

Arslan Tariq · 技术社区 · 7 年前

我用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>

1 回复 | 直到 7 年前

lavrton 7 年前

react-konva 不支持通过配置进行渐变笔划。但您可以手动创建渐变,然后使用 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>
    );
}

演示: http://jsbin.com/hohoyuliro/edit?js,output

推荐文章

Jay White · useRef。current存在,但根据作用域的不同为空

2 年前

Laurie Thom · 使用HTML画布和JS的拖尾图像

2 年前

Hamza Zafeer Bert · 2画布不能以单一HTML格式工作

2 年前

Chukwuma Kingsley · clearRect让我的方块消失了

2 年前

Shaheryar Ahmed · 如何在放大或缩小时更改tkinter画布文本项的大小?

2 年前

bemol · D3正确缩放/重缩放

2 年前

Ghoyos · 这个“如果声明”不应该引起反弹吗?

6 年前

Ghoyos · 一旦实例化/绘制到画布,移除/删除函数对象的最佳方式是什么?

6 年前

user8923822 · 如何从画布中清除Path2D

6 年前

Martyna · 画布上的李萨如曲线

6 年前