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

分析:

坐标点(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

JavaScript求两点之间相对于Y轴的顺时针旋转角度的更多相关文章

  1. 求两点之间距离 C++

    求两点之间距离(20 分) 定义一个Point类,有两个数据成员:x和y, 分别代表x坐标和y坐标,并有若干成员函数. 定义一个函数Distance(), 用于求两点之间的距离.输入格式: 输入有两行 ...

  2. 求两点之间最短路径-Dijkstra算法

     Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.D ...

  3. 武汉科技大学ACM :1006: 零起点学算法25——求两点之间的距离

    Problem Description 输入平面坐标系中2点的坐标,输出它们之间的距离 Input 输入4个浮点数x1 y1 x2 y2,分别是点(x1,y1) (x2,y2)的坐标(多组数据) Ou ...

  4. HDU2874(LCA应用:求两点之间距离,图不连通)

    Connections between cities Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (J ...

  5. UESTC(LCA应用:求两点之间的距离)

    Journey Time Limit: 15000/3000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Bob has ...

  6. URAL 题目1553. Caves and Tunnels(Link Cut Tree 改动点权,求两点之间最大)

    1553. Caves and Tunnels Time limit: 3.0 second Memory limit: 64 MB After landing on Mars surface, sc ...

  7. JavaScript如何获得两点之间顺时针旋转的角度

    接上回:如何用javascript中的canvas让图片自己旋转 既然能够制定角度让图片旋转,那么现在要做的是自动获得旋转的角度, 让图片能够随着鼠标的方向旋转,让人物能够面朝鼠标的方向: 源代码: ...

  8. dfs+记忆化搜索,求任意两点之间的最长路径

    C.Coolest Ski Route 题意:n个点,m条边组成的有向图,求任意两点之间的最长路径 dfs记忆化搜索 #include<iostream> #include<stri ...

  9. Geotools求shapefile路网中任意两点之间最短路径的距离

    前言:之前在博问求助过这个问题.经过几天的思考,算是解决了(但仍有不足),另一方面对Geotools不是很熟,有些描述可能不正确,希望大家批评指正. 问题:作为一个新手,我并没有发现Geotools中 ...

随机推荐

  1. 一、left

    一.left - right 就是遍历(以左边遍历,以右边遍历) inner join 就是求公共部分的结果集 left join 查询结果 right join结果 inner join 解决的办法 ...

  2. (js)粘贴时去掉HTML格式

    一.IE能够触发onbeforepaste事件,因此可以在该事件中直接改变剪贴板中的内容实现过滤效果 二.谷歌由于不能触发onbeforepaste,先阻止默认行为,通过window.getSelec ...

  3. vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js

    在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...

  4. 内核热patch

    如下代码是一个内核patch #include <linux/init.h> #include <linux/module.h> #include <linux/modu ...

  5. UOJ #228. 基础数据结构练习题 线段树 + 均摊分析 + 神题

    题目链接 一个数被开方 #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",st ...

  6. Java——容器(List)

    [List接口]  

  7. codevs 1160 蛇形矩阵x

    题目描述 Description 小明玩一个数字游戏,取个n行n列数字矩阵(其中n为不超过100的奇数),数字的填补方法为:在矩阵中心从1开始以逆时针方向绕行,逐圈扩大,直到n行n列填满数字,请输出该 ...

  8. 【PowerOJ1744&网络流24题】方格取数问题(最小割)

    题意: n,m<=30 思路: [问题分析] 二分图点权最大独立集,转化为最小割模型,从而用最大流解决. [建模方法] 首先把棋盘黑白染色,使相邻格子颜色不同,所有黑色格子看做二分图X集合中顶点 ...

  9. [思路题][LOJ2290][THUWC2017]随机二分图:状压DP+期望DP

    分析 考虑状压DP,令\(f[sta]\)表示已匹配状态是\(sta\)(\(0\)代表已匹配)时完美匹配的期望数量,显然\(f[0]=1\). 一条边出现了不代表它一定在完美匹配内,这也导致很难去直 ...

  10. SpringCloud 教程 (七)服务注册(consul)

    一.consul 简介 consul 具有以下性质: 服务发现:consul通过http 方式注册服务,并且服务与服务之间相互感应. 服务健康监测 key/value 存储 多数据中心 consul可 ...