使用 JavaScript 计算逼真的框阴影
Calculating realistic box-shadow with JavaScript
我正在构建一个图书库网络应用程序,可以在书架之间拖动书籍。
将box-shadow
应用于书籍使它们看起来更逼真一些,但我想知道我是否可以更进一步,根据每本书相对于单个选定"光源"点的位置动态计算每本书box-shadow
值,就像游戏引擎一样。
因此,如果我们选择顶部中心点作为光源,则左侧的书将具有左下阴影,右侧的书籍将具有右下阴影。底部的书会得到更大高度的阴影,等等。我们可能需要指定光源的深度(z 坐标(及其位置。
虽然box-shadow
不允许复杂的逼真阴影,但我怀疑调整阴影大小和角度相对于矩形对象(如书籍(的位置足以使它们更加逼真。
有没有人已经考虑过在JavaScript中实现它?您是否知道任何开源库可以计算与特定光源点相关的box-shadow
值?如果不是,这个想法是我还没有想到的某种内在错误,还是还没有人尝试过这个?
一个叫杰夫·帕默(Jeff Pamer(的家伙对此做了一个实验
需要 jQuery 和 jQuery UI 可拖动(参见演示(
您的网页:
<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);
});
}
我在评论中写了我的尝试,但也许我会得到赞成票,所以我也会把它写在答案中。 :D .
var source = [0, 0], faktor = [10, 20];
光源是光线应该在的位置,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/
相关文章:
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 指令加载真的很长,检查加载时间的方法
- JS,“;对象”;,这个和那个.来自蟒蛇这真的让我很困惑.(双关语)
- 阴影盒未定义
- 为什么这是真的:parseInt(1111111111111,2)===parseInt(111111111111,2)
- (false==false==true)怎么可能是真的
- 使用js/jQuery检查对象(而不是元素)是否真的存在
- three.js:如何让透明的png精灵投射和接收阴影
- 如何在d3.js饼图或圆环图中添加阴影
- 为什么typeof的数组的数组的未定义值返回为“0”;未定义的“;我的条件不认为是真的
- 在d3.js圆中添加阴影效果
- coffescript/javascript函数数组的行为真的很奇怪
- 覆盖twitter引导程序Textbox发光和阴影
- ThreeJS怪异条纹阴影
- Passport.js`isAuthenticated()`不一致的行为;当它应该是真的时候是假的
- 真的没有办法在Firefox中自动杀死没有响应的脚本吗
- Three.js.obj阴影不起作用
- highcharts:更改工具提示和阴影(悬停)的标准位置
- html() 真的取代了 html 代码吗?
- 动画文本阴影以淡入淡出