3

棚の間で本をドラッグできる本図書館のウェブアプリを構築しています。 

本に適用すると、少しリアルに見えますが、さらに進んで、ゲーム エンジンのように、選択した 1 つの「光源」ポイントに対する位置によってすべての本の値を box-shadow動的に計算できるかどうか疑問に思いました。box-shadow

したがって、光源として上の中心点を選択すると、左側の本には左下の影があり、右側の本には右下の影があります。下部の本は、より大きな高さの影などを取得します。光源の深さ (z 座標) とその位置を指定する必要がある場合があります。

複雑でリアルな影はできませbox-shadowんが、本などの長方形のオブジェクトの位置に関して影のサイズと角度を調整して、よりリアルにすることで十分だと思います。 

これを JavaScript で実装することを検討した人はいますか? box-shadow特定の光源点に関する値を計算するオープン ソース ライブラリを知っていますか? そうでない場合、私が考えたことのない方法でそのアイデアは本質的に間違っているのでしょうか、それとも誰もまだこれを試していないのでしょうか?

4

2 に答える 2

4

ジェフ・パマーと呼ばれる男がこれについて実験をしました

jQueryとjQueryUIDraggableが必要です（デモを参照）

あなたの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];

ソースは光があるべき場所であり、因子は影の因子です ([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);
}

上記の 4 つの関数は単なるヘルパー関数です。

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

于 2012-05-11T10:42:27.120 に答える