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


发布者 ourjs  发布时间 1536928766023
关键字 JS学习  JavaScript 
用浏览器原生支持的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
})








 热门文章 - 分享最多
  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解决

 相关阅读
  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中的文本复制粘贴到剪切板

  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA