帆布吸管
Canvas eyeDropper
本文关键字:帆布 更新时间:2023-09-26
我需要实现一个滴管工具。我希望你点击滴管按钮使其激活,然后使用onmove它会改变我的选色器的颜色当你点击使用onclick它会设置颜色为选色器使用
$('#colorpickerHolder').ColorPickerSetColor(eyeDropperColour);
变量eyedroppercolor将根据你所过的颜色像素使用onclick设置。我想知道我是否必须根据我所拥有的图层来做: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;
}
});
创建画布"滴管"工具
这是如何读取画布上任意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> </div>
</body>
</html>