`
piziwang
  • 浏览: 239986 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

photoshop风格拾色器

360JavaScriptMicrosoftXHTMLHTML 
阅读更多

JavaScript仿 Photoshop 拾色器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title> photoshop风格拾色器 </title>
<base href="http://code.js.cn/links/">
<style>
html,body{margin:0;font-size:12px;}
#pscolor_win{border:1px solid #666;width:163px;overflow:hidden;position:absolute;left:100px;top:100px;background:#D4D0C8;display:none;}
#psc_preview{height:20px;width:55px;background:red;float:left;display:inline;margin:5px;margin-bottom:0;border:1px inset #fff;}
#psc_new{height:100%;width:50%;background:red;}
#psc_value{height:18px;width:60px;border:1px solid #aaa;vertical-align:middle;display:block;float:left;margin:5px 5px 0 0;}
#color_out{display:block;width:20px;height:20px;background:url(color_out.gif) no-repeat 50% 50%;margin:5px 0 0 0;float:left;}
#color_out:hover{border:1px solid #999;border-left-color:#fff;border-top-color:#fff;}
#psc_range{position:relative;width:128px;height:128px;border:1px inset #fff;margin:5px;overflow:hidden;background:red;float:left;display:inline;}
#psc_range div{position:absolute;left:0;top:0;width:128px;height:128px;_background:none;}
#w_mask{background:url(white_mask.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://code.js.cn/links/white_mask.png',sizingMethod='scale');}
#b_mask{background:url(black_mask.png) no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://code.js.cn/links/black_mask.png',sizingMethod='scale');}
#psc_slider{margin:5px 0;background:url(color_slider.png) no-repeat 50% 0;width:19px;height:128px;position:relative;float:left;}
#psc_slider div{border:1px inset #fff;margin:0 auto; width:9px; height:100%;}
#psc_cursor{display:block;width:7px;height:7px;background:url(select_pos.gif) no-repeat;font-size:12px;overflow:hidden;position:absolute;right:-2px;top:-2px;}
#psc_mark{display:block;width:42px;height:9px;background:url(color_pos.gif) no-repeat;position:absolute;left:0;top:0;}
.clear{clear:both;font-size:0;height:0;overflow:hidden}
</style>
</head>

<body>
<br/><br/><br/><br/><br/><br/><br/>
<h1>简单的仿Photoshop的颜色设置器</h1><hr/><br/>
&nbsp;&nbsp;&nbsp; 背景颜色 <input type="text" name="" id="b1" />
&nbsp;&nbsp;&nbsp; 文本颜色 <input type="text" name="" id="b2" />
</body>
<script>
function dragMap(opts){//定义一个拖动类,以实时捕捉映射坐标值
	this.map=document.getElementById(opts.map);
	this.mover=document.getElementById(opts.mover);
	this.x=1;	this.y=0;
	this.drag(opts.dir.indexOf('x')+1,opts.dir.indexOf('y')+1);
};
dragMap.prototype={
	getPos:function (el){//取得标签页面坐标
		var x=0,y=0;
		while(el){x+=el.offsetLeft;	y+=el.offsetTop;el=el.offsetParent};
		return {x:x,y:y}	
	},
	getMapPos:function (x,y){//取得子标签相对拖动容器的坐标
		var mp=this.getPos(this.map);
		x=Math.max(0,x-mp.x-7);
		y=Math.max(0,y-mp.y-7);
		return {x:x,y:y}
	},//保证安全取值范围
	cut:function (a){return Math.min(124,Math.max(-4,a))},
	drag:function (_x,_y){//拖动方法
		var me=this,d=document,w=window;
		this.map.onmousedown=function (e){
			e=e||event;
			var x=e.clientX,y=e.clientY;
			var pos=me.getMapPos(x,y);
			if(_x)me.mover.style.left=pos.x+'px';
			if(_y)me.mover.style.top=pos.y+'px';
			me.x=pos.x/128;
			me.y=pos.y/128;
			me.onchange();
			d.onmousemove=function (e){
				e=e||event;
				var dx=me.cut(pos.x+e.clientX-x);
				var dy=me.cut(pos.y+e.clientY-y);
				if(_x)me.mover.style.left=dx+'px';
				if(_y)me.mover.style.top=dy+'px';
				me.x=(dx+4)/128;
				me.y=(dy+4)/128;
				me.onchange();
				w.getSelection?w.getSelection().removeAllRanges():d.selection.empty();
			};
			d.onmouseup=function (){	d.onmousemove=null}
		}
	},
	onchange:function (){}
};
colorSelector={//单例拾色器对象
	build:function (){//建造HTML
		this.win=document.createElement("DIV");
		this.win.id="pscolor_win";
		this.win.innerHTML='<div id="psc_preview"><div id="psc_new"></div></div><input type="text" id="psc_value" value="#FF0000" readonly /><a href="javascript:void 0" title="点击添加" id="color_out"></a><div id="psc_range"><div id="w_mask"></div><div id="b_mask" ></div><span id="psc_cursor"></span></div><div id="psc_slider"><span id="psc_mark"></span><div></div></div><div class="clear"></div>';
		document.body.appendChild(this.win)
	},
	hsb2hex: function(H,S,B){//HSB转HEX
	   if (B==0) {return '#000000'};
	   H%=360,S/=100,B/=100,H/=60;
	   var i = Math.floor(H),f = H-i,p = B*(1-S),q = B*(1-(S*f)),t = B*(1-(S*(1-f)));
	   var g = [[B,t,p],[q,B,p],[p,B,t],[p,q,B],[t,p,B],[B,p,q]][i];
	   for (i=g.length;i--;)g[i]=('0'+Math.round(g[i]*255).toString(16)).slice(-2);
	   return '#'+g.join('').toUpperCase()
	},
	show:function (x,y){//定位显示面板
		var V=this.win.style;
		V.left=x+'px';
		V.top=y+'px';
		V.display='block';
	},
	hide:function (){this.win.style.display='none';return this},
	bind:function (el){//绑定输入框
		el=document.getElementById(el);
		var me=this,h=el.offsetHeight+1;
		el.onfocus=function (e){
			var pos=me.pos(this);
			me.binder=this;
			me.show(pos.x,pos.y+h);
		};
		el.onclick=function (e){me.stop(e||window.event)};
		this.addEvent(document,'click',function(){me.hide()});
		return this
	},
	addEvent:function (el,type,fn){//多次添加事件
		el.attachEvent?el.attachEvent('on'+type,function(){fn.call(el)}):
		el.addEventListener(type, fn, false);
	},
	stop: function(_e) {//取消冒泡
		_e.stopPropagation?_e.stopPropagation():(_e.cancelBubble = true)
	},
	init:function (){
		var d=document,me=this;
		this.build();
		this.old="#000000";
		try{d.execCommand("BackgroundImageCache", false, true)}catch(e){};//IE6-bug
		this.area=new dragMap({map:"psc_range",mover:"psc_cursor",dir:'xy'});
		this.slider=new dragMap({map:"psc_slider",mover:"psc_mark",dir:'y'});
		this.win=d.getElementById("pscolor_win");
		this.view=d.getElementById("psc_range");
		this.box=d.getElementById("psc_preview");
		this.newColor=d.getElementById("psc_new");
		this.input=d.getElementById("psc_value");
		this.out=d.getElementById("color_out");
		this.pos=this.area.getPos;//引用拖动对象的取页面坐标方法共用
		this.area.onchange=this.slider.onchange=function (){//两个拖动对象的事件定制
			var h=Math.round((1-me.slider.y)*360),s=100,b=100;
			me.view.style.background=me.hsb2hex(h,s,b);//设置左侧背景色
			s=me.area.x*100;
			b=100-me.area.y*100;
			me.input.value=me.newColor.style.background=me.old=me.hsb2hex(h,s,b);//设置上面文本框的值和预览框的背景
		};
		this.win.onclick=function (e){me.stop(e||window.event)};//取消面板冒泡
		this.win.ondblclick=this.out.onclick=function (){
			me.box.style.background=me.old;
			me.hide().onclick(me.input.value);
		};//输出按钮事件转发
		return this;
	},
	onclick:function (x){//添加选定色彩事件,可以自已添加其它响应.
		this.binder.value=x;
		this.binder.style.background=x;
		document.body.style[this.binder.id=='b1'?'background':'color']=x;
	}
};
colorSelector.init().bind('b1').bind('b2');
</script>
</html>

 

  • 大小: 9.8 KB
分享到：
| 一个奇怪的单例模式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    拾色器，美工的好助手

    拾色器是图形设计和网页开发等领域不可或缺的工具，它能帮助用户精确选取屏幕上任何位置的颜色值，以便在设计工作中准确地应用色彩。"拾色器，美工的好助手"这个标题表明，这款软件或应用专门针对美工人员，提供方便...

    js做的几款超好用的网页拾色器(colorpicker)

    以下是对几款基于JavaScript编写的网页拾色器及其特性的详细讲解： 1. **Simple Colorpicker** Simple Colorpicker 是一款轻量级的JavaScript色选器，它的设计简洁，易于集成到任何项目中。它提供了一个基本的颜色...

    调色器，拾色器，网页设计

    "调色器"和"拾色器"是设计师不可或缺的工具，它们能帮助创建出引人入胜且视觉效果和谐的网页界面。这款名为"ColorPicker"的软件是一款第三方的绿色软件，意味着它无需安装，不依赖其他程序，可以独立运行，并且不会...

    TakeColor 拾色器

    "TakeColor"拾色器能够帮助设计师精确地捕获屏幕上显示的任何颜色代码，包括RGB、HEX、CMYK等多种格式，这些颜色代码可以无缝对接到各种设计软件，如Photoshop、Sketch或Adobe XD等。 软件的使用方法很简单：只需...

    photoshop教程2

    3. **前景色背景色与拾色器.avi**：在Photoshop中，前景色和背景色是进行绘画和填充的基础。本视频将教授如何设置和选择颜色，以及如何使用拾色器来精确选取色彩。 4. **切片工具.avi**：切片工具主要用于将大型...

    Photoshop200集

    - **拾色器**：演示如何使用拾色器选取颜色。 - **颜色面板**：介绍颜色面板如何用于设置和管理颜色。 - **色板**：解释色板如何存储和管理颜色样本。 - **渐变色**：说明如何使用渐变色工具创建渐变效果。 - **调整...

    photoshop制作个性海报.pdf

    - 设置前景色和背景色，可以通过点击工具栏中的颜色框来调出拾色器对话框。 3. **创建新图层**： - 创建新的图层，用于填充前景色，以便于后期处理，而不影响原始图层。 4. **图层模式调整**： - 将图层1的图层...

    中文版Photoshop-CS短期培训教程04.ppt

    设置图像颜色可以通过“拾色器”对话框、颜色控制面板或吸管工具来完成，以满足不同的色彩需求。调整图像大小则涉及“画布大小”和“图像大小”两个菜单命令，前者改变画布尺寸，后者则影响图像的实际像素尺寸。 ...

    中文版Photoshop CS6完全自学基础知识入门到精通视频教程.docx

    * 如何用拾色器设置颜色 * 如何用吸管工具拾取颜色 * 如何创建透明渐变 * 如何用颜色面板调整颜色 * 如何用油漆桶为卡通画填色 * 如何用填充命令填充草坪图案 * 如何定义图案制作足球海报 * 如何用描边命令...

    你可能不知道的50条Photoshop操作技巧

    6. 颜色选取：按住Alt键点击颜色拾色器，可以吸取屏幕上的颜色作为参考。 7. 快速修复：使用修补工具（J）比修复画笔工具更方便地去除图像中的瑕疵。 8. 图层编组：按Ctrl+G将多个图层编组，方便统一管理和操作。 ...

    js仿照ps中的取色器

    在JavaScript编程领域，创建一个类似于Photoshop中的取色器是一项有趣的挑战，它可以为网页应用添加丰富的用户体验。"js仿照ps中的取色器"项目旨在实现一个轻量级、直观且易于使用的颜色选取工具，使得用户能够方便...

    用PS为漫画上色教程~~动画风格

    使用“拾色器”选取适合的颜色，并可借助色彩理论来创建和谐的配色方案。你可以用“画笔工具”或“渐变工具”进行填充。在动画风格的漫画中，颜色通常更鲜艳且对比强烈，以增加视觉冲击力。 5. **阴影与高光** ...

    Q版人物绘制全过程.pdf

    2. 色彩调配：文件中建议在拾色器中调配色彩，而不是直接在颜色面板中选择。这样可以调配出更多的色彩变化，使画面色彩更加丰富和生动。拾色器提供了更为细致的色彩调整选项，有助于艺术家根据自己的需求创建出独特...

    画图截屏图形操作工具（免费、免汉化、免安装）--pickpick

    3 拾色器和调色板：支持RGB HTML c + + Delphi等代码类型 Photoshop风格转换 保存颜色； 4 屏幕放大镜 量角器 屏幕坐标计算功能；为你的演示文稿把屏幕当作白板自由绘画 "&gt;具备了截取全屏 活动窗口 指定区域 固定...

    网页取色软件.用于美工设计.

    网页取色软件使得设计师可以从网页上的任何部位提取RGB、CMYK或HEX等颜色代码，这些代码可以在各种设计软件如Photoshop、Illustrator中直接应用。 "getcolor.exe"这个文件名很可能是一款网页取色软件的可执行程序。...

    中文版PhotoshopCS6完全自学基础知识入门到精通视频教程.pdf

    色彩处理是图像设计的重要环节，教程介绍了色彩面板、色板面板、拾色器、吸管工具等用于颜色选取和调整的工具，以及渐变、填充、描边命令的运用。此外，还详细讲解了如何创建自定义画笔，以及使用颜色替换工具改变...

    ps实例制作，对ps的每一个制作过程做了详细的阐述

    点击色彩控制区域来打开拾色器并设置颜色。 6. **填充颜色**：按“Alt+Delete”键填充前景色，按“Ctrl+Delete”键填充背景色，以形成春联的底色。 7. **文字输入**：选择文字工具，设置字体为方正行楷简体，字号...

    ps常用图标 以后不用再自己做了

    在Photoshop中编辑图标时，可以利用图层面板来控制每个元素的可见性和透明度，使用选择工具、变换工具来调整大小和位置，用色彩面板或拾色器改变颜色，通过图层样式添加特殊效果。对于复杂的图标，可以使用路径工具...

    【技巧-icon】线性小icon PS制作教程

    4. **颜色设置**：颜色选择对于线性小icon至关重要，PS提供多种颜色选取方式，包括拾色器、色轮和颜色板等。 ### 制作线性小icon的步骤 1. **构思设计**：在制作前，首先需要构思icon的样式和主题，明确设计意图。...

Magicbox
Global site tag (gtag.js) - Google Analytics