Fabric.js 多边形 strokeUniform 属性
在本文中,我们将了解如何使用FabricJS锁定画布多边形的统一笔触宽度,以便即使我们将对象缩放到更大的尺寸时,笔触的宽度也保持不变。画布意味着多边形是可移动的,可以根据需要进行拉伸。此外,当涉及到初始笔划颜色、填充颜色、笔划宽度或大小时,可以自定义多边形。
方法:
FabricJS JavaScript 库用于上述。使用 CDN 导入库后,我们将在body标记中创建一个画布块,其中包含我们的多边形。之后,我们将初始化 FabricJS 提供的 Canvas 和 Polygon 的实例,并使用strokeUniform属性锁定画布 Polygon 的统一笔划宽度,并在画布上渲染多边形,如下例所示。
句法:
fabric.Polygon([
{ x: pixel, y: pixel },
{ x: pixel, y: pixel },
{ x: pixel, y: pixel},
{ x: pixel, y: pixel},
{ x: pixel, y: pixel }], {
strokeUniform: string
}
);
参数:此属性接受如上所述和下文所述的单个参数。
- strokeUniform:当为“ false ”时,描边宽度将随物体缩放。当为“真”时,笔画将始终与为笔画宽度输入的确切像素大小相匹配。默认值为“假” 。
注意:维度像素必须创建一个多边形。
示例:下面的示例说明了 JavaScript 中的Fabric.JS Polygon strokeUniform。
HTML
GeeksforGeeks
Fabric.js | Polygon strokeUniform Property
输出: