本文簡(jiǎn)介

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了

使用 fabric.js 創(chuàng)建的圖形，默認(rèn)的縮放原點(diǎn)是元素操作點(diǎn)的對(duì)角點(diǎn)。

如下圖所示：

file

如果按住 alt 鍵 操作會(huì)把原點(diǎn)移動(dòng)到元素中心。

如下圖所示：

file

如果想將默認(rèn)縮放操作設(shè)置為“中心縮放”，只需將 centeredScaling 屬性設(shè)置為 true 即可。

設(shè)置中心縮放

雖然只要將 ``centeredScaling 設(shè)置為 true 就行了，但還能再細(xì)分成2種情況。

一個(gè)是全局設(shè)置，一個(gè)是只設(shè)置指定元素。

在實(shí)際操作之前，我先創(chuàng)建畫布，并在畫布上添加2個(gè)元素，一個(gè)矩形，一個(gè)圓形。

file

<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>

全局設(shè)置

全局設(shè)置的話，畫布上所有元素都會(huì)生效。

只需在創(chuàng)建畫布時(shí)將 centeredScaling 設(shè)為 true 即可。

file

// 省略部分代碼.

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


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

從上圖中可以看到，不管是圓形還是矩形都是以中心點(diǎn)為縮放原點(diǎn)。因?yàn)樵?new fabric.Canvas 時(shí)或者其返回的實(shí)例對(duì)象上設(shè)置 centeredScaling 都是全局生效的。

單獨(dú)設(shè)置指定元素

如果只是設(shè)置指定元素以中心點(diǎn)為縮放原點(diǎn)，那么被設(shè)置的元素會(huì)生效，其他元素不會(huì)生效。

本例只將矩形設(shè)置成以中心點(diǎn)為縮放原點(diǎn)，圓形還是默認(rèn)的操作。

file

// 省略部分代碼

// 矩形
let rect = new fabric.Rect({
  width: 100,
  height: 60,
  left: 100,
  top: 100,
  fill: 'pink',
  centeredScaling: true // 單個(gè)元素生效
})

// 將矩形添加到畫布里
canvas.add(rect)

上面的代碼只設(shè)置了矩形的 centeredScaling ，圓形還是默認(rèn)值。

所以在操作矩形縮放時(shí)是以中心點(diǎn)為原點(diǎn)，圓形還是默認(rèn)值。

同樣，也支持在創(chuàng)建元素后再設(shè)置。

// 省略部分代碼

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

rect.centeredScaling = true

代碼倉(cāng)庫(kù)

? Fabric.js 中心縮放

推薦閱讀

??《Fabric.js 從入門到 _ _ _ _ _ _》

??《Fabric.js IText 手動(dòng)設(shè)置斜體》

??《Fabric.js 動(dòng)態(tài)設(shè)置字號(hào)大小》

??《Fabric.js 鎖定背景圖，不受縮放和拖拽的影響》

??《Fabric.js 自由繪制橢圓》

??《Fabric.js 橡皮擦的用法（包含恢復(fù)功能）》

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
代碼倉(cāng)庫(kù)