Fabric.js Polyline scaleX 属性介绍

Polyline是fabric.js中绘制任意线条的工具，其中有一个比较重要的属性就是scaleX。

属性介绍

scaleX是用来设置线条水平方向比例的属性，其值为数字类型，取值范围为0以上的实数。

默认的scaleX为1，表示线条不进行缩放。当scaleX小于1时，线条会被缩小，当scaleX大于1时，线条会被放大。

var canvas = new fabric.Canvas('c');
var points = [ {x: 50, y: 50}, {x: 150, y: 150} ];
var polyline = new fabric.Polyline(points, {
  fill: 'red',
  stroke: 'blue',
  strokeWidth: 5,
  scaleX: 2 // 将线条放大到原来的两倍
});
canvas.add(polyline);

属性应用场景

假设我们有两个画布，一个是原始的画布，一个是缩放后的画布。我们要在缩放后的画布上绘制一个线条，同时需要知道在原始画布上该线条的位置。

这时候，我们可以先在原始画布上绘制该线条，然后将线条clone到缩放后的画布上，并将线条的scaleX属性设置为缩放的比例。

var origCanvas = new fabric.Canvas('orig-canvas');
var zoomedCanvas = new fabric.Canvas('zoomed-canvas', {
  scaleX: 2 // 将画布放大到原来的两倍
});

var points = [ {x: 50, y: 50}, {x: 150, y: 150} ];
var polyline = new fabric.Polyline(points, {
  fill: 'red',
  stroke: 'blue',
  strokeWidth: 5
});

origCanvas.add(polyline);

var clonedPolyline = polyline.clone();
clonedPolyline.set({
  left: polyline.left * 2, // 将线条位置调整到放大后的画布上
  top: polyline.top * 2,
  scaleX: 2 // 将线条放大到放大后的画布上
});

zoomedCanvas.add(clonedPolyline);

总结

Polyline的scaleX属性可以用来控制线条的水平缩放比例，常用于实现画布缩放后的绘制效果。