当前位置:网站首页>Uncover the secret! Millions of pixel color filling solutions. Blessed are those who want to develop picture book applications!
Uncover the secret! Millions of pixel color filling solutions. Blessed are those who want to develop picture book applications!
2021-08-08 15:42:18 【wx5d33905354cb6】
Magic eraser
Hello everyone , I am the aroma of malt , A developer who likes to solve products to solve requirements .4 year Cocos Creator Little games 、 education App Development , Today, I'd like to share with you some of my little experience accumulated in my work Demo.
- How to get a picture of RGBA data , What happens if you change this data ?
- Draw lines and eraser , The pain point is solved by drawing lines through pixels ( Eraser function , And the background is not pure white )
- Color a picture , Children's games
This case Demo The code has been shared to Cocos Store Thank you for your support !
One 、 Discoloration principle
During the job interview in , Have you ever been asked such a question : You know one 1024 * 1024 How much memory does a graph of size occupy ?
If you don't want to go , Please open it step by step A_Test_Demo, Pictured : Input X value = (0-255 transparency ) Set the transparency of some areas of the picture .


I don't know if you've ever played the screenshot in the official case , without . Refer to the official case demo, There is such a passage :
We know from this method that , We return picData It's a one-dimensional array , The contents are as follows :
The length of the array is width * height * 4, It's the data of a picture . The data can then be reset to a new image , The code is as follows :
Two 、 Magic eraser
Be careful : If you don't understand A_Test_Demo This Demo, Please don't open the project !

The project pencil and eraser are made through touchMove The distance is greater than 5( Project tuning values 、 Draw a line according to this value ) To get two points .
this.startPoint and this.endPoint, Note that remember to transform the world coordinates, with the upper left corner as the starting point to transform . Back to width * height * 4 Back to our width * height * 4( From the picture above test_demo) Array , We change the coordinate system to the upper left corner to calculate . Here's the picture

After we dynamically get two points , In obtaining this.startPoint and this.endPoint A point on a straight line of two points ( Horizontal line , A straight line , Oblique line ) The figure below shows two cases of diagonal lines :
OK, When we get the corresponding point , In the pencil line thickness, such as 10( Dynamic setting ) Stack the points .
- Horizontal line : Get the horizontal line point plus
10 / 2 = 5
Go in at one point - A vertical bar : Get the left and right addition of each point of the line
10 / 2 = 5
Go in - Oblique line : The line above 1, Add and subtract at each point ; The line above 2, Add and subtract around each point
10 / 2 = 5
A little bit , As shown in the figure below :

When you get these points, it turns into [R,G,B,A,R,G,B,A,R,G,B,A..............]
My index pencil , Just change RGB value , The eraser changes A Value , Then we can achieve our pixel line drawing and eraser function .
The demo Just learning demo, A lot of values in it are fixed by me , Students want to apply it to practice demo It needs to be improved by itself , And the sawtooth needs to be tuned getPixel Method , The method is just enlightenment .
3、 ... and 、 Coloring principle
Next, let's move tianSe Colouring demo, And open the scene . If you don't understand A_Test_Demo, and RubberAndDraw Please don't open the project .

http://gameview.creator-star.cn/maiyadexiangqi/tianse/index.html
Pictured : There are large and small non-standard graphics in our scene , We get the touch points .

Starting at that point, traverse , Top left bottom three points , Top left bottom , Top left bottom , Up, right, down , Up, right, down, etc RGB The value is the value around the ellipse or square, etc , Get the coordinate value , Do the above demo1、demo2 Stop again .
Once again remind : If you don't understand the above demo1 and demo2 Please don't look at the demo! Please be there. Cocos Store Search for : Colouring 、 Pixel brushes


版权声明
本文为[wx5d33905354cb6]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/08/20210808153459094u.html
边栏推荐
- Configuration of Druid database monitoring in project
- Enq: TX - allocate ITL entry
- What technical books do you usually read?
- What is the difference between the consistency of cap theorem and acid property in general affairs?
- Can you use the first partition of a disk as a bare device?
- [DB interview 328] which of the following statements about data model is wrong ()
- Special topic of SAP screen Designer: writing control code (3)
- How to realize the simultaneous streaming of internal and external networks?
- How can the cloud gateway management platform on easynts manage remote devices?
- Analysis of the failure of easynvr using onvif to detect Dahua IPC
猜你喜欢
-
Build technology ecology together! Tsingsee Qingxi video won the annual popular author of Tencent cloud + community
-
How to optimize the frame loss of webrtc live streaming through ffmpeg playback?
-
How to solve the problem that easyscreenlive live on the same screen component cannot be started normally?
-
Recent online two pit father pot!
-
Meituan programmer's wife is really aggrieved
-
Dry goods: SQL Server database generates PDM file based on PowerDesigner reverse engineering
-
Hongmeng OS first time experience!
-
The button style of bootstrap skill points
-
Many people say that stored procedures are difficult? It's enough to read this article carefully
-
Wang Baoxing: Autumn games
随机推荐
- Store 80 million students' scores, how to count the average score, high performance
- The famous domestic browser, which once claimed to be free forever, launched the VIP membership mode, and netizens made a lot of noise
- [PC tool] great God level code annotation, beautiful and practical code annotation tool, code logo tool
- [DIY] how is a children's toy named "story chicken" made with raspberry pie 3B +
- [DIY] the cheapest Arduino thermometer in DIY
- [DIY] may be the simplest and most economical solution for household hygrometers
- [DIY] may be the most practical and cheapest Arduino Thermohygrometer solution
- [Arduino] DIY Music Player, Arduino playing wav music, trmpcm library testing and use
- [DIY] complete design scheme of practical energy saving voice controlled temperature and humidity meter
- Overview of open source distributed storage architecture
- Data warehouse slow change dimension SCD? All you want to know is here
- Data warehouse slow change dimension SCD? All you want to know is here
- Weekend Sharing | effort is only a small part of success
- Weekend Sharing | effort is only a small part of success
- How to download the video of wechat video number in April 2021? It's not too simple
- Decryption | why is what I catch different from what the browser sees?
- Baidu network disk sharing link second hanging? Try this artifact
- Follow the time machine back to the past and look at Baidu / Tencent / Taobao / Google in 2005
- [DIY activity] let's make a demo of multi network card based on art PI
- Powerbi will be updated in March 2021. Several changes you should know
- Overview and recommendation | investigation and classification of Gan in CV vision
- ACM top issue receiving overview of GaN
- Live broadcast Preview: n postures of WiFi distribution network
- PHP full stack Learning Notes 6
- Please keep a low profile, this time it's forced!!!
- Integration: Continuous Integration & code quality platform (I)
- Dis Tanabata, work together
- Yesterday, I accidentally leaked the secret of Baidu online disk