揭秘！价值百万的像素填色解决方案，想开发绘本应用的有福了！

最新推荐文章于 2024-02-03 16:04:11 发布

晓衡的成长日记

最新推荐文章于 2024-02-03 16:04:11 发布

阅读量572

点赞数 1

文章标签：分布式存储移动开发 ios 微软 cocoa

本文链接：https://blog.csdn.net/6346289/article/details/115327602

版权

本文介绍了CocosCreator中获取和修改图片RGBA数据的方法，展示了如何实现像素画线和魔术橡皮擦功能。通过触摸事件获取点坐标，动态设置RGB和透明度来创建画线和擦除效果。此外，还探讨了图片内存占用及填色原理，并提供了相关Demo的链接供学习参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

魔术橡皮擦

大家好，我是麦芽的香气，一个喜欢解决产品来解决需求的开发者。4年Cocos Creator小游戏、教育App开发，今天给大家分享一些我在工作中积累的小经验Demo。

如何获取一个图片的 RGBA 数据，改变这个数据会发生什么？
画线和橡皮檫，通过像素画线来解决该痛点（橡皮檫功能，且背景不是纯白底图）
给一张图片进行填色，儿童小游戏

本案例Demo 代码已经分享到 Cocos Store 感谢大家的支持！

一、变色原理

在求职面试过程中，大家有没有在被问到这样一个问题：你知道一张1024 * 1024 大小的图占多大内存吗？

再如果不想去，请先移步打开A_Test_Demo，如图：输入X值 = （0-255透明度）将图片部分区域设置其透明度。

原图

修改部分透明

不知道大家有没有玩过官方案例里面的截图，如果没有。参考官方案例 demo，有这么一段：

/**
* 转化图片RGBA数据
* @param data 
* @param width 
* @param height 
* @returns 
*/
 private filpYImage(data, width, height): any {
        let picData = new Uint8Array(width * height * 4);
        let rowBytes = width * 4;
        for (let row = 0; row < height; row++) {
            let srow = height - 1 - row;
            let start = srow * width * 4;
            let reStart = row * width * 4;
            for (let i = 0; i < rowBytes; i++) {
                picData[reStart + i] = data[start + i];
            }
        }
        return picData;
    }

我们从该方法得知，我们返回的 picData 就是一个一维数组，内容如下：

[R,G,B,A,R,G,B,A,R,G,B,A,..............]

数组的长度为 width * height * 4，也就是一张图片的数据。该数据就可以重新设置一张新图片，代码如下：

createCanvas(picData) {
    let texture = new cc.Texture2D();
    texture.initWithData(picData, 32, 1663, 768);

    let spriteFrame = new cc.SpriteFrame();
    spriteFrame.setTexture(texture);

    let sprite = this.target.getComponent(cc.Sprite)
    sprite.spriteFrame = spriteFrame;
}