Question

我目前有一个简单的颜色选择器，可以加载我创建的颜色渐变图像（PNG），当用户悬停或点击它时，会获得光标下的颜色值。

在图像中，我在渐变左侧内置了一个14x14像素区域，表示透明度，当用户在此区域中徘徊或点击时，我希望清除它们的颜色选择（如点击透明）。问题是我无法弄清楚这一部分，所以我正在寻找任何人的帮助。

希望这是有道理的。

这是我的代码：

var img = new Image();
img.src = '/assets/images/results/colourpicker.png';

// Copy image (img) to canvas
img.onload = function() {
    var c = document.getElementById('colourPickerBar');
    var ctx = c.getContext('2d');
    c.width  = img.width;
    c.height = img.height;
    ctx.drawImage(img,0,0);
}

var rgb;

// get color on hover
$('#colourPickerBar').bind('mousemove', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    $('#colourPickerSample').css('background', 'none').css('background-color', hex); //sets the color block value
});

// get color on click
$('#colourPickerBar').bind('click', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    $('#colourPickerSample').css('background-color', hex); //sets the color block value
    $('#colourSelectorInput').val(hex); //sets the color value in the search input
});

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

编辑：感谢下面的一些帮助。现在使用IF ... ELSE语句来决定在该区域采取什么行动：

// get color on hover
$('#colourPickerBar').bind('mousemove', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    if ((0 <= x) && (14 >= x) && (0 <= y) && (14 >= y)) {
         $('#colourPickerSample').css('background-color', 'none').addClass("defaultBg");
    } else {
        $('#colourPickerSample').removeClass("defaultBg").css('background-color', hex);
    }
});

// get color on click
$('#colourPickerBar').bind('click', function(e){
    var pos = findPos(this);
    var x = e.pageX - pos.x; // get the x value of the cursor
    var y = e.pageY - pos.y; // get the y value of the cursor
    var ctx = document.getElementById('colourPickerBar').getContext('2d');
    var img_data = ctx.getImageData(x, y, 1, 1).data;
    var hex = ("000000" + rgbToHex(img_data[0], img_data[1], img_data[2])).slice(-6);

    if ((0 <= x) && (14 >= x) && (0 <= y) && (14 >= y)) {
        $('#colourPickerSample').css('background-color', 'none').addClass("defaultBg");
        $('#colourSelectorInput').val('HEX');
    } else {
        $('#colourPickerSample').removeClass("defaultBg").css('background-color', hex);
        $('#colourSelectorInput').val(hex);
    }
});

Answer 1

您只需找出14x14矩形的位置并在您的点击中进行测试并移动事件以查看鼠标是否位于其中。如果是，请执行您想要的操作。

由于我们无法看到您的图像，我们无法准确地告诉您它的位置。

知道鼠标是否在14x14 rect之内是简单的：

return ((x <= mx) && ((x + width) >= mx) && (y <= my) && ((y + height) >= my));

其中x，y，width，height是rect和mx，my是鼠标

如何“屏蔽”画布区域以进行不同的操作？

1 个答案: