无法给渐变线使用react-konva

Question

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

Answer 1

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