Shulou(Shulou.com)06/01 Report--

Today, Xiaobian will share with you the relevant knowledge points of how to generate picture library by Mini programs. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you will gain something after reading this article. Let's learn about it together.

Here are a few Mini programs Canvas pit:

1, Canvas drawing is px, and in Mini programs we usually use rpx for relative layout.

2, Mini programs drawCanvas method, in the IDE can be directly set up network pictures for drawing, but in the real machine set up network pictures useless.

3. The canvasContext.clip method has bugs in WeChat version 6.6.6 and below on iOS devices, which will cause the restore method used under the clip to fail.

Painter Project

Think of how many Mini programs need to generate images, and how difficult and deceptive Canvas generation methods are. Then we thought about whether we could make a library that could easily generate images, and also block those pits that directly use Canvas. So we started project painter-rendering dynamically and drawing images using json data.

First, we defined a JSON specification for drawing, so developers could build a palette to generate images on demand, and then pass the palette to Painter during the program. Painter will call Pen, draw the corresponding picture according to the contents of the Palette and return.

How To Use

operating example

This project is managed in submodule mode. The first time you clone code, you add the--recursive parameter.

git clone https://github.com/Kujiale-Mobile/Painter.git--Recursive code download, use Mini programs IDE can be used after opening.

Use of Painter

import code

The following command can be executed under the main project to introduce the painter component by way of submodule: Recommendations are in the components directory.

git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter

Introduced as a custom component. Note that the directory is where the code introduced in the first step is located.

"usingComponents":{ "painter":"/components/painter/painter"}

The component receives the palette field as the data source of drawing data. The pattern data exists in the form of json. It is recommended to use the method of "skin template" to pass it. The example code is as follows:

When the data is passed in, it is automatically plotted. After the drawing is complete, you can get the picture after success or the reason for failure by binding imgOK or onImgErr events.

bind:imgOK="onImgOK"bind:imgErr="onImgErr"Palette specification As you draw using the wxss + wxml specification, Painter needs to draw images according to certain specifications. Of course Painter's drawing specification is much simpler than wxml.

palette properties A palette first needs to be given some overall properties

background: It can be a color value or a link to a network image. The default is white width: width height: height borderRadius: rounded corners of the border (this property also applies to child views) views: it carries child views. When we build the overall palette property, we can add child views to draw it.

typecontentdescription has cssimageurl to indicate the address of the image resource, local or network textcontentfontSize: text size, color: font color (default is black) rect no rectangle color: color qrcodecontent draw two-dimensional code background: background color (default is transparent color), layout properties above View, in addition to their own special properties, there are the following general layout properties

Attribute meaning rotate, according to clockwise rotation degrees, the default does not rotate borderRadius boundary fillet degree, if it is square layout, this attribute is half width or height, then it is circular top, right, bottom, left If css is absolute layout, the default top and left are 0 size, that is, other 1, Painter currently supports two size units, px and rpx, the meaning of which is consistent with that of Mini programs, so I will not say more here.

2. The CSS attribute of the current child view supports object or array. This means that you can extract css attributes common to several subviews. Make the Palette simpler.

3, because our palette is json hosted in js, it means that you can easily add your own logic to each attribute. You can also extract some attributes separately and let multiple palettes share them to achieve modularity.

{ background: '#eee', width: '654 rpx', height: '400 rpx', borderRadius: '20 rpx', 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', }, } ],} The above is all the contents of this article "How to generate picture library by Mini programs." Thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.