使用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 D14来获得元素的DOM像素大小
3. 将元素当前的objectFit、objectPosition、其DOM像素大小和自然像素大小传递给我的函数，以找出适合的矩形位于元素
4. 中的哪个位置，然后您就有足够的信息将事件点转换为像素位置

这里有更多的代码，但获取适合cover或contain的矩形的大小如下所示：

  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