Question

我正在使用jCrop定义视频元素的裁剪区域。我希望由裁剪区域定义的视频部分填充一个与裁剪区域具有相同比例的容器，但是我在数学上遇到了麻烦。

视频和裁剪区域的尺寸各不相同，并且元素的大小也做出了相应调整，因此我需要根据坐标计算位置。

我正在使用CSS transform:scale()来放大视频，并通过使用CSS transform:translate()来定位视频以显示裁剪区域。

以下是我想要的图表：

下面，我模拟了视频（绿色）和裁剪区域（红色）。当视频的比例和裁切区域相同时，它将起作用。点击“缩放”按钮，放大到裁剪区域。

let $container = $('#container');
let $videoWrap = $('#videoWrap');
let $videoSrc = $('#videoSrc');
let $videoCrop = $('#videoCrop');

let videoWidth = 1280;
let videoHeight = 720;

let cropArea = {
  'x': 500,
  'y': 80,
  'w': 640,
  'h': 360
};

$container.css({
  'padding-bottom': (cropArea.h / cropArea.w) * 100 + '%'
});

$videoSrc.css({
  'padding-bottom': videoHeight / videoWidth * 100 + '%'
});

$videoCrop.css({
  'width': (cropArea.w / videoWidth) * 100 + '%',
  'height': (cropArea.h / videoHeight) * 100 + '%',
  'left': (cropArea.x / videoWidth) * 100 + '%',
  'top': (cropArea.y / videoHeight) * 100 + '%'
});


let scale = videoWidth / cropArea.w;
let tx = 0 - (cropArea.x / videoWidth * 100);
let ty = 0 - (cropArea.y / videoHeight * 100);

let css = {
  'transform-origin': '0 0',
  'transform': 'scale(' + scale + ') translate(' + tx + '%,' + ty + '%)'
};

$('#zoom').on('click', function() {
  $videoWrap.css(css);
});

body {
  margin: 5px;
  width: 200px;
}

#container {
  position: relative;
  overflow: hidden;
  outline: 5px solid blue;
}

#videoWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  transition: all 1s;
}

#videoSrc {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}

#videoCrop {
  position: absolute;
  background-color: red;
  border: 1px solid yellow;
  box-sizing: border-box;
}

#zoom {
  margin: 2em 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="videoWrap">
    <div id="videoSrc">
      <div id="videoCrop"></div>
    </div>
  </div>
</div>

<button id="zoom">Zoom</button>

但是当裁剪区域的尺寸与视频的尺寸不同时，将填充视频（如信箱），这会抵消缩放。

let $container = $('#container');
let $videoWrap = $('#videoWrap');
let $videoSrc = $('#videoSrc');
let $videoCrop = $('#videoCrop');

let videoWidth = 1280;
let videoHeight = 720;

let cropArea = {
  'x': 500,
  'y': 80,
  'w': 440,
  'h': 500
};

$container.css({
  'padding-bottom': (cropArea.h / cropArea.w) * 100 + '%'
});

$videoSrc.css({
  'padding-bottom': videoHeight / videoWidth * 100 + '%'
});

$videoCrop.css({
  'width': (cropArea.w / videoWidth) * 100 + '%',
  'height': (cropArea.h / videoHeight) * 100 + '%',
  'left': (cropArea.x / videoWidth) * 100 + '%',
  'top': (cropArea.y / videoHeight) * 100 + '%'
});


let scale = videoWidth / cropArea.w;
let tx = 0 - (cropArea.x / videoWidth * 100);
let ty = 0 - (cropArea.y / videoHeight * 100);

let css = {
  'transform-origin': '0 0',
  'transform': 'scale(' + scale + ') translate(' + tx + '%,' + ty + '%)'
};

$('#zoom').on('click', function() {
  $videoWrap.css(css);
});

body {
  margin: 5px;
  width: 100px;
}

#container {
  position: relative;
  overflow: hidden;
  outline: 5px solid blue;
}

#videoWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  transition: all 1s;
}

#videoSrc {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}

#videoCrop {
  position: absolute;
  background-color: red;
  border: 1px solid yellow;
  box-sizing: border-box;
}

#zoom {
  margin: 2em 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="videoWrap">
    <div id="videoSrc">
      <div id="videoCrop"></div>
    </div>
  </div>
</div>

<button id="zoom">Zoom</button>

我试图计算视频的填充量，然后将其添加到转换CSS中以向上移动视频，但是我不能正确地计算它。

let $container = $('#container');
let $videoWrap = $('#videoWrap');
let $videoSrc = $('#videoSrc');
let $videoCrop = $('#videoCrop');

let videoWidth = 1280;
let videoHeight = 720;

let cropArea = {
  'x': 500,
  'y': 80,
  'w': 440,
  'h': 500
};

$container.css({
  'padding-bottom': (cropArea.h / cropArea.w) * 100 + '%'
});

$videoSrc.css({
  'padding-bottom': videoHeight / videoWidth * 100 + '%'
});

$videoCrop.css({
  'width': (cropArea.w / videoWidth) * 100 + '%',
  'height': (cropArea.h / videoHeight) * 100 + '%',
  'left': (cropArea.x / videoWidth) * 100 + '%',
  'top': (cropArea.y / videoHeight) * 100 + '%'
});


let scale = videoWidth / cropArea.w;
let tx = 0 - (cropArea.x / videoWidth * 100);
let ty = 0 - (cropArea.y / videoHeight * 100);

let offsetY = ((cropArea.h / cropArea.w) - (videoHeight / videoWidth)) / 2 * 100;

ty -= offsetY;

let css = {
  'transform-origin': '0 0',
  'transform': 'scale(' + scale + ') translate(' + tx + '%,' + ty + '%)'
};

$('#zoom').on('click', function() {
  $videoWrap.css(css);
});

body {
  margin: 5px;
  width: 100px;
}

#container {
  position: relative;
  overflow: hidden;
  outline: 5px solid blue;
}

#videoWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  transition: all 1s;
}

#videoSrc {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}

#videoCrop {
  position: absolute;
  background-color: red;
  border: 1px solid yellow;
  box-sizing: border-box;
}

#zoom {
  margin: 2em 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="videoWrap">
    <div id="videoSrc">
      <div id="videoCrop"></div>
    </div>
  </div>
</div>

<button id="zoom">Zoom</button>

怎么了？
我认为我忽略了计算或百分比工作方式。
如果有其他处理方式，我绝对愿意提出建议。

Answer 1

这是一个简单的对齐问题，将您的top:50%更改为top:59%

#videoSrc {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 59%;
  transform: translate(-50%, -50%);
  background-color: green;
}

视频作为背景与作物框

1 个答案: