Applets picture generation component

Because we can not share the small program directly to the moments of friends, but there are many needs to share to the moments of friends. The current practice of the industry is to use the Canvas function of the small program to generate a picture with two-dimensional code, and then guide users to download the picture to the local and then share to the moments of friends. However, the Canvas function of small program is difficult to use. In order to draw a simple picture, it is often necessary to write a lot of Boilerplate code. If a small program contains multiple drawing requirements at this time, the cliff to crazy. In addition, there are many drawing pits on the Canvas, which will definitely drive you crazy.

Here are a few small application Canvas pits:

1. Canvas drawing uses PX, while RPX is generally used for relative layout in small programs.

2, small program drawCanvas method, in IDE can be directly set up the network picture for drawing, but in the real computer set up the network picture useless.

3. The canvasContext. Clip method has a bug in wechat 6.6.6 or below on iOS devices, which will cause the restore method used below the clip to become invalid.

The painter plan

Considering that there are so many requirements for generating images in small programs, and the Canvas generation method is so difficult to use and confusing. Then we thought about whether we could make a library that can easily generate images, and also shield those pits that directly use Canvas. So we launched the “Painter Project” to dynamically render and draw images using JSON data. The overall architecture of Painter library is as follows:

First, we define a set of drawing JSON specifications that developers can build on demand to generate the image’s Palette, which is then passed to the Painter during application execution. The Painter calls the Pen, draws the corresponding image from the Palette and returns it.

How To Use

Run the example

This project is managed by subModule. The first time you clone code, add the –recursive parameter.

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive
Copy the code

After the code download, open with a small program IDE can be used.

Using Painter

The introduction of the code

You can introduce the Painter component as a subModule by executing the following command under the main item. The recommendation is in the Components directory.
```
git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter
Copy the code
```
Introduced as a custom component, note that the directory is where the code introduced in the first step resides
```
"usingComponents":{
  "painter":"/components/painter/painter"
}
Copy the code
```
The component receives the Palette field as the data source for drawing the pattern data, which exists in json form. It is recommended to use the method of “skin template” to pass the pattern data. The sample code is as follows:
```
<painter palette="{{data}}" bind:imgOK="onImgOK" />
Copy the code
```
After the data comes in, it will automatically draw. After drawing, you can bind imgOK or onImgErr events to get the successful picture or the reason for the failure.
```
bind:imgOK="onImgOK"
bind:imgErr="onImgErr"
Copy the code
```

The Palette specification

Just as you use the WXSS + WXML specification to draw, Painter needs to draw the image according to certain specifications. Of course, Painter’s drawing specification is much simpler than WXML’s.

Palette properties

A palette first needs to be given some holistic attributes

Background: can be a color value or a link to a network image. The default value is whiteCopy the code

The child View properties

Once we have the overall palette properties built up, we can add child Views to draw.

type	content	description	Its own CSS
image	url	Represents the address, local or network, of the image resource
text	text	The content of the text	FontSize: text size, color: font color (black by default)
rect	There is no	rectangular	Color: color
qrcode	content	Painting qr code	Background: Background color (default: transparent),

The layout properties

The View above, in addition to its own special properties, also has the following general layout properties

attribute	meaning
rotate	Rotation: Rotates by degrees clockwise. Default is no rotation
borderRadius	The degree to which the edges are rounded is round if the layout is square and the property is half width or height
Top, right, bottom, left	For example, in the CSS, top and left are 0 by default

Size is other

1. Currently, Painter supports two size units, PX and RPX, which represent the same meaning as in the mini program, so I won’t say more here.

2. The CSS properties of subviews currently support Object or array. So that means that you can extract the CSS properties shared by several child views. Let’s make the Palette cleaner.

3. Since our palette is json carried by JS, it means that you can easily add your own logic to each attribute. Some attributes can also be extracted separately and shared by multiple palette to be modular.

Take a chestnut

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ],
}
Copy the code

Draw as follows

License

Copyright (c) 2018 Kujiale

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Copy the code