首页 文章 精选 留言 我的

精选列表

搜索[文档处理],共10000篇文章
优秀的个人博客,低调大师

图形处理:给 Canvas 文本填充线性渐变

作者:凹凸曼 - Barrior 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。 猜想与答案 给出两个答案: 正确答案是图二,因为这样得出来的坐标生成的渐变最紧接文本矩形边界,它的运动轨迹如下动图: (图来源:Do you really know CSS linear-gradients) 渐变起点与终点坐标的计算 所以,渐变的起点与终点坐标该怎么计算呢?答: 先求得起点与终点的长度(距离)。 根据长度与文本矩形的中心点坐标分别计算出起点与终点坐标。 线性渐变长度的计算 W3C 给出了一个公式(A 表示角度): gradientLineLength = abs(W * sin(A)) + abs(H * cos(A)) 不过,该公式主要应用于 CSS 的线性渐变设置,即以 12 点钟方向为 0°,顺时针旋转。 而我们需要的是以 3 点钟方向为 0°,逆时针旋转,即公式为: gradientLineLength = abs(W * cos(A)) + abs(H * sin(A)) // 半长: halfGradientLineLength = (abs(W * cos(A)) + abs(H * sin(A))) / 2 那么这个公式是怎么来的呢?以下是笔者的求解: 由图可得以下方程组: 因此可推导出: 化简后为: 所以 c1 + c2 为: 由三角函数平方公式知:cos(A) * cos(A) = 1 - sin(A) * sin(A), 代入 c1 + c2: 第一步化简后: 最后的结果就是: 因为 sin, cos 在函数周期内存在负值(见下面角度对应的三角函数周期图),所以线性渐变的长度需要取绝对值。 至此,我们知道了线性渐变长度,文本矩形的中心点坐标很好算,即: centerX = X + W / 2 centerY = Y + H / 2 所以,起点与终点的坐标分别为: startX = centerX - cos(A) * halfGradientLineLength startY = centerY + sin(A) * halfGradientLineLength endX = centerX + cos(A) * halfGradientLineLength endY = centerY - sin(A) * halfGradientLineLength 看看最终效果 经验注释 进行三角函数计算时,应尽量避免先用 tan, 因为 tan 在其周期内存在无穷值,需要做特定的条件判断,而 sin, cos 没有此类问题,代码书写更为简洁清晰并且不会因疏忽产生错误,见下面三角函数与角度的对应关系周期图。 参阅: Do you really know CSS linear-gradients? MDN linear-gradient W3C - CSS Images Module Level 3 # linear-gradients 欢迎关注凹凸实验室博客:aotu.io 或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

资源下载

更多资源
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题,腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构,目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux

Rocky Linux(中文名:洛基)是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版,作为CentOS稳定版停止维护后与RHEL(Red Hat Enterprise Linux)完全兼容的开源替代方案,由社区拥有并管理,支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性,采用模块化包装和SELinux安全架构,默认包含GNOME桌面环境及XFS文件系统,支持十年生命周期更新。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册