目录

        前言

        图片和文字渲染坐标问题揭秘

        图片水印

        文字水印

        二者的区别

        综上所述




前言

图片和文字是我们日常生活与工作中接触到的最普遍的视觉元素,每天任何时间任何地点几乎都能看到它们,在接触过程中你没有想过它们是如何展示的,特别是在网页中是如何渲染的?


图片和文字渲染坐标问题揭秘

当我们在画布canvas上渲染图片和文字水印时,一般会有x坐标、y坐标、大小等相关参数,它们是怎么使用的呢?我们都知道,屏幕显示渲染内容的坐标原点在左上角,那么文字和图片在屏幕渲染时的机制是否完全一样呢?如果不一样,又有什么不同呢?今天我们就带大家来一探究竟。


图片水印

如果渲染图片水印的话,一般会有x坐标、y坐标、宽、高等参数,具体含义我们都比较好理解。

canvas渲染图片相关的参数可以参考下面的表格:

参数 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)

先来看一张图片水印的效果图,我们在左上角(10,10)的位置放了一个宽和高都是50像素的logo图片,如下图所示:

图片和文字展示时也有是坐标系的呦!-LMLPHP

PS:左上角的logo是我CSDN账号的头像,是不是很可爱?太自恋了。。。


文字水印

如果渲染文字水印的话,一般会有x坐标、y坐标、fontSize(字体大小)等参数,这些参数也很好理解。

canvas渲染文字相关的参数可以参考下面的表格:

描述
font-style

规定字体样式。可能的值:

  • normal

  • italic

  • oblique

font-variant

规定字体变体。可能的值:

  • normal

  • small-caps

font-weight

规定字体的粗细。可能的值:

  • normal

  • bold

  • bolder

  • lighter

  • 100

  • 300

  • 500

  • 700

  • 900

font-size / line-height 规定字号和行高,以像素计。
font-family 规定字体系列。
caption 使用标题控件的字体(比如按钮、下拉列表等)。
icon 使用用于标记图标的字体。
menu 使用用于菜单中的字体(下拉列表和菜单列表)。
message-box 使用用于对话框中的字体。
small-caption 使用用于标记小型控件的字体。
status-bar 使用用于窗口状态栏中的字体。

再来看一张文字水印的效果图,我们在左上角(10,10)的位置放了一个大小10像素的单词(hello),如下图所示: 

图片和文字展示时也有是坐标系的呦!-LMLPHP

注意:这里添加的文字和图片都是硬水印,不是传统的软水印,有很高的安全性。


二者的区别

那么图片和文字二者的渲染机制有什么不同呢?因为控制参数基本一样,几乎看不出有什么区别。接下来看一个实验,我们在同一个位置,同时渲染文字和图片水印,如下图所示:

图片和文字展示时也有是坐标系的呦!-LMLPHP

怎么样?有没有发现问题?是的,图片和文字居然没有相互叠加!!!,我们可是选择的相同位置呀!是的,这就引出了二者渲染机制上一个非常大的区别。

比如我们选择了(10,10)坐标点,开始渲染图片和文字。其中,文字在该坐标点的上侧,图片在该坐标点的下面,如下图所示:

图片和文字展示时也有是坐标系的呦!-LMLPHP

其实,二者的不同主要体现在渲染方向上,文字的渲染方向是从左下角向右上角,图片的渲染方向是从左上角向右下角。

形象一点的话,可以看下图:

图片和文字展示时也有是坐标系的呦!-LMLPHP

好了,我们再进一步验证上面的结论,我们保持文字和图片水印的位置不变,把文字大小从10px增大到50px,图片宽高从50px增大到100px。按照上面的结论,我们可以猜测图片水印大小扩大一倍且展示完全;文字水印也变大了,但是因为渲染方向的缘故,我们只能看到hello单词的下半部分,因为上半部分被隐藏了。那事实是不是这样呢?我们看一下效果吧:

图片和文字展示时也有是坐标系的呦!-LMLPHP

漂亮!我们的结论是正确的。


综上所述

图片和文字水印在渲染方向上有本质的不同,前者向右下角生长,后者向右上角生长。

PS:说到这里,让我想到了堆和栈,一个向高地址增长,一个向低地址增长。


本文分享自微信公众号 - 玩转音视频(gh_5da216074f34)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

05-04 20:14