css - 网页裁剪界面

Question

我正在尝试模仿 avidemux的 Web 裁剪界面。

在 https://jsfiddle.net/kaihendry/msL6fjer/我正在使用容器和溢出隐藏技巧来缩小黑边。但在这个例子中，如果你不小心降低了，你实际上无法看出你正在吃掉蓝色内容!

  <div :style="'height:' + height + 'px'" class="container">
    <img :style="'margin-top: ' + margin + 'px'" width=200 height=200 src=http://s.natalian.org/2016-11-04/200test.png alt="200x200 image with an unwanted margin of 50 either side">
  </div>

我重新编写了该示例以使用 Clip-path，令人沮丧的是，它似乎只在 Chrome 56 中工作，但在其他地方都不起作用! https://jsfiddle.net/kaihendry/nmkh9d39/这也存在不知道何时超出的问题。理想情况下，可调节的红色层会增长，当它覆盖蓝色时，蓝色+红色会变成洋红色或类似的东西。

有什么技巧可以帮助我在 CSS 或 SVG 中实现我想要的效果吗？请随意选择不同的颜色!

Answer 1

使用 SVG 相当容易实现您想要的快门效果。

这是一种方法。我们使用两个半透明矩形创建“快门”。请注意，由于我不熟悉 Vue，因此我使用 jQuery 构建了示例。

$slider = $("#slider");

$slider.on("input", update);

function update(evt) {

  var margin = parseInt($slider.val(), 10);
  var top = -margin;
  var bottom = 200 + margin;
  var height = bottom - top;

  $("#margin").text(margin);
  $("#height").text(height);
  $("#toprect").attr("y", top - 100);
  $("#bottomrect").attr("y", bottom);
}

update();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="200" height="200">
  <image width="200" height="200" xlink:href="http://s.natalian.org/2016-11-04/200test.png"/>

  <rect id="toprect" y="-100" width="200" height="100" fill="red" fill-opacity="0.5"/>
  <rect id="bottomrect" y="200" width="200" height="100" fill="red" fill-opacity="0.5"/>
</svg>

<div>
  <label>Margin: <span id="margin"></span></label><br>
  <input id="slider" type="range" max="0" min="-100" value="0"><br>
  <label>Height: <span id="height"></span></label>
</div>

但是，在您的模型中，您的快门与背景图像混合以创建合并的颜色。我们可以使用 SVG 滤镜来实现这种效果。

在这里，而不是使用 <rect>元素，我们使用两个 <feFlood> 创建快门元素过滤原语。它们允许我们创建颜色矩形，然后将其与 <image> 混合。我们正在应用过滤器的元素。

首先，为了比较，这里是使用过滤器实现的第一个示例的完全相同的示例。

$slider = $("#slider");

$slider.on("input", update);

function update(evt) {

  var margin = parseInt($slider.val(), 10);
  var top = -margin;
  var bottom = 200 + margin;
  var height = bottom - top;

  $("#margin").text(margin);
  $("#height").text(height);
  $("#toprect").attr("y", top - 100);
  $("#bottomrect").attr("y", bottom);
}

update();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="200" height="200">
  <defs>
    <filter id="shutter" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
      <feFlood id="toprect" x="0" y="0" width="200" height="100" flood-color="red" flood-opacity="0.5"
               result="part1"/>
      <feFlood id="bottomrect" x="0" y="100" width="200" height="100" flood-color="red" flood-opacity="0.5"
               result="part2"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="part1"/>
        <feMergeNode in="part2"/>
      </feMerge>
    </filter>
  </defs>

  <image width="200" height="200" xlink:href="http://s.natalian.org/2016-11-04/200test.png"
         filter="url(#shutter)"/>
</svg>

<div>
  <label>Margin: <span id="margin"></span></label><br>
  <input id="slider" type="range" max="0" min="-100" value="0"><br>
  <label>Height: <span id="height"></span></label>
</div>

现在为了实现混合效果，我们需要改变快门元素与图像的结合方式。我们通过 <feBlend mode="screen"> 来做到这一点过滤原语。

$slider = $("#slider");

$slider.on("input", update);

function update(evt) {

  var margin = parseInt($slider.val(), 10);
  var top = -margin;
  var bottom = 200 + margin;
  var height = bottom - top;

  $("#margin").text(margin);
  $("#height").text(height);
  $("#toprect").attr("y", top - 100);
  $("#bottomrect").attr("y", bottom);
}

update();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="200" height="200">
  <defs>
    <filter id="shutter" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
      <feFlood id="toprect" x="0" y="0" width="200" height="100" flood-color="red" flood-opacity="0.5"
               result="part1"/>
      <feFlood id="bottomrect" x="0" y="100" width="200" height="100" flood-color="red" flood-opacity="0.5"
               result="part2"/>
      <feBlend mode="screen" in="SourceGraphic" in2="part1"/>
      <feBlend mode="screen" in2="part2"/>
    </filter>
  </defs>

  <image width="200" height="200" xlink:href="http://s.natalian.org/2016-11-04/200test.png"
         filter="url(#shutter)"/>
</svg>

<div>
  <label>Margin: <span id="margin"></span></label><br>
  <input id="slider" type="range" max="0" min="-100" value="0"><br>
  <label>Height: <span id="height"></span></label>
</div>

更新:<video> 的解决方案

您没有提到您想通过直播视频实现这一目标。为此，您需要一个稍微不同的解决方案，因为 <video>当前 SVG 1.1 标准不支持元素。不过，它可能会出现在即将推出的 SVG 2 标准中。

幸运的是，它不需要做很大的改变来支持视频。您只需要拥有 <video> HTML 中的元素。您仍然可以对其应用 SVG 过滤器。

这适用于某些浏览器。例如 Chrome 和 Firefox，但不适用于 IE11 等其他浏览器。

$slider = $("#slider");

$slider.on("input", update);

function update(evt) {

  var margin = parseInt($slider.val(), 10);
  var top = -margin;
  var bottom = 200 + margin;
  var height = bottom - top;

  $("#margin").text(margin);
  $("#height").text(height);
  $("#toprect").attr("y", top - 100);
  $("#bottomrect").attr("y", bottom);
}

update();

video {
  filter: url(#shutter);
}

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="0" height="0">
  <defs>
    <filter id="shutter" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
      <feFlood id="toprect" x="0" y="0" width="200" height="100" flood-color="red" flood-opacity="0.5"
               result="part1"/>
      <feFlood id="bottomrect" x="0" y="100" width="200" height="100" flood-color="red" flood-opacity="0.5"
               result="part2"/>
      <feBlend mode="screen" in="SourceGraphic" in2="part1"/>
      <feBlend mode="screen" in2="part2"/>
    </filter>
  </defs>

</svg>

<div class="container">
  <video width="200" height="200" src="http://www.w3schools.com/html/mov_bbb.mp4"
         autoplay loop></video>
</div>

<div>
  <label>Margin: <span id="margin"></span></label><br>
  <input id="slider" type="range" max="0" min="-100" value="0"><br>
  <label>Height: <span id="height"></span></label>
</div>