Fabric.js 折线 includeDefaultValues 属性

简介

Fabric.js 是一个基于 HTML5 Canvas 的高级绘图库，可用于创建交互式且高度可定制的图形，并且支持多种媒体类型的导入和导出。Fabric.js 折线是用于创建多段折线的对象，使用 includeDefaultValues 属性可以设置默认的折线样式。

语法

canvas.add(new fabric.Polyline(points, {
    includeDefaultValues: true,
    fill: 'red',
    stroke: 'blue'
}));

解释

• fabric.Polyline：用于创建多段折线的对象。
• points：折线节点数组，包括点的 x 和 y 坐标。
• includeDefaultValues：如果为 true，则使用默认值。默认值为 fill: '', stroke: '', strokeWidth: 1, strokeLineCap: 'butt', strokeLineJoin: 'miter', strokeDashArray: null, strokeDashOffset: 0, opacity: 1, selectable: true, hasControls: true, hasBorders: true, hasRotatingPoint: true, lockMovementX: false, lockMovementY: false, lockRotation: false, lockScalingX: false, lockScalingY: false, lockUniScaling: false, centeredScaling: false, strokeWidthUnits: 'pixels'。
• fill：填充颜色。
• stroke：线条颜色。
• strokeWidth：线条宽度。
• strokeLineCap：线条边缘的终点形状。
• strokeLineJoin：线条交点处的形状。
• strokeDashArray：虚线模式，如 [5, 2] 表示实线长度为 5，虚线长度为 2。
• strokeDashOffset：虚线的偏移量。
• opacity：透明度。
• selectable：对象是否可被选择。
• hasControls：对象是否拥有控制点。
• hasBorders：对象是否拥有边框。
• hasRotatingPoint：对象是否拥有旋转点。
• lockMovementX：对象是否锁定在水平方向上的移动。
• lockMovementY：对象是否锁定在竖直方向上的移动。
• lockRotation：对象是否锁定旋转。
• lockScalingX：对象是否锁定水平方向上的缩放。
• lockScalingY：对象是否锁定竖直方向上的缩放。
• lockUniScaling：如果为 true，则仅能以均等的比例缩放对象。
• centeredScaling：如果为 true，则仅能以对象中心为基准进行缩放。
• strokeWidthUnits：线条宽度的单位，默认为像素。

示例

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

const points = [
    { x: 10, y: 10 },
    { x: 50, y: 30 },
    { x: 30, y: 50 },
    { x: 90, y: 70 },
    { x: 70, y: 90 }
];

const polyline = new fabric.Polyline(points, {
    includeDefaultValues: true,
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    strokeLineCap: 'round',
    strokeLineJoin: 'round',
    strokeDashArray: [5, 2],
    opacity: 0.7,
    selectable: false
});

canvas.add(polyline);

结论

使用 Fabric.js 折线的 includeDefaultValues 属性可以设置默认的折线样式，从而使代码更加简洁。