前言
今天主要介绍一下web端颜色拾色器吸管工具的使用。ued需要在页面中用吸管吸取页面中的颜色,类似ps等工具里面的吸管工具,这个在web端网页中如何实现呢?
假如需要吸取桌面上面的任何颜色,最好使用原生api的方式,下面主要介绍两种原生方式的实现。
EyeDropper api实现
简单代码实现如下
今天主要介绍一下web端颜色拾色器吸管工具的使用。ued需要在页面中用吸管吸取页面中的颜色,类似ps等工具里面的吸管工具,这个在web端网页中如何实现呢?
假如需要吸取桌面上面的任何颜色,最好使用原生api的方式,下面主要介绍两种原生方式的实现。
简单代码实现如下
前段时间,项目中用到html5音频采集,主要是和微信录音一样,流程是按住说话,右侧滑动可以音频转文字,左侧滑动撤销。关于按住说话及左右侧滑动交互,相对简单,主要是运用了onTouchStart,onTouchMove,onTouchEnd三个事件完成。我之前文章也有过模仿微信语音播放效果动画,其中左右侧滑动位置主要是根据 e.targetTouches[0].pageX,和 e.targetTouches[0].pageY来完成的。本文着重讲解一下html5音频采集解决方案。
之所以叫解决方案,因为这里有涉及了音频采集的各种问题,例如音波,格式转换,录制格式,多段音频拼接,多个语音合成等等。语音采集我主要用了。
音频采集可以利用navigator.mediaDevices.getUserMedia({ audio: true }),来自己手动采集。 判断有无权限及开启权限可以如下代码
之前在 LESS、SASS 等预处理器中嵌套写法,现在原生css竟然支持了哈,从chrome112开始支持!下面尝鲜看看语法!
div {
& > p {
color: red;
}
&:hover {
color: yellow;
}
}
其语法规则大致如下:
今天将解决 transform导致文字 的模糊问题。 那么?什么时候会触发这种问题呢?在 Google 上,其实我们能搜到非常多类似的案例,总结而言:
一、当文本元素的某个祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作时,容易出现这种问题
当然,这只是必要条件,不是充分条件。继续深入探究,会发现,必须还得同时满足一些其它条件:
二、元素作用了 transform: translate() 或者 transform: scale() 后的计算值产生了非整数
例如:
.container {
position: absolute;
width: 1104px;
height: 475px;
top: 50%;
transform: translateY(-50%);
// ...
}
由于元素的高度为 475px,translateY(-50%) 等于 237.5px,非整数,才导致了内部的字体模糊。
但是,需要注意的是,并非所有产生的非整数都会导致了内部的字体模糊。
三、文本内容是否模糊还与屏幕有关,高清屏(dpr > 2)下不容易触发,更多发生在普通屏幕下(dpr = 1)
之前讲解过psd文件上传,今天分享一下如何解析文字特效,字体大小,字体等等,顺便讲解如何解析路径。
上一节关于矩阵,我已经写了psdjs关于字体解析的transform矩阵,因此,我们可以根据这个矩阵计算出ps里面字体的大小。
解析字体大小的流程:
第一步:取出sizes里面的最大值,psd解析sizes是一个数组,因为ps里面可以针对一个文本框文字设置不同的字体大小,假如你解析可以支持不同字体大小的解析,可以根据length和sizes,或者文本框里面每个文字的字体大小,假如不那么精准,可以获取其中最大的一个就可以了。
第二步:通过上一节里面的矩阵,或者字体的变化大小 Math.round(fsize * item.text.transform.yy)
第三步:纠正,假如解析的字体大于文本框高度,或者小于文本框的一半,那么字体大小应该还是有问题的,可以进一步纠正,可以在字体大于图层的高度的时候,设置字体高度为图层高度。