一个简单的在线调色板

2024-02-25 20:58
文章标签 简单 在线 调色板

本文主要是介绍一个简单的在线调色板,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

找了一整天的调色板,都没有比较符合俺要求的。。。很郁闷,用别人的色彩算法自己搞了一个。。。恩,也可以去 http://www.x-bs.com 查看效果



源码如下:
<script>
var Panel_Name = 'C_pointer';

function getColor(prtX,prtY){
    var colorR = 0;
    var colorG = 0;
    var colorB = 0;
   
    if(prtX < 32){
        colorR = 256;
        colorG = prtX * 8;
        colorB = 1;
    }
    if(prtX >= 32 && prtX < 64){
        colorR = 256 - (prtX - 32 ) * 8;
        colorG = 256;
        colorB = 1;
    }
    if(prtX >= 64 && prtX < 96){
        colorR = 1;
        colorG = 256;
        colorB = (prtX - 64) * 8;
    }
    if(prtX >= 96 && prtX < 128){
        colorR = 1;
        colorG = 256 - (prtX - 96) * 8;
        colorB = 256;
    }
    if(prtX >= 128 && prtX < 160){
        colorR = (prtX - 128) * 8;
        colorG = 1;
        colorB = 256;
    }
    if(prtX >= 160){
        colorR = 256;
        colorG = 1;
        colorB = 256 - (prtX - 160) * 8;
    }
   
    if(prtY < 64){
        colorR = colorR + (256 - colorR) * (64 - prtY) / 64;
        colorG = colorG + (256 - colorG) * (64 - prtY) / 64;
        colorB = colorB + (256 - colorB) * (64 - prtY) / 64;
    }
    if(prtY > 64 && prtY <= 128){
        colorR = colorR - colorR * (prtY - 64) / 64;
        colorG = colorG - colorG * (prtY - 64) / 64;
        colorB = colorB - colorB * (prtY - 64) / 64;
    }
    if(prtY > 128){
        colorR = 256 - ( prtX / 192 * 256 );
        colorG = 256 - ( prtX / 192 * 256 );
        colorB = 256 - ( prtX / 192 * 256 );
    }
   
    colorR = parseInt(colorR);
    colorG = parseInt(colorG);
    colorB = parseInt(colorB);
   
    if(colorR >= 256){
        colorR = 255;
    }
    if(colorG >= 256){
        colorG = 255;
    }
    if(colorB >= 256){
        colorB = 255;
    }
   
    colorR = colorR.toString(16);
    colorG = colorG.toString(16);
    colorB = colorB.toString(16);
   
    if(colorR.length < 2){
    colorR = 0 + colorR;
    }
    if(colorG.length < 2){
    colorG = 0 + colorG;
    }
    if(colorB.length < 2){
    colorB = 0 + colorB;
    }
   
    return "#" + colorR + colorG + colorB;
}

function pickColor(obj,id){
    var ta = document.getElementById(id);
    if (document.getElementById(Panel_Name)){
        var PN = document.getElementById(Panel_Name);
    }else{
        var PN = document.createElement('div');
        var A_1 = document.createElement('div');
        var A_2 = document.createElement('div');
        PN.id = Panel_Name;
        PN.style.position = A_1.style.position = A_2.style.position = 'absolute';
        PN.style.width = '192px';
        PN.style.border = A_1.style.border = A_2.style.border = '1px solid black';
        PN.style.height = '154px';
        PN.style.background = 'white url(../Images/ColorPanel.jpg) top no-repeat';
        PN.style.left = '-1';
        PN.style.top = '-1';
        PN.style.zIndex = '6';
        A_1.style.bottom = A_2.style.bottom = '2px';
        A_1.style.width = A_2.style.width = '60px';
        A_1.style.height = A_2.style.height = '20px';
        A_1.style.left = '10px';
        A_2.style.left = '110px';
        A_1.innerHTML = A_2.style.background = obj.style.background;
        A_1.style.overflow = 'hidden';
        PN.appendChild(A_1);
        PN.appendChild(A_2);
        obj.appendChild(PN);
        obj.style.zIndex = '10';
        var xobj = document.getElementById(Panel_Name);
        xobj.onmouseout = function(){
            this.parentNode.style.zIndex = '5';
            this.parentNode.removeChild(this);
        }
        xobj.onclick = function(e){
            var NC = getColor((!e)?(event.x):(e.clientX - (this.offsetLeft + this.parentNode.offsetLeft)),(!e)?(event.y):(e.clientY - (this.offsetTop + this.parentNode.offsetTop)));
            obj.style.background = NC;
            ta.value = NC;
            this.parentNode.style.zIndex = '5';
            this.parentNode.removeChild(this);
        }
        xobj.onmousemove = function(e){
            var NC = getColor((!e)?(event.x):(e.clientX - (this.offsetLeft + this.parentNode.offsetLeft)),(!e)?(event.y):(e.clientY - (this.offsetTop + this.parentNode.offsetTop)));
            A_1.innerHTML = A_2.style.background = NC;
        }
    }
}
</script> <input type="text" οnclick="pickColor(document.getElementById('preview'),'setColor1');this.blur();" id="setColor1" />
<div οnclick="pickColor(this,'setColor1');" style="border: 1px solid black; width: 40px; height: 20px; cursor: pointer;" id="preview">&nbsp;</div>

