帆布eyeDropper

我需要實現一個吸管工具。我想，這樣你點擊滴管按鈕以激活它，然後用onmove它將改變我的顏色選擇器的顏色，當你點擊使用的onclick將使用顏色設置爲顏色選擇器：帆布eyeDropper

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

變量eyeDropperColour將根據您所在的顏色像素使用onlick進行設置。我想知道是否必須根據我擁有的圖層來做到這一點：canvas和canvasCursor。

我一直在看這個指南，但我不能讓它爲我的項目工作？ 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; 
    } 
});

來源

2013-06-20 Steven Barrett

創建畫布「吸管」工具

這是如何閱讀在任何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和報告，顏色

// 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-20 20:52:38 markE

回答

相關問題