fabricjs - 如何仅在某一侧设置笔划？

Question

有没有办法只在 Canvas 对象的一侧给笔画？例如，我只想为顶部提供笔划。

当我申请时"strokeWidth:1" ，它适用于所有方面。我还没有找到任何属性或方法来解决我的问题。

Answer 1

对于已定义的方面，没有任何方法。您可以在图像后面添加一个矩形，使其看起来像一个边框。例如“顶部边框”宽度 10px :

var canvas = new fabric.Canvas('c');
var radius = 150;

fabric.Image.fromURL('http://cdn.younghollywood.com/images/stories/newsIMG/wenn/20140901/wenn21338105_46_4145_8.jpg', function(oImg) {
    oImg.scale(1.0).set({
        left: 50,
        top: 50,
        width: 200,
        height: 200
    });

    canvas.add(oImg);
    canvas.renderAll();
});

var border = new fabric.Rect({ 
    width: 200, 
    height: 200+10, 
    left: 50, 
    top: 40,
    fill: "#FFFFFF"
});

canvas.add(border);
canvas.renderAll();

fiddle : http://jsfiddle.net/q6Y6k/11/

否则，请检查: How to set a stroke-width:1 on only certain sides of SVG shapes?