如何根据鼠标位置更改背景颜色（特定颜色）

Question

这是代码：

var $win = $(window),
    w = 0,h = 0,
    rgb = [],
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };

$win.resize(getWidth).mousemove(function(e) {

    rgb = [
        Math.round(e.pageX/w * 255),
        Math.round(e.pageY/h * 255),
        150
    ];

    $(document.body).css('background','rgb('+rgb.join(',')+')');
    //top center: rgb(85, 209, 79)
    //right middle: rgb(104, 129, 197)
    //bottom center: rgb(40,129,255)
    //left middle: rgb(255, 184, 0)
    //very center: rgb(15, 175, 168)
}).resize();

我想根据鼠标位置更改背景颜色，但是我不知道如何指定5个点（顶部，右侧，底部，左侧，中心）的颜色。

###################
#        O        #
#                 #
#                 #
# O      O      O #
#                 #
#                 #
#        O        #
###################

所以这五个点是我有颜色的地方，当我在这些点之间移动鼠标时，我想将其从一个更改为另一个。 http://jsfiddle.net/710r4gaj/

Answer 1

您必须使用插值方法。 双线性插值非常流行。

我要做的是在感兴趣的点（顶部，左侧，右侧，底部和中心）指定颜色。 然后，通过定义最接近的颜色的平均值来定义角落中的颜色（这并不是很好，最好也指定它们）。

完成后，给定屏幕上的一个点，我将计算该点在哪个子正方形中，并计算该正方形的顶点之间的双线性插值（如图所示）

这是一个小提琴：

 var $win = $(window), w = 0, h = 0, rgb = [], getWidth = function() { w = $win.width(); h = $win.height(); }; var average = function(a, b) { return [0.5 * (a[0] + b[0]), 0.5 * (a[1] + b[1]), 0.5 * (a[1] + b[1])]; } var center = [255, 255, 255]; // white var topMiddle = [0, 0, 0]; // black var leftMiddle = [255, 0, 0]; // red var rightMiddle = [0, 255, 0]; // green; var bottomMiddle = [0, 0, 255]; // blue; var topLeft = average(leftMiddle, topMiddle); var topRight = average(topMiddle, rightMiddle); var bottomLeft = average(leftMiddle, bottomMiddle); var bottomRight = average(bottomMiddle, rightMiddle); var interpolate2D = function(x00, x01, x10, x11, x, y) { return x00 * (1 - x) * (1 - y) + x10 * x * (1 - y) + x01 * (1 - x) * y + x11 * x * y; } var interpolateArray = function(x00, x01, x10, x11, x, y) { var result = [0, 0, 0]; for (var i = 0; i < 3; ++i) { result[i] = Math.floor(interpolate2D(x00[i], x01[i], x10[i], x11[i], x, y)); } return result; } $win.resize(getWidth).mousemove(function(e) { var positionX = e.pageX / w; var positionY = e.pageY / h; var x00, x01, x11, x10; if (positionX > 0.5 && positionY > 0.5) { x00 = center; x01 = bottomMiddle; x10 = rightMiddle; x11 = bottomRight; positionX = 2.0 * (positionX - 0.5); // scale position back to [0, 1] positionY = 2.0 * (positionY - 0.5); } else if (positionX > 0.5 && positionY <= 0.5) { x00 = topMiddle; x01 = center; x10 = topRight; x11 = rightMiddle; positionX = 2.0 * (positionX - 0.5); positionY = 2.0 * (positionY); } else if (positionX <= 0.5 && positionY <= 0.5) { x00 = topLeft; x01 = leftMiddle; x10 = topMiddle; x11 = center; positionX = 2.0 * (positionX); positionY = 2.0 * (positionY); } else if (positionX <= 0.5 && positionY > 0.5) { x00 = leftMiddle; x01 = bottomLeft; x10 = center; x11 = bottomMiddle; positionX = 2.0 * (positionX); positionY = 2.0 * (positionY - 0.5); } else { // can't happen } rgb = interpolateArray(x00, x01, x10, x11, positionX, positionY); $(document.body).css('background', 'rgb(' + rgb.join(',') + ')'); //top: rgb(85, 209, 79) //right: rgb(104, 129, 197) //bottom: rgb(40,129,255) //left: rgb(255, 184, 0) }).resize(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>