前言

图片360度任意旋转,

一、设计思路

1.确定中心和起始点：当鼠标点击旋转图标时，中心点为左边图片中心，起始点为旋转图标中心；

2.确定结束点：当鼠标移动时，鼠标的每一次变换都会更新结束点的坐标；

3.通过坐标点计算出该三角形三条边的长度(勾股定理)，再通过余弦函数算出弧度制，反余弦函数将弧度制转换为角度制(思路详解中会详细介绍)；

4.ie下通过滤镜，其它浏览器通过rotate实现最终效果；

二、思路详解

1.html部分

<div class="rotateImg"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F1d3d6d3bc7578c21.jpg&refer=http%3A%2F%2Fimg.tukexw.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621488806&t=9afe6c19464c4570f7ad05fc1d8f2daa"><div  @mousedown="rotate" class="rotate-char" ></div>
</div>
<style>.rotateImg{position:fixed;top:64px;left:256px;z-index:99999;background:#ccc;}.rotate-char{cursor:pointer;width:16px;height:16px;position:absolute;bottom:50%;margin-bottom:-8px;right:-36px;background:url('https://www.easyicon.net/api/resizeApi.php?id=1223185&size=16')}
</style>

2.旋转的方法

function rotate(){let rotate = document.querySelector(".rotate-char");let move = rotate.parentNode;let sum = 0;// 坐标定义,中心点，起始点，终点鼠标移动时，实时更新let centercoord = [move.offsetLeft+move.clientWidth/2,move.clientHeight/2+move.offsetTop],firstcoord = [centercoord[0]+rotate.offsetLeft+rotate.clientWidth/2-move.clientWidth/2,centercoord[1]],lastcoord = [];//鼠标按下后移动事件let moveFunc = () => {let deg = 0;let e = event || window.event,x = e.clientX,y=e.clientY;// 中心点 开始点 结束点lastcoord = [x,y];//结束点坐标随时更新deg = getAngle(centercoord,firstcoord,lastcoord);move.setAttribute("style","transform:rotate("+deg+"deg)")}//移动事件绑定window.document.addEventListener("mousemove",moveFunc);//鼠标抬起解绑移动事件let cancel = () => {window.document.removeEventListener("mousemove",moveFunc)};window.document.addEventListener("mouseup",cancel);
}

3.获取角度的方法

getAngle(cen,first,last){let c_f_x = first[0] - cen[0],c_f_y = first[1] - cen[1],l_c_x = last[0] - cen[0],l_c_y = last[1] - cen[1];//求导出逆时针还是顺时针旋转let dir = c_f_x * l_c_y - c_f_y * l_c_x;//算出三角形三条边的长度,pow可以将数据进行乘方运算let len_cf = Math.sqrt(Math.pow(cen[0] - first[0],2) + Math.pow(cen[1] - first[1],2)),len_cl = Math.sqrt(Math.pow(cen[0] - last[0],2) + Math.pow(cen[1] - last[1],2)),len_fl = Math.sqrt(Math.pow(first[0] - last[0],2) + Math.pow(first[1] - last[1],2));//算出三条边后通过余弦定理求出旋转角let cosA = (Math.pow(len_cf,2)+Math.pow(len_cl,2) - Math.pow(len_fl,2))/(len_cf*len_cl*2);//弧度制转为角度制let angle = Math.round(Math.acos(cosA) * 180 / Math.PI);// 判断逆时针，顺时针方向旋转if(dir < 0){//逆时针angle = -angle}return angle;},

ps：余弦定理，忘记的看这

图片360度无死角自由旋转相关推荐

ACSI： 360度无死角测量顾客满意度
除了CSAT.NPS .CES这三种指标之外,还有没有考量更周全的顾客满意度指数模型,能帮助企业360度无死角全方位测量其顾客的满意度指数? 答案:有.那就是美国顾客满意度指数ACSI. ACSI是什 ...
一种360度无死角开源的BMS电池保护板
一种360度无死角开源的BMS电池保护板感谢Danny Bokma和Jonathan French的无私贡献. 这款全开源的BMS电池保护板名叫DieBieMS. DieBieMS电池保护板主要特性 ...
继LSTM之父用世界模型来模拟2D赛车后，谷歌又推出全新世界模型助力导航：360度无死角，就问你怕了没？...
来源:AI科技评论本文约3400字,建议阅读10分钟今年2月,Google AI 也用世界模型,在 Atari 游戏中实现了达到人类水平的表现. 近年来,世界模型(World Model)在机器人. ...
停车还能360全方位影像_德国首创“新型汽车”不仅能无人驾驶，还能360度无死角停车...
说在驾校除了理论外,第一个学的就是侧方停车和倒车入库.但等到实际开车的时候,停车仍然是一些新手司机最头疼的事情.有时候好不容易找到停车位,停车都要好半天--经常是前后左右险象环生,手忙脚乱半天车还是停 ...
360度无死角 | Pulsar与Kafka对比全解析
点击上方蓝色字体,选择"设为星标" 回复"资源"获取更多资源 2020 年,Pulsar 受到持续关注,Pulsar 的应用场景也越来越广泛. 本文分别从性能. ...
为给微芯片拍照，IBM小哥用乐高拼了个电动显微镜，搭载树莓派，360度无死角拍摄...
来源:IEEE Spectrum 本文约1739字,建议阅读5分钟. 本文介绍一位乐高爱好者Yuksel Temiz为了从各种角度拍摄微流控芯片,用乐高.Arduino和树莓派,一起DIY了一个高精度 ...
阿里巴巴前架构师360度无死角剖析微服务
微服务是当前软件架构领域非常热门的词汇,在社区中也有很多热烈的讨论.因此,OSC第130期高手问答的主题是"究竟什么才是微服务",并邀请了黄勇作为高手嘉宾. 黄勇,现任特赞公司CT ...
360度无死角、近距离看「CNN」训练，是种什么体验？网友：美得不真实
萧箫鱼羊发自凹非寺量子位报道 | 公众号 QbitAI 做计算机视觉,离不开CNN. 可是,卷积.池化.Softmax--究竟长啥样,是怎样相互连接在一起的? 对着代码凭空想象,多少让人有点 ...
统计信号处理基础_0基础学Python，就业中你需要建立360度无死角技能树
1956年,人工智能的概念就已经提出,但在以前,人工智能大多只是存在于书本和荧幕中,到了今天,生活中充斥着人工智能的影子,智能语音助手.翻译器.指纹识别.人脸识别.无人驾驶...... 自阿尔法围棋出 ...

图片360度无死角自由旋转

前言

一、设计思路

二、思路详解

1.html部分

2.旋转的方法

3.获取角度的方法

ps：余弦定理，忘记的看这

图片360度无死角自由旋转相关推荐

最新文章

热门文章