关于前端:Fabricjs-元素中心缩放

本文简介

点赞 + 关注 + 珍藏 = 学会了

应用 fabric.js 创立的图形，默认的缩放原点是元素操作点的对角点。

如下图所示：

如果按住 alt 键 操作会把原点挪动到元素核心。

如下图所示：

如果想将默认缩放操作设置为“核心缩放”，只需将 centeredScaling 属性设置为 true 即可。

设置核心缩放

尽管只有将 `centeredScaling 设置为 true` 就行了，但还能再细分成 2 种状况。

一个是全局设置，一个是只设置指定元素。

在实际操作之前，我先创立画布，并在画布上增加 2 个元素，一个矩形，一个圆形。

<canvas id="canvasBox" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  // 初始化画布
  let canvas = new fabric.Canvas('canvasBox')

  // 矩形元素
  let rect = new fabric.Rect({
    width: 100,
    height: 60,
    left: 100,
    top: 100,
    fill: 'pink'
  })
  
  // 将矩形增加到画布里
  canvas.add(rect) 

  // 圆形元素
  let circle = new fabric.Circle({
    radius: 50,
    left: 300,
    top: 80,
    fill: 'green'
  })

  // 将圆形增加到画布里
  canvas.add(circle)
</script>

全局设置

全局设置的话，画布上所有元素都会失效。

只需在创立画布时将 centeredScaling 设为 true 即可。

// 省略局部代码.

// 形式 1
let canvas = new fabric.Canvas('canvasBox', {centeredScaling: true // 全局所有元素都失效})


// 形式 2
let canvas = new fabric.Canvas('canvasBox')
canvas.centeredScaling = true

从上图中能够看到，不论是圆形还是矩形都是以中心点为缩放原点。因为在 new fabric.Canvas 时或者其返回的实例对象上设置 centeredScaling 都是全局失效的。

独自设置指定元素

如果只是设置指定元素以中心点为缩放原点，那么被设置的元素会失效，其余元素不会失效。

本例只将矩形设置成以中心点为缩放原点，圆形还是默认的操作。

// 省略局部代码

// 矩形
let rect = new fabric.Rect({
  width: 100,
  height: 60,
  left: 100,
  top: 100,
  fill: 'pink',
  centeredScaling: true // 单个元素失效
})

// 将矩形增加到画布里
canvas.add(rect)

下面的代码只设置了矩形的 centeredScaling，圆形还是默认值。

所以在操作矩形缩放时是以中心点为原点，圆形还是默认值。

同样，也反对在创立元素后再设置。

// 省略局部代码

let rect = new fabric.Rect({...})

rect.centeredScaling = true

代码仓库

⭐ Fabric.js 核心缩放

举荐浏览

👍《Fabric.js 从入门到 _ _》

👍《Fabric.js IText 手动设置斜体》

👍《Fabric.js 动静设置字号大小》

👍《Fabric.js 锁定背景图，不受缩放和拖拽的影响》

👍《Fabric.js 自在绘制椭圆》

👍《Fabric.js 橡皮擦的用法（蕴含复原性能）》

点赞 + 关注 + 珍藏 = 学会了
代码仓库