無法給漸變線使用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