Using document flow layout in canvas to quickly generate friend circle sharing graph

Time:2020-11-6

background

A common requirement is that when developing wechat applets, the front end needs to generate posters to share. At present, the common solutions are as follows:

  1. usehtmlCanvasLibrary, using DOM to generate images
  2. The front end uses CTX API to draw one by one, or with the help of some drawing tools
  3. utilizepuppeteerBack end service, open the corresponding screen shot

Disadvantages:

  1. The library itself can not be used in applets, because DOM is involved, and there are various compatibility problems on the web side, such as some property is not supported
  2. This plan, um… Maybe that’s why programmers have less hair. Painstaking painting, in case of visual adjustment.. This project is time-consuming and hard to maintain. Although there are react canvas on the web and some tools for small programs, they only encapsulate the methods of drawing rectangle and text. For layout, the width, height and position still need to be calculated manually, and the pain points are not completely solved.
  3. This scheme is the most perfect for the front-end. It is also recommended that you use this scheme if you have the conditions. The front-end should write a page and put it on the service, and then hang up a service to visit this page to take a screenshot. Because the developers and screenshots are chrome, there is basically no compatibility problem. However, this solution will consume a lot of server resources. Each time a new browser tab is opened, and the screenshot takes a long time, which may be unacceptable to some companies.

brief introduction

Easy canvas realizes the creation of document flow in canvas, and can easily support component-based development, and there is no third-party dependence. As long as it supports standard canvas, it can be used. On the basis of realizing basic functions, support such as event and scroll view is added. The basic version supports applet and web.

Using document flow layout in canvas to quickly generate friend circle sharing graph

No picture, no truthDEMO
Project addresseasy-canvas
Vue component versionvue-easy-canvas

If you have used the render function, you must be familiar with the usage. The related properties are introduced in the project and in the examples. This article will not introduce more. The basic usage is as follows:

npm install easy-canvas-layout --save
import easyCanvas from 'easy-canvas-layout'

    //First bind the layer
    const layer = easyCanvas.createLayer(ctx, {
      dpr: 2,
      width: 300,
      height: 600,
      Canvas // applet environment must be passed
    })

    //Create node 
    // c(tag,options,children)
    const node = easyCanvas.createElement((c) => {
      return c('view', { 
        Styles: {backgroundColor: 'ා 000'}, // styles
        Attrs: {}, // attributes such as SRC
        On: {} // events such as click load 
      }, 
      [
        c('text',{color:'#fff'},'Hello World')
      ])
    })

    // mount
    node.mount(layer)

Used in Vue

In addition, the corresponding Vue components are encapsulated in the basic version. Compared with the render function, it is much simpler and easier to understand. The basic usage is as follows:

npm install vue-easy-canvas --save
import easyCanvas from 'vue-easy-canvas'
Vue.use(easyCanvas)
<ec-canvas :width="300" :height="600">
    <ec-scroll-view :styles="{height:600}">

    <ec-view :styles="styles.imageWrapper">
        <ec-image 
            
            :styles="styles.image" 
            mode="aspectFill"></ec-image>
        <ec-view :styles="styles.homeTitleWrapper">
        <ec-text>easyCanvas</ec-text>
        </ec-view>
    </ec-view>

    <ec-view :styles="styles.itemWrapper" 
        v-for="(item,index) in examples" 
        :key="index"
        :on="{
        click(e){
            window.location.href = host + item.url
        }
        }">
        <ec-view :styles="styles.title">
        <ec-text>{{item.title}}</ec-text>
        </ec-view>
        <ec-view :styles="styles.desc">
        <ec-text>{{item.desc}}</ec-text>
        </ec-view>
    </ec-view>

    </ec-scroll-view>
</ec-canvas>

Ending

This article mainly introduces the background and basic use of the project, but also in order to make an advertisement for myself:) the implementation principle and some pits will be written at the back. Welcome to exchange, thank you for reading!

Recommended Today

The course of using Chinese software of poedit Pro

Poedit pro (formerly known as poedit) is a free (professional version charge), open source and cross platform gettext class (. Po format, gettext is used in the application program for program internationalization) International Translation editor. It is also one of the most widely used software of the same type. At present, it is available in […]