4

スポイト ツールを実装する必要があります。スポイト ボタンをクリックしてアクティブにすると、onmove を使用してカラー ピッカーの色が変更され、onclick を使用してクリックすると、以下を使用してカラー ピッカーに色が設定されます。

$('#colorpickerHolder').ColorPickerSetColor(eyeDropperColour);

変数 eyeDropperColour は、現在の色ピクセルに基づいて onlick を使用して設定されます。私が持っているレイヤーに基づいてそれをしなければならないのではないかと思っています：キャンバスとキャンバスカーソル。

このガイドを見てきましたが、自分のプロジェクトで機能させることができませんか? http://palebluepixel.org/2011/11/16/html5-canvas-eyedropper/

ここに私のプロジェクトがあります: http://www.taffatech.com/Paint.html

私は持っている：

var eyeDropperActive = false;
var eyeDropperColour;

と：

$("#brushEyeDropper").click(function() {

    if ( eyeDropperActive == true)
    {
      eyeDropperActive = false;
    }

    else if ( eyeDropperActive == false)
    {
     eyeDropperActive = true;
    }
});
4

1 に答える 1

2

キャンバスの「スポイト」ツールの作成

これは、キャンバス上の任意の X/Y でピクセルの色を読み取る方法です。

    function getPixelColor(x, y) {
        var pxData = ctx.getImageData(x,y,1,1);
        return("rgb("+pxData.data[0]+","+pxData.data[1]+","+pxData.data[2]+")");
    }

残りは、キャンバスをクリックしていつ色を受け入れるかを制御するだけです。

    var eyedropperIsActive=false; 

    // Activate reading pixel colors when a #startDropper button is clicked
    $("#startDropper").click(function(e){eyedropperIsActive=true;});

    // if the tool is active, report the color under the mouse
    $("#canvas").mousemove(function(e){handleMouseMove(e);});

    // when the user clicks on the canvas, turn off the tool 
    // (the last color will remain selected)
    $("#canvas").click(function(e){eyedropperIsActive=false;});

getPixelColor を呼び出してその色を報告する mousemove イベント ハンドラを次に示します。

    // if the tool is active, report any color under the mouse
    function handleMouseMove(e){

      if(!eyedropperIsActive){return;}

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var eyedropColor=getPixelColor(mouseX,mouseY);
      $("#results").css("backgroundColor",getPixelColor(mouseX,mouseY));

    }

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/zpfdv/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:30px; }
    canvas{border:1px solid red;}
    #results{width:30px; height:30px; border:1px solid blue;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var eyedropperIsActive=false;

    drawTestColors(20,20,"red");
    drawTestColors(100,20,"green");
    drawTestColors(180,20,"blue");

    function drawTestColors(x,y,color){
        ctx.beginPath();
        ctx.fillStyle=color;
        ctx.rect(x,y,50,50);
        ctx.fill();
    }


    function getPixelColor(x, y) {
        var pxData = ctx.getImageData(x,y,1,1);
        return("rgb("+pxData.data[0]+","+pxData.data[1]+","+pxData.data[2]+")");
    }


    function handleMouseMove(e){

      if(!eyedropperIsActive){return;}

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var eyedropColor=getPixelColor(mouseX,mouseY);
      $("#results").css("backgroundColor",getPixelColor(mouseX,mouseY));

    }

    $("#canvas").click(function(e){eyedropperIsActive=false;});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#startDropper").click(function(e){eyedropperIsActive=true;});

}); // end $(function(){});
</script>

</head>

<body>
    <p>Click "Activate Eyedropper" to read pixel color under the mouse</p>
    <p>Click canvas to set the color and de-active the eyedropper</p>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <button id="startDropper">Activate Eyedropper</button>
    <div id="results" width=30 height=30>&nbsp;</div>
</body>
</html>
于 2013-06-20T20:52:38.237 に答える