首页 > 代码库 > Canvas中图片翻转的应用
Canvas中图片翻转的应用
很多时候拿到的素材都是单方向的,需要将其手动翻转来达到需求,比如下面这张图片:
它是朝右边方向的,但还需要一张朝左边方向的,于是不得不打开PS将其翻转然后做成雪碧图。如果只是一张图片还好说,但通常情况下图片可能有多个动作,这种情况下工作量就大大提升了,非常费时费力。好在canvas中提供了scale
方法用于翻转图片。在canvas的说明文档中,scale被介绍成用于放大或缩小图片,比如
scale(2,1)是图片宽度放大两倍,scale(1,0.5)是图片高度缩小为0.5倍,但有一个情况很少被提及,就是参数为负数的情况。现在有如下代码:
scale(-1,1);
这表示将图片水平翻转(同理Y轴上的负值表示垂直翻转),而翻转的参考点则是坐标原点:
不过仅仅这样是不能工作的,因为翻转过后的图片被绘制在了canvas画布的外边,需要将位置修正为-imageWidth,这样才能将坐标恢复到翻转前的位置。
以下是运行效果(用鼠标点击以获得焦点,使用键盘A/D键左右移动):
这种方法虽可减少工作量,但对性能有一定损耗,毕竟翻转图片还是要做一定量的计算的,使用时需要权衡一下。
Canvas中图片翻转的应用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。