Fabric JSを使用したラインオブジェクトのグラデーションの設定

Question

私がしようとしているのは、Lineオブジェクトにグラデーションを設定することです。 RectとCircleのような他の種類のオブジェクトでは、まっすぐであり、多くの例があります。

https://jsfiddle.net/o1ezLcjv/1/

スニペット

    var coords = []; 
        coords.push(15); 
        coords.push(17); 
        coords.push(150); 
        coords.push(190); 

        var line = new fabric.Line(coords, { 
         fill : 'red', 
         stroke : 'red', 
         strokeWidth : 5, 
         selectable : true 
        }); 

        line.setGradient('fill', { 
         x1: -line.width/2, 
         y1: 0, 
         x2: line.width/2, 
         y2: 0, 
         colorStops: { 
          0: 'black', 
          1: 'red' 
         } 
        }); 

        canvas.add(line); 
        canvas.renderAll(); 

Answer 1

あなただけsetGradient方法で 'ストローク' に '埋める' に変更する必要があります。

   var coords = []; 
       coords.push(15); 
       coords.push(17); 
       coords.push(150); 
       coords.push(190); 

       var line = new fabric.Line(coords, { 
        fill : 'red', 
        stroke : 'red', 
        strokeWidth : 5, 
        selectable : true 
       }); 

       line.setGradient('stroke', { 
        x1: -line.width/2, 
        y1: 0, 
        x2: line.width/2, 
        y2: 0, 
        colorStops: { 
         0: 'black', 
         1: 'red' 
        } 
       }); 

       canvas.add(line); 
       canvas.renderAll();