OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用JavaScript测试图像上两点之间的距离


分享到


分类 JS学习   关键字 JavaScript   发布 ourjs  1536928766023
注意 转载须保留原文链接,译文链接,作者译者等信息。  
用浏览器原生支持的JavaScript,可以实现一个简单的测量图像两点之间距离的方法。基本原理是记录下 两次鼠标点击的位置。然后计算出距离,按F12,在console中粘入以步代码即可测试。   

var p1
var p2

document.addEventListener('mousedown', function(e) {
  if (!p1) {
    p1 = e
    return
  }

  p2 = e

  var dx = p2.clientX - p1.clientX
  var dy = p2.clientY - p1.clientY

  var dis = Math.sqrt(Math.abs(Math.pow(dx, 2) - Math.pow(dy, 2), 2))

  console.log('distance', dis)

  p1 = null
  p2 = null
})
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Git服务器搭建,多用户组权限控制配置,添加新用户密码登陆
  2. 设置select元素中option的默认值
  3. 上海行业工资排名:产品经理一骑绝尘,前端排名第二?
  4. Node.JS命令行或批处理中更改Linux用户密码
  5. 用JavaScript实现node.js中的path.join方法
  6. Linux上为git无交互添加最低权限的使用用户
  7. 为jquery的ajax请求添加超时timeout时间
  8. JavaScript中新建一个带全局变量参数的new Function动态函数
  9. 使用Node.JS批量查找替换目录下文本文件中图片地址内容
  10. JavaScript运算出现很多小数导致运算不精确的问题,用toFixed解决
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - JS学习
  1. 用JavaScript测试图像上两点之间的距离
  2. JavaScript运算出现很多小数导致运算不精确的问题,用toFixed解决
  3. 使用Node.JS批量查找替换目录下文本文件中图片地址内容
  4. 判断Node.JS TCP Socket当前连接状态
  5. Node.JS进程间通讯的几种方法:Redis Publish/Subscribe 和 UDP Socket
  6. 用JavaScript实现node.js中的path.join方法
  7. JavaScript中新建一个带全局变量参数的new Function动态函数
  8. 设置select元素中option的默认值
  9. JavaScript用Number/parseInt/parseFloat判断字符串是否为数字
  10. 用JavaScript将input/textarea中的文本复制粘贴到剪切板

 关键字 - JavaScript
  1. 用JavaScript获取当月第一天和最后一天
  2. 用JavaScript测试图像上两点之间的距离
  3. JSON序列化(stringify)对象时排除某些属性的两种方法
  4. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  5. JavaScript运算出现很多小数导致运算不精确的问题,用toFixed解决
  6. 用JavaScript实现node.js中的path.join方法
  7. 如何用CSS将select/option文本居中或居右对齐
  8. JavaScript中新建一个带全局变量参数的new Function动态函数
  9. 设置select元素中option的默认值
  10. 在JavaScript中创建命名空间的几种写法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号