Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

增加了搜索功能和点击查看功能 #28

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from

Conversation

SChen1024
Copy link

对这个项目十分感兴趣,但是感觉没有搜索功能比较麻烦, 这边 自己添加了点功能, 不过这边不会使用gulp 打包, 而且似乎这边使用yarn 之后, 稍微改动了 package文件,

ps: 第一次写js 的程序,很多不足 希望能理解

功能展示

  1. 添加了搜索框,输入 6位 hex 值可以找到最接近的颜色 使用 RGB 三色的绝对值最小值来确定
  2. 左上角的系列做了可点击, 点击系列颜色可以显示细节,
  3. 搜索使用的form 进行get 然后通过url 实现页面搜索功能
  4. 程序写了较多注释, 且最开始考虑在相应的颜色位置生成一个标记来人工判断的, 后面寻找颜色最接近的结果显示

搜索截图

后续

  1. 不知道这边的数据怎么添加的,以及这些色号是怎么来的,
  2. 后续可能要做一个点击锁定的功能吧,每次点击颜色之鼠标移动就换成其他颜色了,

@Ovilia
Copy link
Owner

Ovilia commented Nov 13, 2019

感谢!我之后详细 review 一下,请先把两个 yarn 文件删一下,谢谢!

@SChen1024
Copy link
Author

这边是要 关掉这里的pr 重新 提吗,, 这边不太会操作 这个 pr
而且 这边网页自动部署到了 自己的站点上, 似乎是 github page 自己的问题
你可以看下链接 https://schen1024.github.io/lipstick/ 测试一下

移除 yarn 文件 就是自己取消跟踪后 加到了 忽略文件中,

@@ -107,8 +145,31 @@ <h1>口红颜色可视化</h1>
<script src="dist/lib/zepto.min.js"></script>
<script src="dist/lib/zrender.min.js"></script>

<!-- <script src="src/index.js"></script> -->
<script src="dist/index-min.js"></script>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里需要使用 gulp处理过的文件吗, 这边测试 使用的本地文件

Comment on lines +153 to +168
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}

// 获取参数之后 如果有效 标识出来颜色值
let color = getQueryVariable("color");
if(color != false) {
showSearchResult("#"+color);
}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里 get 的参数 发送到js 中进行处理

Comment on lines +386 to +406
function getColorCoord(color,minMax) {
var hsl = colorHexToHsl(color);
return getHslCoord(hsl,minMax);
}
// #hex 值转变为 hsl 值
function colorHexToHsl(color) {
color = color.charAt(0) == "#" ?color:("#"+color); ///< 如果第一位是# 就不加了
var hsl = tinycolor(color).toHsl();
hsl.l *= 100;
return hsl;
}
// 根据 hsl 获取座标值
function getHslCoord(hsl,minMax) {
var hue = encodeHue(hsl.h);
var light = hsl.l;
return {
x: (hue - minMax.minHue) * width / (minMax.maxHue - minMax.minHue) / bgDpi,
y: height / bgDpi - (light - minMax.minLight) * height / (minMax.maxLight - minMax.minLight) / bgDpi
};

}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里其实可以放弃,因为之前考虑根据颜色显示一个标识符号, 后来换成了 找到最接近的颜色显示 减少了处理过程

Comment on lines +504 to +508
// 设置点击链接
// el.setAttribute('onclick',
// "window.location.href=\'http://"+window.location.host + window.location.pathname +"?color=" +siblings[i].color.substr(1) + "\';return false");

el.setAttribute('onclick','showSearchResult(\"'+siblings[i].color+'\")');
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一开始考虑使用点击 使用url 发送, 这边换成了 点击直接触发函数 渲染显示了, 减少了处理

@Ovilia
Copy link
Owner

Ovilia commented Nov 13, 2019

这边是要 关掉这里的pr 重新 提吗,, 这边不太会操作 这个 pr
而且 这边网页自动部署到了 自己的站点上, 似乎是 github page 自己的问题
你可以看下链接 https://schen1024.github.io/lipstick/ 测试一下

移除 yarn 文件 就是自己取消跟踪后 加到了 忽略文件中,

不需要关掉,我看你已经移除了~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants