zoukankan      html  css  js  c++  java
  • javascript拖拽精灵放大缩小旋转的方法

    javascript拖拽精灵放大缩小旋转的方法 

    玩过美图秀秀的人知道 可以添加挂件 能够放大缩小旋转  我画了个图 就明白原理了

    2个小红点就是选中点拖动的起点和终点

    放大到AB的长度 然后旋转C度就可以了  

    具体算法

    1 获取中间精灵坐标

    2 计算圆心到第二个红点的角度(直接设置这个角度就可以了)

    可以用atan2函数(假设圆心在00点 需要换算下)

    3计算AB距离更简单了 先计算B的坐标 知道B与X夹角的度数  坐标计算就是用

    x1 = x0 + r * cos(angle * Math.PI / 180)
    
    y1 = y0 + r * sin(angle * Math.PI/180)

    就搞定了

    A坐标X 计算出来 后 看的出来与Y轴对称 那就是 A坐标X*2 就是AB距离了


    ps:右下角的旋转放大按钮就是 外圆半径+最开始的精灵宽度高度/2计算和 左上角 那就是X Y加负数就可以了


  • 相关阅读:
    首页效果
    vue 资源精选
    webpack
    常用代码
    超炫效果
    TJ 大神 与 node
    fis webpack 原理对比
    前端自动化测试
    非常强的用户体验的网站功能
    蔡康永: 说话之道
  • 原文地址:https://www.cnblogs.com/newmiracle/p/13855248.html
Copyright © 2011-2022 走看看