Skip to content

Instantly share code, notes, and snippets.

@willxiang

willxiang/.block

Last active March 31, 2016 13:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save willxiang/4a71f0ba5788e52fcac2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save willxiang/4a71f0ba5788e52fcac2 to your computer and use it in GitHub Desktop.
Download ZIP
ColorPicker Test
Raw
.block
license: gpl-3.0
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>颜色取色器colorPicker</title>
<style type="text/css">
html,body{margin:0;padding:0;font-size:12px}#content{margin:20px auto;width:600px;height:300px}.content-left{float:left;width:400px;height:inherit}.content-right{float:left;width:180px;height:inherit;margin-left:18px}.canvas-scale{height:15px;top:25px;padding:0;margin:0;float:left}.canvas-selColor{float:left;width:100%;height:260px;margin-top:10px}#colorCanvas{cursor:crosshair;float:left}.content-rgb{padding:0 10px;height:20px;line-height:20px;font-size:14px;float:left;display:none}
</style>
</head>
<body>
<div id="content">
<div class="content-left">
<canvas id="colorCanvas" width="400" height="15"></canvas>
<div class="canvas-scale">
<canvas id="rangeCanvas" width="400" height="15"></canvas>
</div>
<div class="canvas-selColor"></div>
</div>
<div class="content-right">
<input type="tel" name="colorValue" size="10" />值域<br /><br />
<input type="tel" name="position" size="10" />canvas坐标<br /><br />
<input type="text" name="rgb" size="10">rgb颜色值<br /><br />
<input type="text" name="color" size="10">16进制颜色码<br /><br />
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var colorCanvas = document.getElementById("colorCanvas");
var context = colorCanvas.getContext("2d");
var colorGradient = { 0: 'rgba(100,255,51,1)', 0.167: 'rgba(153,255,51,1)', 0.333: 'rgba(204,255,51,1)', 0.5: 'rgba(255,255,71,0.8)', 0.667: 'rgba(255,250,150,1', 0.833: 'rgba(255,187,102,0.9)', 1: 'rgba(255,119,68,0.9)' };
var sortNumber = function (a, b) {
return a - b;
};
var Picker = function () {
this.range = [50, 100, 150, 200, 300];
this.drawColor = function () {
var grad = context.createLinearGradient(0, 0, colorCanvas.width, colorCanvas.height);
for (var gradient in colorGradient) {
grad.addColorStop(gradient, colorGradient[gradient]);
}
context.fillStyle = grad;
context.fillRect(0, 0, colorCanvas.width, colorCanvas.height);
};
this.drawRange = function () {
var rangeCanvas = document.getElementById("rangeCanvas");
var width = rangeCanvas.width;
var ctx = rangeCanvas.getContext("2d");
var len = this.range.length;
var maxValue = this.range.sort(sortNumber)[len - 1];//数组最大value
ctx.drawLine = function (beginX, beginY, endX, endY) {
this.moveTo(beginX, beginY);
this.lineTo(endX, endY);
};
ctx.fillText("0", 0, 14);
ctx.save();
ctx.translate(0.5, 0.5); //消除锯齿
ctx.lineWidth = 1;
ctx.beginPath();
ctx.drawLine(0, 0, 0, 4); //第一个刻度
for (var i = 0; i < len - 1; i++) {
var px = Math.round(width * this.range[i] / maxValue);
ctx.fillText(this.range[i], px - 8, 14);
ctx.drawLine(px, 0, px, 4);
}
var endPx = Math.round(width * this.range[len - 1] / maxValue);
ctx.fillText(this.range[len - 1], endPx - 18, 14);
ctx.drawLine(endPx - 1, 0, endPx - 1, 4); //最后一个刻度
ctx.stroke();
};
this.drawCircle = function (point, color) {
context.clearRect(0, 0, colorCanvas.width, colorCanvas.height);
this.drawColor();
context.beginPath();
context.arc(point.X, point.Y, 2, 0, 360, false);
context.fillStyle = color;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "#000";
context.stroke();
context.save();
context.closePath();
};
this.d2Hex = function (d) {
// Converts a decimal number to a two digit Hex value
var hex = Number(d).toString(16);
while (hex.length < 2) {
hex = "0" + hex;
}
return hex.toUpperCase();
};
this.getRgbColor = function (point) {
var imageData = context.getImageData(0, 0, colorCanvas.width, colorCanvas.height);
var data = imageData.data;
var i = ((point.Y * colorCanvas.width) + point.X) * 4;
var rgb = [], color = '#', objRgbColor = { "rgb": rgb, "color": color };
for (var j = 0; j < 3; j++) {
rgb.push(data[i + j]);
color += this.d2Hex(data[i + j]);
}
objRgbColor.color = color;
return objRgbColor;
};
this.getIntOffset = function (e) {
var evt = e || window.event;
var srcObj = evt.target || e.srcElement;
if (e.offsetX) {
return { X: parseInt(e.offsetX), Y: parseInt(e.offsetY) };
} else {
var rect = srcObj.getBoundingClientRect();
return { X: parseInt(e.clientX - rect.left), Y: parseInt(e.clientY - rect.top) };
}
};
this.getValue = function (point) {
return Math.round(this.range[this.range.length - 1] * point.X / colorCanvas.width);
};
this.setColor = function (point) {
var objRgbColor = this.getRgbColor(point);
var rgb = "rgb(" + objRgbColor.rgb.join(",") + ")";
var color = objRgbColor.color;
var colorValue = this.getValue(point);
this.drawCircle(point, color);
$(".canvas-selColor").css("background", rgb);
$("input[name='colorValue']").val(colorValue);
$("input[name='position']").val(point.X + "," + point.Y);
$("input[name='rgb']").val(rgb);
$("input[name='color']").val(color);
};
};
var initPicker = function () {
var picker = new Picker();
picker.drawColor();
picker.drawRange();
colorCanvas.onclick = function (e) {
var point = picker.getIntOffset(e);
picker.setColor(point);
}
}
initPicker();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment