WHCSRL 技术网

fabricjs 围绕对象中心点旋转

先吐槽一下现在网上搜索的东西,莆田货先不说,牛鬼蛇神,各显神通,要么是千篇一律、答非所问,要么是无人善后的半吊子回答,再要么是上个世纪的古董玩意儿,这样让我们这些面向百度编程的人很难办啊!

围绕左上角旋转

通过设置属性的方法 object.set("angle", angle) 是围绕左上角进行旋转的,但是通过控制点旋转是围绕对象中心点旋转的,那人家就是要通过 js 控制对象中心旋转怎么办嘛?

围绕中心点旋转

网上有个稍微正常的回答:设置对象 originXoringY 属性为 center,可以是可以设置中心旋转,但对齐点会改变,对象位置会发生偏移,这时候就要重新计算 lefttop 属性值,然后旋转,然后再把对齐点设置回去,最后再计算一次坐标。这里已经看不下去了,这么麻烦的话我还用库干啥,直接罗本用原生 canvas 计算不香吗?然而我不相信 fabricjs 连这种简单的方法都没有,这时还得偷窥源码,然后在 object.class.js 中发现了一处代码片段:

/**
 * Sets "angle" of an instance with centered rotation
 * @param {Number} angle Angle value (in degrees)
 * @return {fabric.Object} thisArg
 * @chainable
 */
rotate: function(angle) {
  var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation;
  if (shouldCenterOrigin) {
    this._setOriginToCenter();
  }
  this.set('angle', angle);
  if (shouldCenterOrigin) {
    this._resetOrigin();
  }
  return this;
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

原来 fabric 已经替我们偷偷地做好了啊,看来是这个问题太弱智了,以致于根本不屑于回答。但对于本 Ctrl CV 工程师来说就只有四个字:拿来把你:

/**
 * 控制选中对象围绕中心点旋转
 * @param {Number} angle 
 * @returns 
 */
rotate(angle) {
    if (!this.canvas.getActiveObject()) return;
    let activeObject = this.canvas.getActiveObject();
    activeObject.rotate(angle);
    this.canvas.requestRenderAll();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
推荐阅读