Question

我正在研究一种从图像中选择颜色的工具，我正在尝试使用可拖动的div来突出显示图像中的颜色以添加到调色板中。我在espresso的预览功能中使用的代码，但是一旦它被部署到网站，背景颜色就不会实时更新。相反，它会在我向下滚动窗口或有时在延迟之后更新。以下是相关代码：

for (i=0; i<maxPaletteSize; i++)
{
    circleDiv[i] = document.getElementById('circle' + i);
    $("#circle" + i).draggable({
        drag: function(event, ui) {
            // find current x,y of div
            var circleX = ui.position.left;
            var circleY = ui.position.top;

            // figure out what color pixel the circle is over
            var pixelNum = Math.round(circleY * img.width + circleX) * 4;
            var color = "rgba(" + imgData.data[pixelNum] + "," + imgData.data[pixelNum+1] + "," + imgData.data[pixelNum+2] + ")";

            // change div background to the appropriate color
            $(ui.helper).css({backgroundColor: color});   
        }
    });

}

当我单步执行代码时，颜色设置正确，只是backgroundColor不会实时更新（尽管当我单步执行代码时它的响应速度更快）。我已尝试使用动画以及将显示更改为无，然后内联（我在此处发布的其他问题的建议），但没有任何内容可以让它实时响应。

任何帮助都将不胜感激。

编辑以添加最初设置div的代码。我将所有div存储在一个数组中，以便于代码的其他部分访问。

// draw the circles
for (i=0; i<paletteSize; i++)
{
    // get the color from the palette
    var paletteColorIdx = paletteCircles[i].palette;
    // show the div
    circleDiv[i].style.display = 'inline';
    // calculate the absolute x,y coords
    circleDiv[i].style.left = (uiFrame.offsetLeft + paletteCircles[i].x - circleDiv[i].offsetWidth/2) + "px";
    circleDiv[i].style.top = (uiFrame.offsetTop + paletteCircles[i].y - circleDiv[i].offsetHeight/2) + "px";
    // set the color
    circleDiv[i].style.backgroundColor = "rgb(" + palette[paletteColorIdx][0] + "," + palette[paletteColorIdx][1] + ","  + palette[paletteColorIdx][2] + ")";
}

jsfiddle链接：http://jsfiddle.net/FzxNk/6/

要查看行为：

加载图片。
将其中一个圆圈移动到不同颜色的区域（应该在移动时更新颜色，但不会。）
从图像上移开另一个圆圈，然后返回图像。
当您将圆圈移动到图像上时，前一个圆圈将“弹出”为正确的颜色，而您刚刚移动的圆圈将为黑色。

Answer 1

混合div和canvas图层看起来有问题。您需要定位图层。您可能还需要管理z索引。我添加了一些console.log（）语句，这些语句让我确信你的div的背景颜色正在更新，但是直到你将它移出活动画布区域才会看到它。因此，更新DOM不是问题，这是canvas / div交互的显示问题。老实说，这是一个浏览器错误，但你可以解决它。

此处提供更多信息：Placing a <div> within a <canvas>

Answer 2

试试这个： -

http://jsfiddle.net/FzxNk/1/

使用

$(ui.helper).css("background",color);

jQuery UI可拖动时不会在拖动时正确更新背景颜色

2 个答案:

试试这个： -