前端

# 矩形

# 创建

使用 new fabric.Rect(object) 方法创建矩形

# 宽高

width height

const rect = new fabric.Rect({
  width: 60, // 矩形宽度
  height: 40, // 矩形高度
})
// 或者
const rect = new fabric.Rect()
rect.width = 60 // 设置矩形宽度
rect.height = 40 // 设置矩形高度
1
2
3
4
5
6
7
8

# 位置

top left

const rect = new fabric.Rect({
  top: 20, // 距离画布顶部距离
  left: 30, // 距离画布左侧距离
  width: 60,
  height: 40,
})
1
2
3
4
5
6

# show code


位置设置还可用 originX originY

  • originX 可选值：'left', 'right', 'center'。默认值是 'left'。
  • originY 可选值：'top', 'bottom', 'center'。默认值是 'top'。

这里是以左上角为原点，居中就是显示四分之一

const rect = new fabric.Rect({
  originX: 'center',
  originY: 'center',
  width: 60, // 矩形宽度
  height: 40, // 矩形高度
})
1
2
3
4
5
6

# show code


对齐左上角

const rect = new fabric.Rect({
  originX: 'left',
  originY: 'top',
  width: 60, // 矩形宽度
  height: 40, // 矩形高度
})
1
2
3
4
5
6

# show code

# 颜色

填充色 fill，描边颜色 stroke






 
 
 


const rect = new fabric.Rect({
  top: 20,
  left: 30,
  width: 60,
  height: 40,
  fill: 'transparent', // 可以填充透明色
  fill: '#95e1d3', // 十六进制颜色值
  stroke: 'red', // 通过颜色关键字设置矩形描边颜色
})
1
2
3
4
5
6
7
8
9

# 边框宽度

strokeWidth








 


const rect = new fabric.Rect({
  top: 20,
  left: 30,
  width: 60,
  height: 40,
  fill: '#95e1d3',
  stroke: 'red',
  strokeWidth: 10, // 设置边框宽度
})
1
2
3
4
5
6
7
8
9

# show code


在上一个例子中，如果你手动缩放矩形，矩形的边框也是会等比缩放的。

如果你希望不管怎么缩放矩形，边框的宽度都是固定不变的话，可以将矩形的 strokeUniform 属性设置为 true。









 


const rect = new fabric.Rect({
  top: 20,
  left: 30,
  width: 60,
  height: 40,
  fill: '#95e1d3',
  stroke: 'red',
  strokeWidth: 10, // 设置边框宽度
  strokeUniform: true,
})
1
2
3
4
5
6
7
8
9
10

# show code

# 虚线边框

通过 strokeDashArray 属性可以将元素的边框设置成虚线。

strokeDashArray 默认值是 null，此时是实线状态。

strokeDashArray 接收数值型数组，该数组用来定义虚线的生成规则。

规则如下:

// 10px实线, 10px虚线, 10px实线, 10px虚线……
strokeDashArray: [10]

// 10px实线, 20px虚线, 10px实线, 20px虚线……
strokeDashArray: [10, 20]

// 10px实线, 20px虚线, 30px实线, 10px虚线, 20px实线, 30px虚线……
strokeDashArray: [10, 20, 30]
1
2
3
4
5
6
7
8

# show code








 









 









 




let rect1 = new fabric.Rect({
  top: 20,
  left: 30,
  width: 60,
  height: 40,
  fill: 'transparent',
  stroke: 'red',
  strokeDashArray: [10] // 虚线
})

let rect2 = new fabric.Rect({
  top: 20,
  left: 120,
  width: 60,
  height: 40,
  fill: 'transparent',
  stroke: 'blue',
  strokeDashArray: [10, 20], // 虚线
})

let rect3 = new fabric.Rect({
  top: 20,
  left: 210,
  width: 60,
  height: 40,
  fill: 'transparent',
  stroke: 'green',
  strokeDashArray: [10, 20, 30], // 虚线
})

