-
Notifications
You must be signed in to change notification settings - Fork 348
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
base: gh-pages
Are you sure you want to change the base?
增加了搜索功能和点击查看功能 #28
Conversation
感谢!我之后详细 review 一下,请先把两个 yarn 文件删一下,谢谢! |
这边是要 关掉这里的pr 重新 提吗,, 这边不太会操作 这个 pr 移除 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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里需要使用 gulp处理过的文件吗, 这边测试 使用的本地文件
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); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里 get 的参数 发送到js 中进行处理
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 | ||
}; | ||
|
||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里其实可以放弃,因为之前考虑根据颜色显示一个标识符号, 后来换成了 找到最接近的颜色显示 减少了处理过程
// 设置点击链接 | ||
// 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+'\")'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
一开始考虑使用点击 使用url 发送, 这边换成了 点击直接触发函数 渲染显示了, 减少了处理
不需要关掉,我看你已经移除了~ |
对这个项目十分感兴趣,但是感觉没有搜索功能比较麻烦, 这边 自己添加了点功能, 不过这边不会使用gulp 打包, 而且似乎这边使用yarn 之后, 稍微改动了 package文件,
ps: 第一次写js 的程序,很多不足 希望能理解
功能展示
后续