Applet generated Poster: easy to create a poster map by json configuration

background

Since we can not share the applet directly to the circle of friends, but share the circle of friends and a lot of demand, the industry's current practice is to use a small program functions Canvas picture generated with a two-dimensional code, and then guide the user to download the picture and then to share local circle of friends. The applet Canvas feature is difficult to use, often in order to draw a simple picture, you have to write a bunch of boilerplate code, but also accidentally stepped on a variety of egg Canvas (pit). I think this time you feel certain of that.

analysis

Think small program has generated such a large number of pictures needs, Canvas generation method is so difficult to use and pit father. Can we do think that a picture can be easily generated, and also shield the direct use some libraries Canvas pit it? So we launched the "painter plan - to dynamically rendered by json data format and draw the pictures." Painter library's overall structure is as follows:

First, we define a set of drawing JSON specification, developers can build generate images according to the needs of the Palette (palette), then the program is running in the palette passed to Painter (artist). Painter calls Pen (Brush), returns after draw a picture corresponding Palette content.

Solve the problem

Can you develop a generation of plug-in library poster it?

First of all, only you need to provide a simple parameter configuration files
To get rid of some of the large and small pits small program encountered Canvas
There are stringent test session to solve the problem encountered in a variety of environments and a variety of models, and to provide a stable online version
Long-term maintenance, and have someone update iteration newer features

Introducing

Painter advantage

Full-featured, supports text, images, rectangles, qrcode type of view to draw
Full layout, support a variety of layout, such align (alignment), Rotate (rotation)
Support gradient color, shadow, simple configuration, easy to use, good compatibility
Support fillet, which pictures, rectangles, and the entire canvas support borderRadius to set the fillet
Leverage performance optimization, we load on the network to achieve a set of material picture LRU storage mechanism, without repeatedly download material picture.
Leverage fault tolerance, because some special cases can cause Canvas drawing incomplete. We are joined on the results of picture detection mechanism, if the drawing error will be redrawn.

How To Use

Run example

git clone https://github.com/Kujiale-Mobile/Painter.git

After Codes, dried IDE open to use the applet.

Note: Please select small projects program, non-small games, case no appid, so I can not run on the phone, if you need a real machine debugging, when you open the example, fill in your own little program id

The specific use of detailed tutorial GitHub address https://github.com/Kujiale-Mobile/Painter

Extension tool

Since writing or debugging configuration plus some trouble, so making a visual editing tool, drag directly edit the elements can be generated poster
visual drag and drop editing the code directly generate painter

Tools Experience address https://lingxiaoyi.github.io/painter-custom-poster/
Documentation tools https://juejin.im/post/5d8b20ba51882509615bca09