如何“遮罩”画布区域以执行其他操作？

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

你必须得找出的14×14矩形，并在点击测试和移动事件，以判断鼠标在里面。如果属实，请执行您想要的操作。

由于我们无法看到您的图像，我们无法准确告诉您该在哪里。

知道阉羊或不鼠标的14×14矩形的内部很简单：

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

其中X，Y，宽度，高度是RECT和MX，我的是鼠标