javascript - 使用 JavaScript 计算逼真的盒子阴影

Question

我正在构建一个图书图书馆 Web 应用程序，其中的图书可在书架之间拖动。

将 box-shadow 应用于书籍使它们看起来稍微更逼真，但我想知道我是否可以更进一步并根据其位置动态计算每本书的 box-shadow 值相对于单个选择的“光源”点，就像游戏引擎所做的那样。

因此，如果我们选择顶部中心点作为光源，左边的书会有左下阴影，右边的书会有右下阴影。底部的书会得到更大高度的阴影，等等。我们可能需要指定光源的深度(z 坐标)及其位置。

虽然 box-shadow 不允许复杂的逼真阴影，但我怀疑调整阴影大小和 Angular 就足够了，因为矩形对象(例如书籍)可以制作他们更现实。

有没有人研究过用 JavaScript 实现它？您是否知道任何计算关于特定光源点的 box-shadow 值的开源库？如果不是，这个想法是否在某种我没有想到的方面存在固有错误，或者是否还没有人尝试过这个？

Answer 1

一个叫 Jeff Pamer 的人做了一个实验

需要 jQuery 和 jQuery UI 可拖动 (see demo)

您的 html:

<div id="light_source">Light Source<br />(drag me)</div>
<div id="div1" class="needs_shadow">(drag me)</div>
<div id="div2" class="needs_shadow">(drag me)</div>

您的 JavaScript

$(document).ready(function() {
  $("div").draggable({
    drag: function() { make_shade() }
  });
  make_shade();  
});

function make_shade() {
  var light = $("div#light_source");
  var light_pos = light.position();
  var light_x = light_pos.left + (light.width() / 2);
  var light_y = light_pos.top + (light.height() / 2);

  $(".needs_shadow").each(function() {
    var div1 = $(this);
    var div1_pos = div1.position();

    var div_x = div1_pos.left + (div1.width() / 2);
    var div_y = div1_pos.top + (div1.height() / 2);

    var left_diff = light_x - div_x;
    var top_diff = light_y - div_y;

    var left = (left_diff / 10) * -1;
    var top = (top_diff / 10) * -1;

    var distance = Math.sqrt(Math.pow(left_diff, 2) + Math.pow(top_diff, 2));
    distance = distance / 10;

    shadow_style = left + "px " + top + "px " + distance + "px #3f3f3f";
    div1.css("-moz-box-shadow", shadow_style);
    div1.css("-webkit-box-shadow", shadow_style);
    div1.css("box-shadow", shadow_style);
  });
}