模式不适用于线对象 fabricjs

Question

我在使用 fabricjs 时遇到问题，因为模式未应用于线对象。它用图案图像填充对象属性但不在线显示图案。附上 jsfiddle 插件。

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);

Answer 1

因为 Fabric js setPatternFill 仅将图案应用于 object.But 行对象的填充属性没有填充属性，只有 stroke所以我们以不同的方式应用模式，例如 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>

模式不适用于线对象 fabricjs

Pattern not applying on line object fabricjs

fabricjs