Question

我试图模仿网络上avidemux的裁剪界面。

在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/这也有一个问题，就是不知道你什么时候超过了。理想情况下，可调节的红色层增长＆amp;当它越过蓝色时，蓝色+红色会产生洋红色或类似的东西。

如何在CSS或SVG中实现我想要的任何提示？请随意选择不同的颜色！

Answer 1

使用SVG可以轻松实现您所使用的快门效果。

这是一种方式。我们创造了＆＃34;快门＆＃34;通过使用两个半透明矩形。请注意，我已经使用jQuery构建了我的示例，因为我不熟悉Vue。

＆＃13;

$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();

＆＃13;

<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>

＆＃13;

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

此处，我们使用两个<rect>滤镜基元创建快门元素，而不是使用<feFlood>元素。它们允许我们创建颜色的矩形，然后我们可以使用我们应用滤镜的<image>元素进行渲染。

首先，仅用于比较，这里是使用过滤器实现的第一个样本的完全等效。

＆＃13;

$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();

＆＃13;

<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>

＆＃13;

现在要实现混合效果，我们需要改变将快门元素与图像组合的方式。我们使用<feBlend mode="screen">过滤器原语。

＆＃13;

$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();

＆＃13;

<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>

＆＃13;

更新：<video>

的解决方案

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

幸运的是，它不需要进行大的改动来支持视频。您只需要在HTML中使用<video>元素。您仍然可以对其应用SVG过滤器。

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

＆＃13;

$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();

＆＃13;

video {
  filter: url(#shutter);
}

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

＆＃13;

<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>

＆＃13;

Web裁剪界面

1 个答案: