根据鼠标位置显示 RGB

Question

我正在尝试根据鼠标位置更改背景 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 ，然后到右上角的距离 - var d 并将其除以dStep = mColorZ，然后是colorZ - mColorZ = 我第三次所需的价值 颜色？

更重要的是，我不知道 A、B 和 C 的值是什么。

z=x*y/旧z; //鼠标到对角线附近的距离，这是你想要的吗？

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

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

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 的水平线。 之后，线上的位置 - 距线的距离 = 颜色。

更新#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});

    });

}

示例

Answer 1

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

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

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

那么您可以使用距平面最近的线的公式（谷歌对于点到线的距离公式）。

Answer 2

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?