2016-03-25 1 views
2

パターンがラインオブジェクトに適用されないため、fabricjsを使用して問題が発生しています。これは、オブジェクトのプロパティをパターンイメージで塗りつぶしますが、ライン上にパターンを表示していません。 jsfiddle insが添付されています。パターンがラインオブジェクトfabricjsに適用されない

var line = new fabric.Line([10, 25, 300, 25], { 
    stroke: 'red', 
    strokeWidth: 5, 
    selectable: true, 
    left: 0, 
    top: 0 
}); 
canvas.add(line); 

fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function (img) { 
    line.setPatternFill({ 
     source: img, 
     repeat: 'repeat' 
    }); 
    canvas.renderAll(); 
}); 
console.log(line); 

答えて

1

ファブリックJS setPatternFillはだけなので、我々は異なっnew fabric.Pattern

var canvas = new fabric.Canvas("c") 
 
var line = new fabric.Line([10, 25, 300, 25], { 
 
    stroke: 'red', 
 
    fill:"red", 
 
    strokeWidth: 10, 
 
    selectable: true, 
 
    left: 0, 
 
    top: 0 
 
}); 
 
canvas.add(line); 
 

 
fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function (img) { 
 
    
 
    line.stroke = new fabric.Pattern({ 
 
     source: img, 
 
     repeat: 'repeat' 
 
     }); 
 
     canvas.renderAll(); 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 

 
<canvas id="c"></canvas>
のようなパターンを適用するだけ strokeを持って、fillプロパティを持っていないobject.ButラインオブジェクトのFillプロパティにパターンを適用しているため

+0

ありがとうalotシャルマ..その本当にハーフフル –

+0

この素敵なスニペットありがとう。 'fabric.util.loadImage'も私の問題を解決しました。 + 1 – Miron

関連する問題