先吐槽一下現在網上搜索的東西，莆田貨先不說，牛鬼蛇神，各顯神通，要么是千篇一律、答非所問，要么是無人善后的半吊子回答，再要么是上個世紀的古董玩意兒，這樣讓我們這些面向百度編程的人很難辦啊！
圍繞左上角旋轉
通過設定屬性的方法 object.set("angle", angle) 是圍繞左上角進行旋轉的，但是通過控制點旋轉是圍繞物件中心點旋轉的，那人家就是要通過 js 控制物件中心旋轉怎么辦嘛？
圍繞中心點旋轉
網上有個稍微正常的回答：設定物件 originX、oringY 屬性為 center，可以是可以設定中心旋轉，但對齊點會改變，物件位置會發生偏移，這時后就要重新計算 left、top 屬性值，然后旋轉，然后再把對齊點設定回去，最后再計算一次坐標，這里已經看不下去了，這么麻煩的話我還用庫干啥，直接羅本用原生 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;
},
原來 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();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/323093.html
標籤：區塊鏈