fabricjs中因mac retina屏幕像素比导致的捕捉canvas像素不准确

背景

问题的起因是某项目中实现一个光标指向canvas后,捕捉当前鼠标位置色值的功能。功能完成后部分用户出现色值偏差,如图:

分析

fabricjs初始化canvas时,enableRetinaScalling默认开启,致使canvas getImageData()坐标错位,

问题解决:

修改前:

javascript 复制代码
/**
 * 获取canvas背景图中指定像素色值
 * @param canvas canvas参数为new fabric.Canvas()实例
 * @param x 鼠标x坐标位置
 * @param y 鼠标y坐标位置
 * @returns 当前鼠标所在像素的色值
 */
function getColorAtPosition(canvas, x, y) {
  var canvasElement = canvas.getElement()
  var context = canvasElement.getContext('2d')
  let newX = x * canvas.backgroundImage.scaleX
  let newY = y * canvas.backgroundImage.scaleY
  var pixel = context.getImageData(newX, newY, 1, 1).data
  const color = new fabric.Color(`rgba(${pixel.join(',')})`)
  return {
    array: pixel,
    rgba: `rgba(${pixel.join(',')})`,
    hex: `#${color.toHex()}`
  }
}

为保证当前坐标在不同屏幕下都可以正常捕捉,需要乘以屏幕像素比的比例,window.devicePixelRatio

修改后:

javascript 复制代码
// 获取canvas背景图中指定像素色值
function getColorAtPosition(canvas, x, y) {
  var canvasElement = canvas.getElement()
  var context = canvasElement.getContext('2d')
  // 注:retina屏幕下需要乘以当前设备的devicePixelRatio值 
  let newX = x * canvas.backgroundImage.scaleX * window.devicePixelRatio
  let newY = y * canvas.backgroundImage.scaleY * window.devicePixelRatio
  var pixel = context.getImageData(newX, newY, 1, 1).data
  const color = new fabric.Color(`rgba(${pixel.join(',')})`)
  return {
    array: pixel,
    rgba: `rgba(${pixel.join(',')})`,
    hex: `#${color.toHex()}`
  }
}

可以根据不同屏幕像素比,计算在canvas图像中相应的准确坐标。

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript