JavaScript求两点之间相对于Y轴的顺时针旋转角度

需求: 已知一个向量,初始位置在y轴方向,如图红色箭头,绕中心点(x1, y1)旋转若干角度后,到达Line(x2,y2 x1,y1)的位置,求旋转角度
725304-20180222151012274-20951013.png

分析:
坐标点(x1, y1)(x2, y2)已知,则可利用JavaScript反三角函数求角度。

      var  getYAngle= function (cx, cy, x2, y2) {
            var x = Math.abs(cx - x2);
            var y = Math.abs(cy - y2);
            var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
            var tan = x / y;
            var radina = Math.atan(tan);//用反三角函数求弧度
            var angle = Math.floor(180 / (Math.PI / radina)) || 0;//将弧度转换成角度
            if (x2 > cx && y2 > cy) {// point在第四象限
                angle = (-1) * angle;
            }
            if (x2 == cx && y2 > cy) {// point在y轴负方向上
                angle = 0;
            }
            if (x2 < cx && y2 > cy) {//point在第三象限
                angle = angle;
            }
            if (x2 < cx && y2 == cy) {//point在x轴负方向
                angle = 90;
            }
            if (x2 < cx && y2 < cy) {// point在第二象限

                angle = 180 - angle;
            }
            if (x2 == cx && y2 < cy) {//point在y轴正方向上
                angle = 180;
            }
            if (x2 > cx && y2 < cy) {//point在第一象限               
                angle = 180 + angle;
            }

            if (x2 > cx && y2 == cy) {//point在x轴正方向上
                angle = -90;
            }

            return angle;
        }

然后使用Svg.js修改polygon的属性

// headingPolygon
      var Headingpolygon = SVG.get(this.config.panelId + '_Headingpolygon');
      var xa = x1 - 7, xb = x1 + 7, ya = y1 + 18;
      var headAngle = this.getYAngle(x1, y1, x2, y2) || 0;

      Headingpolygon.attr({
          'points': x1 + "," + y1 + " " + xa + "," + ya + " " + xb + "," + ya,
          'transform': 'rotate(' + headAngle + ', ' + x1 + ' ' + y1 + ')'
       });

本文参考: http://www.cnblogs.com/worldFulcrum/p/5573927.html

转载于:https://www.cnblogs.com/liulei-cherry/p/8459006.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值