这篇关于一个简单的在线调色板的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/746694

相关文章

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

hdu2289(简单二分)

虽说是简单二分,但是我还是wa死了  题意:已知圆台的体积,求高度 首先要知道圆台体积怎么求:设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下: #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ

电力系统中的A类在线监测装置—APView400

随着电力系统的日益复杂和人们对电能质量要求的提高,电能质量在线监测装置在电力系统中得到广泛应用。目前,市场上的在线监测装置主要分为A类和B类两种类型,A类和B类在线监测装置主要区别在于应用场景、技术参数、通讯协议和扩展性。选择时应根据实际需求和应用场景综合考虑,并定期维护和校准。电能质量在线监测装置是用于实时监测电力系统中的电能质量参数的设备。 APView400电能质量A类在线监测装置以其多核

usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

思路: 1. 用一个 hash[ ] 数组存放输入的数字,令 hash[ tmp ]=1 。 2. 一个自定义函数 check( ) ,检查各位是否为输入的数字。 3. 暴搜。第一行数从 100到999,第二行数从 10到99。 4. 剪枝。 代码: /*ID: who jayLANG: C++TASK: crypt1*/#include<stdio.h>bool h

uva 10387 Billiard(简单几何)

题意是一个球从矩形的中点出发,告诉你小球与矩形两条边的碰撞次数与小球回到原点的时间,求小球出发时的角度和小球的速度。 简单的几何问题,小球每与竖边碰撞一次,向右扩展一个相同的矩形;每与横边碰撞一次,向上扩展一个相同的矩形。 可以发现,扩展矩形的路径和在当前矩形中的每一段路径相同,当小球回到出发点时,一条直线的路径刚好经过最后一个扩展矩形的中心点。 最后扩展的路径和横边竖边恰好组成一个直

poj 1113 凸包+简单几何计算

题意: 给N个平面上的点,现在要在离点外L米处建城墙,使得城墙把所有点都包含进去且城墙的长度最短。 解析: 韬哥出的某次训练赛上A出的第一道计算几何,算是大水题吧。 用convexhull算法把凸包求出来,然后加加减减就A了。 计算见下图: 好久没玩画图了啊好开心。 代码: #include <iostream>#include <cstdio>#inclu

uva 10130 简单背包

题意: 背包和 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <queue>#include <map>

JavaFX应用更新检测功能(在线自动更新方案)

JavaFX开发的桌面应用属于C端,一般来说需要版本检测和自动更新功能,这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤: 读取本地应用版本拉取远程版本并比较两个版本如果需要升级,那么拉取更新历史弹出升级控制窗口用户选择升级时,拉取升级包解压,重启应用用户选择忽略时,本地版本标志为忽略版本用户选择取消时,隐藏升级控制窗口 2.

Go Playground 在线编程环境

For all examples in this and the next chapter, we will use Go Playground. Go Playground represents a web service that can run programs written in Go. It can be opened in a web browser using the follow