0

我正在尝试根据鼠标位置更改背景 RGB。在这里您可以看到示例http://rockit.folio.su/gexans/

前两个数字没有问题，它们是水平轴和垂直轴。但是第三个数字有一个问题，它必须相对于文档的对角线。我发现这是因为我根据 X 和 Y 鼠标位置接收数字，但我需要根据鼠标与文档对角线的接近程度而不是鼠标制作的矩形。

这是代码

function mousePage(e){
    var x = 0, y = 0, z =0;
    if (!e) e = window.event;
    x = e.pageX;
    y = e.pageY;
    z = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
    return {"x":x, "y":y, "z":z};
}

$(window).load(function(){
    $(document).mousemove(function(e) {
        var widthStep = $(document).width() / 256;
        var heightStep = $(document).height() / 256;
        var diagonalStep = Math.sqrt(Math.pow($(document).width(),2) + Math.pow($(document).height(),2)) / 256;
        var mCur = mousePage(e);    
        var colorX = Math.floor( Number(mCur.x) / Number(widthStep) );
        var colorY = Math.floor( Number(mCur.y) / Number(heightStep) );
        var colorZ = Math.floor( Number(mCur.z) / Number(diagonalStep));
        var hue = 'rgb(' + colorX + ',' + colorY + ',' + colorZ + ')';
        $("body").css({backgroundColor: hue});
    });
});

好的，所以现在我有一个从光标到线的距离的公式，如下所示

var numerator = Math.abs( ( A * m ) + ( B * n ) + C );
var denominator = Math.sqrt( Math.pow( A, 2 ) + Math.pow( B, 2 ) );
var d = numerator / denominator;

我想现在我需要计算到右上角的距离，将其除以 256 = dStep，然后distance to top right - var d除以dStep= ，mColorZ然后colorZ - mColorZ= 我需要的第三种颜色的值？

更重要的是，我不知道A, B, and C.

z=x*y/oldz；//鼠标到对角线的距离，这是你想要的吗？

我不确定这是否是我想要的。这个公式有什么作用？）

更新 现在我有这个，但它在对角线上给了我零。

var width = $(document).width();
var height = $(document).height();
var widthStep = $(document).width()/256;
var heightStep = $(document).height()/256;
var diagonalStep = Math.sqrt(Math.pow(width,2)+Math.pow(height,2))/256;
var mCur = mousePage(e);

var numerator = Math.abs((height*Number(mCur.x))+(width*Number(mCur.y))+0);
var denominator = Math.sqrt(Math.pow(height,2)+Math.pow(width,2));
var d = numerator/denominator;

var vp_numerator = Math.abs((height*width)+(width*height)+0);
var vp_denominator = Math.sqrt(Math.pow(height,2)+Math.pow(width,2));
var vp_d = vp_numerator/vp_denominator;

var vp_dStep = vp_d/256;
var m_colorZ = Math.floor(Number(d)/Number(vp_dStep));

var colorX = Math.floor(Number(mCur.x)/Number(widthStep));
var colorY = Math.floor(Number(mCur.y)/Number(heightStep));
var colorZ = Math.floor(Number(mCur.z)/Number(diagonalStep)) - m_colorZ;
var hue = 'rgb(' + colorX + ',' + colorY + ',' + colorZ + ')';
$("body").css({backgroundColor: hue});

更新 好的，我现在有了光标到对角线的距离，这很好。但是现在我需要将光标的位置放在对角线上，如果它是屏幕的右上角，它是从光标穿过对角线相对于 X 的垂直线，左下角 - 相对于 Y 的水平线。然后position on the line - distance from the line= 颜色。

更新 #2 我决定完成它，但我得到的不是很酷的版本，而是一个简单的版本。第三个值总是取决于斜边。很简单。这是代码。

function rgbchange(target, source){
    var widthStep = source.width() / 256,
        heightStep = source.height() / 256,
        diagonal = Math.sqrt( Math.pow( source.width(), 2 ) + Math.pow( source.height(), 2 ) ),
        diagonalStep = diagonal / 256,
        colorX,
        colorY,
        colorZ,
        newDiagonal,
        hue;

    source.on('mousemove', function( event ){

        colorX = Math.floor( event.pageX / widthStep ),
        colorY = Math.floor( event.pageY / heightStep );
        newDiagonal = Math.sqrt( Math.pow( event.pageY, 2 )+ Math.pow( event.pageX, 2 ) );
        colorZ =  255 - Math.floor( ( diagonal - newDiagonal ) / diagonalStep );

        hue = 'rgb(' + colorX + ',' + colorY + ',' + colorZ + ')';

        target.css({'background-color': hue});

    });

}

例子_

4

2 回答 2

0 
z = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));

这就是说该值z是鼠标和左上角之间的线的长度。我不确定“与文档对角线的距离”是什么意思，但如果你真的想要最接近线的距离，如下所示：

 ____
|\  .|  <-- hypothetical point (.)
| \/ |  <-- perpendicular line
|  \ |
|   \|

然后，您可以使用最接近飞机的线的公式（google for formula for distance of point from line）。

于 2011-07-14T04:50:42.077 回答
0 
var oldz=Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
z=x*y/oldz; //the distance close from mouse to the diagonal, is this u want?
于 2011-07-14T05:06:30.277 回答