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

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) {&nbsp; &nbsp; var x = event.pageX - element.offsetLeft;&nbsp; &nbsp; var y = event.pageY - element.offsetTop;&nbsp; &nbsp; var img_data = canvas.getImageData(x, y, 1, 1).data;&nbsp; &nbsp; var R = img_data[0];&nbsp; &nbsp; var G = img_data[1];&nbsp; &nbsp; var B = img_data[2];&nbsp;&nbsp;&nbsp; &nbsp; var rgb = 'rgb(' + R + ', ' + G + ', ' + B + ')';&nbsp; &nbsp; var hex = rgbToHex(R,G,B);&nbsp; &nbsp; $('#rgb input').val(rgb);&nbsp; &nbsp; $('#hex input').val('#' + hex);&nbsp; &nbsp; colorLabel.style.backgroundColor = '#' + hex;}var canPick = false$('#canvas_picker').mousedown(function(){&nbsp; canPick = true});&nbsp; &nbsp;$('#canvas_picker').mouseup(function(){&nbsp; canPick = false});&nbsp;&nbsp;$('#canvas_picker').mouseleave(function(){&nbsp; canPick = false});&nbsp;$('#canvas_picker').on('mousemove', function() {&nbsp; if(canPick) {&nbsp; &nbsp; pickColour(this);&nbsp; }&nbsp;&nbsp;})