gpt4 book ai didi

Canvas eyeDropper(帆布滴眼液)

转载 作者:bug小助手 更新时间:2023-10-28 21:21:19 25 4
gpt4 key购买 nike



I need to implement an eyedropper tool. I want it so you click the eyedropper button to make it active, then using a onmove it will change the colour of my colour picker and when you click using onclick it will set the colour to the colour picker using:

我需要实现一个滴管工具。我想要它,所以你点击滴管按钮将它激活,然后使用onMove它会改变我的颜色选择器的颜色,当你使用onClick点击它时,它会使用以下命令设置颜色选择器的颜色:



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


The variable eyeDropperColour would be set using the onlick based on what colour pixel you are over. I am wondering would I have to do it based on what layer as I have: canvas and canvasCursor.

根据您所使用的颜色像素,可以使用onlick来设置变量yes DropperColour。我在想,我是否必须基于现有的哪一层来执行此操作:画布和画布Cursor。



I have been looking at this guide but I can't make it work for my project? http://palebluepixel.org/2011/11/16/html5-canvas-eyedropper/

我一直在看这本指南,但我不能让它适用于我的项目?Http://palebluepixel.org/2011/11/16/html5-canvas-eyedropper/



Here is my project:
http://www.taffatech.com/Paint.html

这是我的项目:http://www.taffatech.com/Paint.html



I have:

我有:



var eyeDropperActive = false;
var eyeDropperColour;


and:

以及:



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

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

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

更多回答
优秀答案推荐

Creating a canvas “eyedropper” tool

创建画布“吸管”工具



This is how to read the pixel color at any X/Y on the canvas:

这是如何在画布上读取任意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]+")");
}


The rest is just controlling when to accept the color with a click on the canvas.

其余的只是控制何时通过在画布上单击来接受颜色。



    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;});


And here is the mousemove event handler that calls getPixelColor and reports that color

下面是MouSemove事件处理程序,它调用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));

}


Here is code and a Fiddle: http://jsfiddle.net/m1erickson/zpfdv/

以下是代码和一个提琴: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>


This is a new js API for eyedropper. it is more concise and will do the same job done with a lot less code.

这是一个新的js API for eyedropper。它更简洁,可以用更少的代码完成同样的工作。


if('EyeDropper' in window){
const dropper = new window.EyeDropper()
dropper.open().then((result) => {
console.log(result.sRGBHex);
})
}else{
alert('Eye Dropper Not Supported in your Browser Current Version.\nPlease Update your Browser to use this feature')
}

更多回答

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com