Question

我面临使用fabricjs的问题，因为模式不适用于线对象。它使用模式图像填充对象属性，但不在线显示模式。 jsfiddle ins附加。

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的fill属性。但是line对象没有fill属性，只有stroke所以我们应用不同的模式，如new fabric.Pattern < / p>

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

<canvas id="c"></canvas>

＆＃13;

模式不适用于线对象fabricjs

1 个答案: