先吐槽一下现在网上搜索的东西，莆田货先不说，牛鬼蛇神，各显神通，要么是千篇一律、答非所问，要么是无人善后的半吊子回答，再要么是上个世纪的古董玩意儿，这样让我们这些面向百度编程的人很难办啊！
围绕左上角旋转
通过设置属性的方法 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://javaforall.net/199610.html原文链接：https://javaforall.net
