画布拖动和颜色选择

Question

所以我在画布上有一个颜色选择器。渐变颜色填充形状。用户使用鼠标选择直方图上的任意位置。很标准。他们还可以将鼠标拖动到形状中的任何位置。为了在他们进行最终颜色选择后显示他们的位置，我添加了一个黑色的小fillRect并随其鼠标一起移动。现在这是我的问题，因为它们偶尔会移动鼠标，因此getImageData函数将捕获小的黑色矩形的颜色，而不是基本的渐变。要解决此问题，我将点从鼠标接触渐变的位置偏移5像素。有效。但是，现在当他们将鼠标拖动到形状的确切边缘时，它会在边界外绘制黑点，看起来很糟。如何防止出现这种情况，同时又防止鼠标拾取黑色sqr？

$colors.on('touchmove mousemove', function (e) {
    e.preventDefault();
    let gradient = Ybigh.colorctx.createRadialGradient(135, 330, 160, 200, 290, 30);

    gradient.addColorStop(0,    "#84342f");
    gradient.addColorStop(0.25, "#ff5f57");
    gradient.addColorStop(1,  "white");

    colorctx.beginPath();
    colorctx.moveTo(20, 185);
    colorctx.lineTo(200, 285);
    colorctx.lineTo(200, 295);
    colorctx.lineTo(20, 400);
    colorctx.closePath();
    colorctx.fillStyle = gradient;
    colorctx.strokeStyle = "#b0aaa6"; 
    colorctx.stroke();
    colorctx.fill();
    colorctx.fillStyle = "#000000";  
    colorctx.fillRect(new_color.x-2, new_color.y-2, 2, 2);
});

Answer 1

我想出了一种满足要求的解决方法。本质上，我所做的就是允许用户移动鼠标并更改颜色，而不会显示黑色矩形，并且只有在mouseup上才会出现小矩形以标记该点。这有点hacky，但就我而言，它确实可以完成工作。

$("body").mouseup(function () {

            glob.hasclicked=false;
            colorctx.fillStyle = "#000000";  
            colorctx.fillRect(glob.rectPosition.x, glob.rectPosition.y, 3, 3);


        });