Question

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

当我申请"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();

小提琴：http://jsfiddle.net/q6Y6k/11/

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

Answer 2

我找到了使用strokeDashArray的解决方案。

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

var border = new fabric.Rect({ 
    width: 200, 
    height: 100, 
    left: 50, 
    top: 40,
    fill: "#FFFFFF",
    strokeWidth: 1,
    stroke: '#333',
    strokeDashArray: [200, 100] // same as [width, height]

});

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

jsFiddle答案是here。

您可以根据此答案找到适用于任何类型自定义边框的解决方案。

如何仅在某一方面设置一个笔划？

2 个答案: