Fabric.js Polyline PaintFirst 属性

The Fabric.js Polyline PaintFirst property is used to set the rendering order of a polyline object. By default, when a polyline is drawn, the stroke is rendered after the fill. However, setting the PaintFirst property to true will reverse the order and the stroke will be rendered before the fill.

Syntax

polyline.set('paintFirst', <Boolean>);

Usage

To use the PaintFirst property, simply set it to a Boolean value representing the desired rendering order. For example:

var myPolyline = new fabric.Polyline(points, {
    paintFirst: true
});

Example

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

var points = [
    {x: 50, y: 50},
    {x: 100, y: 100},
    {x: 150, y: 50},
    {x: 200, y: 100},
];

var myPolyline = new fabric.Polyline(points, {
    stroke: 'black',
    strokeWidth: 5,
    fill: 'blue',
    paintFirst: true,
});

canvas.add(myPolyline);

In this example, a polyline object is created with 4 points and the PaintFirst property is set to true. The stroke is rendered before the fill, resulting in a black stroke over a blue fill.

Conclusion

The Fabric.js Polyline PaintFirst property is a useful tool for controlling the rendering order of a polyline object. By setting this property to true or false, you can control whether the stroke or the fill is rendered first, giving you greater control over the look of your designs.