[js] 精灵图像 与 Dom / CanvasRenderingContext2D 渲染 (上)

·  阅读 119
[js] 精灵图像 与 Dom / CanvasRenderingContext2D 渲染 (上)

看群友发的juejin.cn/post/705222… 看得我发懵,但是我是感觉有很多不友好的代码的。

啊啊啊我是超威蓝猫!!!

我没看懂就口嗨了,罪过罪过。

为了给口嗨赎罪,我要把我曾经写的一个东西重构代码来写个文章,并且注册了这个帐号.

Yeeeart!

按照软件工程开发四步:问题定义、需求分析、软件架构、代码细节

问题定义:

我需要一个精灵图像动画、要能控制触发执行动画

需求分析:

首先我需要渲染精灵图像

然后我需要用某种方法执行精灵图像的元素改动(贴图坐标改动),我需要自由控制精灵图像的开始、 暂停移动位置,一组精灵动作后是否需要回调函数。

精灵图可能有多组不同的图形,有可能图元使用的贴图的大小不一需要处理.

比如可能会出现下图这种,甚至可能更复杂的 image.png

软件架构:

精灵图像需要被渲染,抽象一个类来渲染精灵图像。

我要有精灵图的数据,此处是使用url来获取精灵图 我要有精灵图的元素的数量
加入偏移量来处理上图那个情况
渲染

规划执行动画的路径的类

需要控制动作开始、结束等,操作精灵图类并执行渲染

代码细节:

下文将会使用的精灵图

image.png

精灵图像渲染类

属性:

image.png

渲染

由于js自身不带有重载函数功能,所以我在此处使用了一个判断

image.png

dom中渲染精灵图像

我选择使用dom元素的 background 系列样式去实现,在此之前我们需要得到dom元素的宽高用于计算。具体代码:

image.png 就是简单的计算坐标和宽高然后赋值,实际简单!
如果看不懂数学的话,我下面会说一下渲染的思路。

CanvasRenderingContext2D中的精灵图像

在这个2d渲染上下文中,需要使用 ctx.fillStyle=canvasPattern 。不知道这是啥的,快去mdn拜读罢! developer.mozilla.org/zh-CN/docs/… 为了使用这个东西渲染精灵图像,我们需要用到变换矩阵
image.png image.png
矩阵计算还算是挺复杂的,此处不多赘述,具体请看 gitee.com/darth_ef/Pr…

image.png 南无三,何等无慈悲的注释!

依旧是简单的计算然后让贴图作出变换,不过要注意的是,这个img必须加载完成了才能正常得到canvasPattern!

数学计算方式和demo

没有demo和画图的话我也很难说清楚这几个偏移量是什么玩意。 首先是偏移量是什么其实在构造函数有写注释

image.png

var sp=new Sprites(8,8,"./SpritesMap.png",0.1,0.1,0.1,0.1);
复制代码

image.png 简单说就是整张图片算1。 与其说是处理了偏移后中间还剩8*8的精灵图元素,不如说是我需要中间的8*8才设置偏移量都为0.1

有些人可能会说用这种浮点数计算会出现误差云云,但大部分情况下这微小的误差其实是可以忽略的,因为显示器最小就渲染一像素.
最后是效果 image.png

image.png

image.png

完整代码请看gitee.com/darth_ef/Pr…
需要转载的和想cv的,请遵守协议 gitee.com/darth_ef/Pr…

有关动画部分明天再写

分类:
前端
标签:
分类:
前端
标签: