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

This article shows you how to use canvas to draw a picture Mini Program, the content is concise and easy to understand, absolutely can make your eyes bright, through the detailed introduction of this article hope you can get something.

Experience git clone https://github.com/kuckboy1994/mp_canvas_drawer

You can use your own appid if you want to configure it on your phone.

Two commonly used modes have been configured for you in the compilation mode:

Ordinary drawing, drawing a single sharing picture.

Multi-graph drawing, continuous drawing and sharing map

Demo

The left side is drawn by canvasdrawer and the right side is given by UI.

Use

Git clone https://github.com/kuckboy1994/mp_canvas_drawer to local

Copy the canvasdrawer in components to your own project.

Register the component on the use page

{"usingComponents": {"canvasdrawer": "/ components/canvasdrawer/canvasdrawer"}}

Add the following code to the page *. Wxml file

Painting is the json that needs to be passed in. The getImage method is a callback function after the drawing is completed, which returns the address of the completed picture in event.detail.

The painting in the current chestnut is briefly shown. For more details, please see API.

Painting (Click to expand)

API

An overview of object structure

The first layer of the data object requires three parameters: width, height, mode, and views. All the numbers in the configuration have no units. This means that canvas is drawing a scale map. The specific size of the display directly places the returned image path into the image tag.

The optional value of mode is same, and the default value is empty. Normally, try not to use it. If you want to use it, please see point 1 of QroomA.

There are currently three types of configurations that can be drawn: image, text, and rect. The properties of the configuration basically use the hump name of css, which is easy to understand.

Image (picture) attribute meaning default value optional value url drawing picture address, can be a local picture, such as: / images/1.jpegtop upper left corner from the top of the artboard distance left from the left side of the artboard distance width to draw how high 0height (text) attribute meaning default value optional content drawing text''(empty string) color color blackfontSize font size 16textAlign text alignment leftcenter, rightlineHeight line height The distance between the top left corner of the 20top text and the top of the artboard is useful only in multiline text. Whether the distance between the upper left corner of the 0left text and the left side of the artboard 0breakWord needs to wrap the maximum number of lines of falsetrueMaxLineNumber, the current property is valid only if you set breakWord: true. The content that exceeds the number of lines is displayed as. 2width and MaxLineNumber attributes are used together. Width is to achieve the width of the newline bolder whether to bold the underline effect noneunderline (underline), line-through (underline) rect (rectangle, line) attribute meaning default value optional value background background color blacktop from the top of the drawing board distance from the top left corner left to the left side of the drawing board distance width to draw how wide 0height to draw how high 0Q&A

Best practic

It is best to lock the screen when drawing, for example, when you click to draw.

Wx.showLoading ({title: 'drawing and sharing pictures', mask: true})

After the drawing is finished

Wx.hideLoading ()

For more information, please see / pages/multiple under the project.

[mpvue] since canvasdrawer does not actively render the drawing content, but leaves it to the caller to use image to display it, updating the data in mpvue will render the entire component, and then the canvasdrawer will be rendered again, resulting in an infinite loop, so by default I change the code to, if the passed painting is the same as before, the component will not render. Only the content that is different will be updated (triggering a callback), which I think is acceptable. Add the top-level parameter mode, mode: 'same' so that you can draw the same content. Do not use it in mpvue mode.

How to draw QR codes and Mini codes?

QR codes and mini program codes can be generated by calling the official interface of Wechat, which requires the cooperation of the back end.

Then go to type: image type to draw.

Related to the drawing process

The order in the views array represents the order of painting, and there will be overlays. Please pay attention to the users.

How to achieve a round avatar?

Due to the completion of some effects, such as: text underlining and so on. Must use WeChat Mini Programs rect-related interface, and clip interface does not feel good (there is bug). You can check the posts of WeChat Mini Programs community.

So, provides a solution: use a hollowed-out picture in the middle to cover the avatar.

Why doesn't the canvas drawer component directly display the canvas artboard and its contents?

Considering most of the scenes, we use them to save pictures locally or to display them.

Saving it locally and returning temporary files to the caller must be the best solution.

After the display is converted to an image, you can use all the display modes of the basic components of image, and you can also set width and height.

The above content is how to draw a picture Mini Program using canvas. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow 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.