使拾色器可拖动而不仅仅是点击

Question

所以我有一个 HTML 颜色选择器，当你简单地点击一种颜色时它工作得很好，但是假设你想在画布上拖动实时看到不同的颜色，你将如何使用以下代码来实现？即使在安装了其他颜色选择器之后，我似乎也无法理解它。这是我正在使用的代码：<canvas style="cursor:crosshair;margin-left: 4px;" width="505" height="301" id="canvas_picker"></canvas><br><br><hr><br><div id="hex"><font style="font-family: monospace;" color="#f20000">HEX:</font> <input onclick="this.setSelectionRange(0, this.value.length)" id="hexinput" value="#FFFFFF" type="text" readonly></div><div id="color-label" style="background-color: #FFFFFF;"></div><br><div id="rgb"><font style="font-family: monospace;" color="#f20000">RGB:</font> <input onclick="this.setSelectionRange(0, this.value.length)" id="rgbinput" value="rgb(255, 255, 255)" type="text" readonly></div><script type="text/javascript">    var colorLabel = document.getElementById('color-label');    var canvas = document.getElementById('canvas_picker').getContext('2d');    var img = new Image();    img.src = 'cpb.png';        $(img).load(function(){      canvas.drawImage(img,0,0);    });    function rgbToHex(R,G,B) {        return toHex(R)+toHex(G)+toHex(B)    }        function toHex(n) {      n = parseInt(n,10);      if (isNaN(n)) return "00";      n = Math.max(0,Math.min(n,255));      return "0123456789ABCDEF".charAt((n-n%16)/16)  + "0123456789ABCDEF".charAt(n%16);    }    $('#canvas_picker').click(function(event){        var x = event.pageX - this.offsetLeft;        var y = event.pageY - this.offsetTop;        var img_data = canvas.getImageData(x, y, 1, 1).data;        var R = img_data[0];        var G = img_data[1];        var B = img_data[2];          var rgb = 'rgb(' + R + ', ' + G + ', ' + B + ')';        var hex = rgbToHex(R,G,B);        $('#rgb input').val(rgb);        $('#hex input').val('#' + hex);        colorLabel.style.backgroundColor = '#' + hex;    });     </script>

Answer 1

您需要$('#canvas_picker').mousemove(function(event){改为使用。

但是您还需要监听 mousedown 和 mouseup 事件，以仅允许该函数在按住鼠标时运行。是这样的：

function pickColour(element) {

    var x = event.pageX - element.offsetLeft;

    var y = event.pageY - element.offsetTop;

    var img_data = canvas.getImageData(x, y, 1, 1).data;

    var R = img_data[0];

    var G = img_data[1];

    var B = img_data[2];  

    var rgb = 'rgb(' + R + ', ' + G + ', ' + B + ')';

    var hex = rgbToHex(R,G,B);

    $('#rgb input').val(rgb);

    $('#hex input').val('#' + hex);

    colorLabel.style.backgroundColor = '#' + hex;

}

var canPick = false

$('#canvas_picker').mousedown(function(){

  canPick = true

});   

$('#canvas_picker').mouseup(function(){

  canPick = false

});  

$('#canvas_picker').mouseleave(function(){

  canPick = false

}); 

$('#canvas_picker').on('mousemove', function() {

  if(canPick) {

    pickColour(this);

  }

  

})