Question

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

前两个数字没有问题，它们是水平轴和垂直轴。但是第3个数字存在问题，必须相对于文档的对角线。而且我发现这是因为我根据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});

    });

}

example

Answer 1

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

这就是说z值是鼠标和左上角之间的直线长度。我不确定你的意思是＆＃34;与文件的对角线的距离＆＃34;，但是如果你真的想要距离这条线最近的距离：

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

然后你可以使用最接近平面线的公式（google for formula for distance of point from 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?

RGB根据鼠标位置

2 个答案: