使用object-fit计算视频中的鼠标位置：包含

Question

我正在尝试将鼠标事件转换为视频中的像素坐标。按像素坐标，我指的是相对于原始视频分辨率的坐标。

我的视频元素有object-fit: contain，这意味着视频的左上角不一定位于(0,0)位置，如下图所示：

如果我点击此视频中白色部分的左上角，我想获得(0,0)，但为了做到这一点，我需要发现视频内容的偏移量（白色区域）相对于视频元素（黑色边框）。

如何恢复此偏移？

我已经知道width，height，videoWidth和videoHeight，但这些只让我考虑缩放，而不是偏移。

Answer 1

可以推断出偏移量。我认为这种代码可以解决问题：

if(videoHeight/height > videoWidth/width){
    scale   = videoHeight/height;
    offsetX = (videoWidth - width*scale)/2;
    offsetY = 0;
}
else{
    scale   = videoWidth/width;
    offsetY = (videoHeight - height*scale)/2;
    offsetX = 0;
}

Answer 2

我还对使用object-fit时从鼠标或触摸事件获取实际像素位置感兴趣，这是我在搜索时发现的唯一结果。尽管我怀疑为您提供帮助可能为时已晚，但我认为我会回答，以防将来有人像我一样遇到这种情况。

因为我正在与其他人一起编写代码，所以我需要一个健壮的解决方案，即使有人在CSS中更改或删除了object-fit或object-property，该解决方案也能正常工作

我采用的方法是：

1. 我自己实施cover，contain等算法，只是执行数学运算，而不依赖DOM
2. 使用getComputedStyle获取元素的objectFit和objectPosition属性
3. 使用.getBoundingClientRect()获取元素的DOM像素大小
4. 将元素的当前objectFit，objectPosition，其DOM像素大小和自然像素大小传递给我的函数，以找出拟合后的矩形位于元素中的位置
5. 您随后将获得足够的信息来将事件点转换为像素位置

这里没有比适合的代码还要多的代码，但是获得用于覆盖或包含的矩形的大小类似于：

  if ( fitMode === 'cover' || fitMode === 'contain' ) {
    const wr = parent.width / child.width
    const hr = parent.height / child.height
    const ratio = fitMode === 'cover' ? Math.max( wr, hr ) : Math.min( wr, hr )

    const width = child.width * ratio
    const height = child.height * ratio
    const size = { width, height }

    return size
  }

  // handle other object-fit modes here

希望这给其他人一个大概的解决方法，我自己在下面的链接中发布了代码，它支持所有object-fit模式，并且包括一些示例，这些示例演示如何获取实际的像素点被点击的

https://github.com/nrkn/object-fit-math