📌  相关文章
📜  Fabric.js Polyline lockScalingX 属性(1)

📅  最后修改于: 2023-12-03 15:30:42.797000             🧑  作者: Mango

Fabric.js Polyline lockScalingX 属性

简介

Fabric.js 是一个优秀的 HTML5 canvas 库，可用于简化开发人员在前端处理图像和动画的工作。Polyline 是 Fabric.js 库中的一个对象类型，是一个可以由多个点连接而成的多段线段对象。lockScalingX 是 Polyline 对象的一个属性，可用于设置 Polyline 在 X 轴方向上是否允许缩放。

语法
var polyline = new fabric.Polyline(points, options);
polyline.lockScalingX = true;    // 或者 false
参数

该属性只有两个可选值，分别是：

  • true：表示在 X 轴方向上固定大小，不允许缩放；
  • false：表示在 X 轴方向上可缩放。
使用方法

可以通过在创建 Polyline 对象时，将 lockScalingX 属性设置为 true 或 false 来控制 Polyline 是否可以在 X 轴方向上缩放。

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

var polyline = new fabric.Polyline(points, {
  fill: null,
  stroke: 'black',
  strokeWidth: 2,
  lockScalingX: true     // 在 X 轴方向上固定大小，不允许缩放
});

也可以设置已创建的 Polyline 对象的 lockScalingX 属性：

polyline.set({
  lockScalingX: false    // 在 X 轴方向上可缩放
});
注意事项

Polyline 对象的 lockScalingX 属性默认值为 true，即默认在 X 轴方向上不允许缩放。如果想要允许缩放，需要将 lockScalingX 属性设置为 false。

参考链接