类似photoshop的曲线拖拽拖动可保存同时颜色变化

发布时间：2018-09-23 17:41:32 所属栏目：Unix 来源：站长网

导读：Java script可拖动的角度选择器，与PS软件中的曲线颜色调节一样，可以拖动，也可以在外围直接点击，按角度形成半圆或圆，同时颜色也随之变化，以前在一个老外的颜色拾取器里面见到过，样式与功能与其非常相似，虽说这款看上去简陋了些，但是核心功能已经

　　Javascript可拖动的角度选择器，与PS软件中的曲线颜色调节一样，可以拖动，也可以在外围直接点击，按角度形成半圆或圆，同时颜色也随之变化，以前在一个老外的颜色拾取器里面见到过，样式与功能与其非常相似，虽说这款看上去简陋了些，但是核心功能已经实现，还是很有参考价值的。

　　网页演示：点击此处

　　运行演示：

<html xmlns:v> <head> <meta http-equiv="content-type" content="text/html; charset=GB2312" /> <title>Javascript 可拖动的角度选择器 - Liehuo.Net</title> <style> body { margin:0px; padding:0px; } v:* { behavior:url(#default#vml); } </style> <script> var x0=150, y0=150, r=150; var md = false; function rotate(angle){ var ag; line1.from = x0+","+y0; try{ line1.to = (r*Math.cos(angle)+x0)+","+(r*Math.sin(angle)+y0); ag = (angle+(angle<0?Math.PI*2:0))/Math.PI*180; fill1.angle = -ag; if(ag<270){ arc1.startAngle = 90; arc1.endAngle = 90 + ag; }else{ arc1.startAngle = -270; arc1.endAngle = ag-270; } line1.innerHTML = ag.toFixed(2); }catch(e){} } window.onload = function(){ arc1.style.position="absolute"; arc1.style.left = x0-r; arc1.style.top = x0-r; arc1.style.width = r*2; arc1.style.height = r*2; rotate(0); } document.onselectstart = function(){ return(false); } document.onmousedown = function(){ md = true; angle = Math.atan((event.clientY-y0)/(event.clientX-x0)) + ((event.clientX-x0)<0?Math.PI:0); rotate(angle); } document.onmouseup = function(){ md = false; } document.onmousemove = function(){ if(!md)return; angle = Math.atan((event.clientY-y0)/(event.clientX-x0)) + ((event.clientX-x0)<0?Math.PI:0); rotate(angle); } </script> </head> <body> <v:line id="line1"></v:line> <v:arc startAngle="90" endAngle="180" id="arc1" filled="false" /> <v:rect style="width:200px; height:120px;"> <v:fill type="gradient" color="red" color2="blue" id="fill1" colors="30% yellow,70% green" method="Linear" FocusSize="0.001,0.001" Opacity="60%" Opacity2="100%" FocusPosition="50%,50%" /> </v:rect> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

类似photoshop的曲线拖拽 拖动可保存同时颜色变化

类似photoshop的曲线拖拽拖动可保存同时颜色变化