3

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

应用于box-shadow书籍使它们看起来更加逼真，但我想知道我是否可以更进一步，box-shadow通过相对于单个选定“光源”点的位置动态计算每本书的值，就像游戏引擎一样。 

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

虽然box-shadow不允许复杂的逼真阴影，但我怀疑调整阴影大小和角度对于矩形对象（例如书籍）的位置来说已经绰绰有余，可以使它们更加逼真。 

有没有人已经研究过在 JavaScript 中实现这个？box-shadow您是否知道任何计算特定光源点值的开源库？如果不是，这个想法在某种程度上是我没有想到的本质上是错误的，还是没有人尝试过这个？

4

2 回答 2

4

一个名叫杰夫帕默的家伙对此做了一个实验

需要 jQuery 和 jQuery UI Draggable（参见演示）

你的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);
  });
}
于 2012-05-11T10:11:19.047 回答
1

我在评论中写了我的尝试，但也许我会得到支持，所以我也会在答案中写出来。:D。

var source = [0, 0], faktor = [10, 20];

source 是光应该在的位置，faktor 是阴影的 faktor（[0] 表示阴影位置，[1] 表示模糊）。

function addShadows() {
    var i, j, position, sizeE, distance; for(i=0,j=arguments.length;i<j;++i) {
        position = offset(arguments[i]); // Get position from element

        sizeE = size(arguments[i]); // Get width and height from element

        distance = parseInt(Math.sqrt(Math.pow(position[0] + sizeE[0] / 2 - source[0], 2) + Math.pow(position[1] + sizeE[1] / 2 - source[1], 2))) / faktor[1]; // calculate a distance for bluring (middle of element to source)

        arguments[i].style.cssText += 'box-shadow: ' + ((position[0] + sizeE[0] - source[0]) / faktor[0]) + 'px ' + ((position[1] + sizeE[1] - source[1]) / faktor[0]) + 'px ' + distance + 'px #555555'; // add the shadow
    }
}

该函数addShadows将为所有参数添加阴影。

function getStyle(element, attribut) {
    var style;

    if(window.getComputedStyle) {
        style = window.getComputedStyle(element, null);
    } else {
        style = element.currentStyle;
    }

    return style[attribut];
}
function offset(element) {
    var pos = [parseInt(getStyle(element, 'border-top')), parseInt(getStyle(element, 'border-top'))];

    while(element !== null) {
        pos[0] += element.offsetLeft;
        pos[1] += element.offsetTop;

        element = element.offsetParent;
    }

    return pos;
}
function size(element) {
    return [element.offsetWidth, element.offsetHeight];
}
function id(idE) {
    return document.getElementById(idE);
}

上面的四个函数只是辅助函数。

JSfiddle：http: //jsfiddle.net/R5UbL/1/

于 2012-05-11T10:42:27.120 回答