帆布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

回答

相关问题