原创

canvas绘图中常用检测工具方法

温馨提示:
本文最后更新于 2021年12月11日,已超过 160 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

canvas绘图过程中我们经常需要添加鼠标事件,而canvas中的元素是无法直接绑定鼠标事件的,这个时候就需要做鼠标在画布上的位置检测,通过鼠标位置转换到canvas坐标系的横、纵坐标,去匹配坐标在哪个元素绘制的范围内,然后确定当前选中元素是哪个....

检测坐标在常见图形内的方法

在圆形内

isInnerCircle(x0, y0, r, x, y) {
  return Math.pow(x0 - x, 2) + Math.pow(y0 - y, 2) <= Math.pow(r, 2)
}

其中:x0,y0表示圆心的坐标,r:表示圆的半径  x,y表示鼠标在画布中的位置

在矩形内

// 判断是否在矩形框内
isInnerRect(x0, y0, width, height, x, y) {
  return x0 <= x && y0 <= y && (x0 + width) >= x && (y0 + height) >= y
}

其中:x0,y0表示矩形的左上角坐标,width:矩形的宽,height:矩形的高   x,y表示鼠标在画布中的位置

在直线上

// 判断是否在路径上
isInnerPath(x0, y0, x1, y1, x, y, lineWidth) {
  var a1pow = Math.pow(x0 - x, 2) + Math.pow(y0 - y, 2);
  var a1 = Math.sqrt(a1pow, 2)
  var a2pow = Math.pow(x1 - x, 2) + Math.pow(y1 - y, 2)
  var a2 = Math.sqrt(a2pow, 2)

  var a3pow = Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)
  var a3 = Math.sqrt(a3pow, 2)

  var r = lineWidth / 2
  var ab = (a1pow - a2pow + a3pow) / (2 * a3)var ab = (a1pow - a2pow + a3pow) / (2 * a3)
  var h = Math.sqrt(a1pow - Math.pow(ab, 2), 2)

  var ad = Math.sqrt(Math.pow(a3, 2) + Math.pow(r, 2))

  return h <= r && a1 <= ad && a2 <= ad
}
x0, y0 : 表示连线的起始坐标x1, y1 : 表示连线的终点坐标x, y : 表示鼠标在画布中的位置lineWidth :连线的宽度
正文到此结束
该篇文章的评论功能已被站长关闭