图形处理:给 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?
W3C - CSS Images Module Level 3 # linear-gradients
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Blind_pwn之格式化字符串
可能需要提前了解的知识 ● 格式化字符串原理&利用 ●got & plt 调用关系 ●程序的一般启动过程 原理 格式化字符串盲打指的是只给出可交互的 ip 地址与端口,不给出对应的 binary 文件来让我们无法通过 IDA 分析,其实这个和 BROP 差不多,不过 BROP 利用的是栈溢出,而这里我们利用的是无限格式化字符串漏洞,把在内存中的程序给dump下来。 一般来说,我们按照如下步骤进行 ●确定程序的位数(不同位数有些许差别) ●确定漏洞位置 ●利用 使用条件 ●可以读入 '\x00' 字符的 ●输出函数均是 '\x00' 截断的 ●能无限使用格式化字符串漏洞 32 位利用手法 实验环境准备 程序源码如下: #include <stdio.h> #include <string.h> #include <unistd.h> int main(int argc, char *argv[]) { setbuf(stdin, 0LL); setbuf(stdout, 0LL); ...
- 下一篇
SEO Tools V2.0.2 发布
SEO Tools 是一款为了提高SEO运维人员生产力的自动化办公工具,将一些重复的、机械化的工作内容交给程序处理。 我们的小伙伴需要运维五六百个网站,他需要经常性的去打开网站,查看关键词、描述信息、备案、网站状态等工作内容,每周都要用大量的时间做这件事。但是通过我们的SEO Tools可以抓取并统计所有维护网站的关键词、网站状态、网站是否备案等数据,生成excel表格,可以在几分钟内获取到异常网站有哪些,然后针对性的处理。 SEO Tools 目前提供了三个模块的内容:百度爱采购、找商网、百度优化,下面分别详细介绍这几个模块对应的工具。 1、百度爱采购 我们的小伙伴需要同时为几百个客户的店铺进行优化工作,每个店铺又有一百多个产品排名需要维护。每天需要通过在爱采购上输入产品关键词,查看维护客户的产品排名情况,然后将排名情况记录下来,汇报给客户。在这种工作模式之下,工作的重复性高,并且人工效率不高,所以针对这种情况,为SEO小伙伴提供了以下两种查排名工具。 1.1、百度爱采购·查排名 查排名可以帮助我们的小伙伴统计自己维护店铺的所有公司的关键词排名。以前只能每周查几个客户,现在可以通过工...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS8编译安装MySQL8.0.19
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS关闭SELinux安全模块
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程