fabricjs 围绕对象中心点旋转

2024-04-15 00:33:18

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

围绕左上角旋转

通过设置属性的方法 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();
}

fabricjs 围绕对象中心点旋转相关推荐

Unity摄像机对象锁定旋转运镜模拟
问题简述在3D模式下如何模拟实现Unity摄像机对象锁定旋转运镜,可以分为两个部分,第一是实现对象锁定,第二是实现旋转运镜.对象锁定就是无论摄像机如何运动,始终保持对象位于摄像机成像区域的固定位置, ...
html5 中心点旋转,html5 canvas围绕中心点旋转
围绕中心点旋转 window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canva ...
一个围绕中心点旋转的动画效果
View围绕中心点旋转,直接上代码: final ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotation& ...
CSS对象中心点对齐与旋转
先看html代码 <!DOCTYPE html> <html> <head> <style> #div1 {height: 500px;width: 3 ...
canvas绘图 -实现图片围绕中心点旋转
今天想要学习制作一个抽奖的转盘,想用canvas来绘制转盘,于是重新学习了一下canvas. 1.canvas的使用要使用元素,必须先设置其width和height属性,制定额可以绘图的区域大小.出 ...
html旋转围绕的中心点,CSS3实现围绕任何点来旋转(二) | 睿客网
前天写过一篇文章 "CSS3实现围绕任何点来旋转",主要是实现围绕点来旋转. 今天我们继续用另外一种方式实现. 我们先来看代码 HTML ☺ CSS.smile { margin: ...
向量学习2：图形围绕自己中心旋转、围绕图形外或内任意点为中心旋转
在前边博文"向量学习1"中,介绍了在篮球游戏中,防守者逼近防守投篮者,如何用向量,计算逼近的方向以及前进的距离.方法可用篮球投篮.足球射门和射击的子弹轨迹等等方面.在pygame游 ...
Three.js 开发之物体围绕自己轴心旋转（二）
让某个mesh绕自己的Y轴旋转,而不是中心点旋转. 在scene三维场景内,默认的中心点就是(0, 0,0),添加到场景内的物体的position定位都是围绕原点进行的.此时,如果添加了电风扇或者空调 ...
数字图像处理（五）几何变换之图像平移、镜像、绕中心点旋转、缩放等
本文为参考这位https://blog.csdn.net/eastmount/article/details/46345299所做的一些笔记,文字部分复制粘贴,代码部分有所改进,增加了绕中心点旋转等 ...

最新文章

热门文章