0

私は画像から色を選択するツールに取り組んでおり、ドラッグ可能なdivを使用して画像の色を強調表示し、パレットに追加しようとしています。私が持っているコードはエスプレッソのプレビュー機能で動作しますが、Webサイトにデプロイされると、背景色がリアルタイムで更新されません。代わりに、ウィンドウを下にスクロールしたとき、または場合によっては遅延した後に更新されます。関連するコードは次のとおりです。

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がリアルタイムで更新されないだけです（ただし、コードをステップスルーすると応答性が向上します）。アニメーションを使用し、表示をnoneに変更してからインラインに変更してみました（ここに投稿された他の問題についての提案）が、リアルタイムで応答するものはありません。

どんな助けでもいただければ幸いです。

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. 円の1つを別の色の領域に移動します（移動すると色が更新されるはずですが、更新されません）。

  3. 別の円を画像から移動してから、画像に戻します。

  4. 円を画像上に移動すると、前の円が正しい色に「ポップ」し、移動したばかりの円が黒になります。

4

2 に答える 2

1

div レイヤーとキャンバス レイヤーのブレンドに問題があるようです。レイヤーを配置する必要があります。z-index の管理も必要になる場合があります。divの背景色が更新されていることを確信させるconsole.log()ステートメントをいくつか追加しましたが、アクティブなキャンバス領域から移動するまで表示されません。したがって、これは 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 に答える