画布拖动和颜色选择答案

【问题标题】：canvas drag and color select画布拖动和颜色选择
【发布时间】：2023-03-08 11:36:01
【问题描述】：

所以我在画布中有一个颜色选择器。渐变颜色填充形状。用户使用鼠标选择直方图上的任何位置。很标准。他们还可以在形状中的任何位置拖动鼠标。为了在他们做出最终的颜色选择后显示他们的位置，我添加了一个黑色的小填充矩形，它会随着他们的鼠标移动。现在这是我的问题，因为他们偶尔会移动鼠标，所以 getImageData 函数会抓取小黑色矩形的颜色，而不是底层渐变的颜色。为了解决这个问题，我将点从鼠标接触渐变的点偏移了 5px。有效。但是，现在当他们将鼠标拖动到形状的确切边缘时，它会在边界之外绘制那个黑点并且看起来很糟糕。我怎样才能防止这种情况，同时防止我的鼠标拿起黑色的 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);
});

【问题讨论】：

能看到代码和结果吗？
这看起来你没有清除画布。为了清除画布，您可以在beginPath() 之前使用上下文方法clearRect。避免问题并不能解决问题。
实际上，这对 SO 来说是个糟糕的问题。这更多的是设计问题，而不是真正的代码问题。我只需要考虑我希望应用程序如何工作以找到解决方案。对这里的人来说不是很好。我可能会删除这个问题，因为我不想听起来像个菜鸟。谢谢

标签： javascript canvas color-picker getimagedata

【解决方案1】：

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

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

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


        });

【讨论】：