0

我正在开发一种可以从图像中选择颜色的工具，并且我正在尝试使用可拖动的 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/

查看行为：

  1. 加载图像。

  2. 将其中一个圆圈移动到不同颜色的区域（它应该在您移动时更新颜色，但它不会。）

  3. 将另一个圆圈从图像上移开，然后再移回图像上。

  4. 当您将圆圈移动到图像上时，前一个圆圈将“弹出”为正确的颜色，而您刚刚移动的圆圈将为黑色。

4

2 回答 2

1

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

更多信息：Placeing a <div> within a <canvas>

于 2013-03-12T17:44:56.077 回答
0

试试这个： -

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

利用

$(ui.helper).css("background",color);
于 2013-03-12T04:55:30.673 回答