canvas.add(rect1, rect2, rect3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 边框起点偏移量

从上面的虚线边框可以看出，边框的起点在矩形的左上角。

如果你想逆时针偏移，可以给 strokeDashOffset 属性设置一个正数；如果想顺时针偏移，可以设置负数。

# show code









 










 




let rect1 = new fabric.Rect({
  top: 20,
  left: 30,
  width: 60,
  height: 40,
  fill: 'transparent',
  stroke: 'red',
  strokeDashArray: [10],
  strokeDashOffset: 4, // 逆时针偏移
})

let rect2 = new fabric.Rect({
  top: 20,
  left: 120,
  width: 60,
  height: 40,
  fill: 'transparent',
  stroke: 'blue',
  strokeDashArray: [10, 20],
  strokeDashOffset: -4, // 顺时针偏移
})

canvas.add(rect1, rect2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 圆角

rx 和 ry 可以控制矩形圆角大小。

如果只是设置了 rx，那么 ry 会取 rx 的值，反过来也一样。

如果矩形的正方形，且 rx 和 ry 是 width 和 height 的一半，此时会显示圆形。

# show code







 








 
 








 
 








 
 








 
 


let rect1 = new fabric.Rect({
  top: 20,
  left: 20,
  fill: 'pink',
  width: 80,
  height: 60,
  rx: 10 // 只设置了rx，那么ry的值也是10
})

let rect2 = new fabric.Rect({
  top: 20,
  left: 120,
  fill: 'orange',
  width: 80,
  height: 60,
  rx: 10,
  ry: 20
})

let rect3 = new fabric.Rect({
  top: 20,
  left: 220,
  fill: 'skyblue',
  width: 80,
  height: 60,
  rx: 30, // rx 和 ry 的值是 height 的一半，此时 height 比 width 小
  ry: 30
})

let rect4 = new fabric.Rect({
  top: 20,
  left: 320,
  fill: 'lightgreen',
  width: 80,
  height: 60,
  rx: 40, // rx 和 ry 的值是 width 的一半，此时 width 比 height 大
  ry: 40
})

let rect5 = new fabric.Rect({
  top: 20,
  left: 420,
  fill: 'purple',
  width: 60,
  height: 60,
  rx: 30, // 如果 width 和 height 一样（正方形），而 rx 和 ry 都是 width 和 height 的一半，那此时显示的是圆形
  ry: 30
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 旋转

angle，逆时针旋转

# show code






 


let rect = new fabric.Rect({
  top: 20,
  left: 20,
  width: 80,
  height: 60,
  angle: 10 // 旋转10度
})
1
2
3
4
5
6
7

# 反转

flipX flipY

# show code



























 








 




// 线性渐变
  let gradient = new fabric.Gradient({
    type: 'linear', // linear or radial
    gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
    coords: { x1: 0, y1: 0, x2: 80, y2: 60 }, // 至少2个坐标对（x1，y1和x2，y2）将定义渐变在对象上的扩展方式
    colorStops: [
      // 定义渐变颜色的数组
      { offset: 0, color: 'orange' },
      { offset: 1, color: 'blue' },
    ],
  })

  let rect1 = new fabric.Rect({
    top: 20,
    left: 20,
    width: 80,
    height: 60,
    fill: gradient,
  })

  let rect2 = new fabric.Rect({
    top: 20,
    left: 140,
    width: 80,
    height: 60,
    fill: gradient,
    flipX: true, // 水平翻转
  })

  let rect3 = new fabric.Rect({
    top: 120,
    left: 20,
    width: 80,
    height: 60,
    fill: gradient,
    flipY: true, // 垂直翻转
  })

  canvas.add(rect1, rect2, rect3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 基础样式

{
  top: 100,
  left: 100,
  radius: 50, // 半径：50px
  backgroundColor: 'green', // 背景色：绿色
  fill: 'orange', // 填充色：橙色
  stroke: '#f6416c', // 边框颜色：粉色
  strokeWidth: 5, // 边框粗细：5px
  strokeDashArray: [20, 5, 14], // 边框虚线规则：填充20px 空5px 填充14px 空20px 填充5px ……
  shadow: '10px 20px 6px rgba(10, 20, 30, 0.4)', // 投影：向右偏移10px，向下偏移20px，羽化6px，投影颜色及透明度
  transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
  borderColor: '#16f1fc', // 选中时，边框颜色：天蓝
  borderScaleFactor: 5, // 选中时，边的粗细：5px
  borderDashArray: [20, 5, 10, 7], // 选中时，虚线边的规则
  cornerColor: "#a1de93", // 选中时，角的颜色是 青色
  cornerStrokeColor: 'pink', // 选中时，角的边框的颜色是 粉色
  cornerStyle: 'circle', // 选中时，角的属性。默认rect 矩形；circle 圆形
  cornerSize: 20, // 选中时，角的大小为20
  cornerDashArray: [10, 2, 6], // 选中时，虚线角的规则
  selectionBackgroundColor: '#7f1300', // 选中时，选框的背景色：朱红
  padding: 40, // 选中时，选择框离元素的内边距：40px
  borderOpacityWhenMoving: 0.6, // 当对象活动和移动时，对象控制边界的不透明度  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
最后更新时间: 12/4/2023, 5:14:18 PM

← 路径 →