Wechat applet: a JSON to help you complete the sharing of friends circle pictures

Writing in the front

Recently in the small program, found that the production of shared to the circle of friends pictures is a must for every project. Encountered pit more, write up also more cumbersome, also did not find similar components, so I began to write a.

demo

On the left is the drawing of the Canvasdrawer, and on the right is the UI drawing

features

• Easy to use — onejsonI’m done drawing the image
• Fully functional — satisfied90%Usage scenarios of
  • Draw text (line breaks, ellipses beyond content, hyphens, underscores, bold text)
  • Draw pictures
  • Draw a rectangle
  • Save the picture
  • Multiple drawing
  • .
• Small amount of code

experience

git clone https://github.com/kuckboy1994/mp_canvas_drawer
Copy the code

You can configure your own APPID to use on your phone.

The two most commonly used modes have been configured for you in compile mode:

• Ordinary drawing, drawing a single shared map.
• Multi-graph drawing, continuous drawing shared graph

use

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

• Copy the Canvasdrawer from Components to your project.

• Register the component on the Use page

  {
    "usingComponents": {
      "canvasdrawer": "/components/canvasdrawer/canvasdrawer"}}Copy the code

• Add the following code to the page **.wxml file

  <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
  Copy the code

  Painting is the JSON that needs to be passed in. The getImage method is a callback after drawing and returns the address of the finished drawing in event.detail.

• The painting of the current chestnut is briefly shown. See API for details

  Painting (Click to expand)

  
  

  {
    width: 375.height: 555.views: [{type: 'image'.url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg'.top: 0.left: 0.width: 375.height: 555
      },
      {
        type: 'image'.url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4 A/132'.top: 27.5.left: 29.width: 55.height: 55
      },
      {
        type: 'image'.url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg'.top: 27.5.left: 29.width: 55.height: 55
      },
      {
        type: 'text'.content: 'Your friend kuckboy'.fontSize: 16.color: '#402D16'.textAlign: 'left'.top: 33.left: 96.bolder: true
      },
      {
        type: 'text'.content: 'Found a good goods, invite you to take 0 yuan free! '.fontSize: 15.color: '#563D20'.textAlign: 'left'.top: 59.5.left: 96
      },
      {
        type: 'image'.url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg'.top: 136.left: 42.5.width: 290.height: 186
      },
      {
        type: 'image'.url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg'.top: 443.left: 85.width: 68.height: 68
      },
      {
        type: 'text'.content: 'Authentic MAC MAC Delicious Red Gift Box Birthday Lipstick Chili Chili Grapefruit Lover'.fontSize: 16.lineHeight: 21.color: '# 383549'.textAlign: 'left'.top: 336.left: 44.width: 287.MaxLineNumber: 2.breakWord: true.bolder: true
      },
      {
        type: 'text'.content: '￥0.00'.fontSize: 19.color: '#E62004'.textAlign: 'left'.top: 387.left: 44.5.bolder: true
      },
      {
        type: 'text'.content: Original Price :￥138.00.fontSize: 13.color: '#7E7E8B'.textAlign: 'left'.top: 391.left: 110.textDecoration: 'line-through'
      },
      {
        type: 'text'.content: 'Long press the QR code in the identification map to help me cut down a price..fontSize: 14.color: '# 383549'.textAlign: 'left'.top: 460.left: 165.5.lineHeight: 20.MaxLineNumber: 2.breakWord: true.width: 125}}]Copy the code

API

{
  width: 375.height: 555.views: [{type: 'image'.url: 'url'.top: 0.left: 0.width: 375.height: 555
    },
    {
      type: 'text'.content: 'content'.fontSize: 16.color: '#402D16'.textAlign: 'left'.top: 33.left: 96.bolder: true
    },
    {
      type: 'rect'.background: 'color'.top: 0.left: 0.width: 375.height: 555}}]Copy the code

The first layer of the data object takes three arguments: width, height, and views. All numbers in the configuration are unitary. This means that canvas is drawing a scale map. To specify the size to display, place the returned image path directly into the image tag.

Currently, there are three types of configurations that can be drawn: image, text, and rect. The configured properties are basically using the CSS hump name, or relatively easy to understand.

Image (picture)

Text.

Rect (rectangle, line)

Q&A

0. Best practices

   It is best to lock the screen for drawing operations, such as when clicking draw

   wx.showLoading({
     title: 'Draw in shared image'.mask: true
   })
   Copy the code

   Once I’ve drawn it

   wx.hideLoading()
   Copy the code

   For details, see /pages/multiple under the project

1. How to draw two-dimensional code and small program code?

   • The TWO-DIMENSIONAL code and small program code can be generated by calling the official interface of wechat, which requires back-end coordination.
   • Then gotype: imageType can be drawn.

2. Drawing process correlation

   • viewsThe order in the array represents the order of the painting, and there will be overwriting. Attention, please.

3. How to achieve circular head?

   • canvasThere is no method to draw a circular picture, so it is usedhackTo achieve. Use a hollowed-out image on top of your head to achieve the current effect.

4. Why doesn’t the Canvas Drawer component just display the Canvas canvas and its contents?

   • Considering most of the scenes, we use the images to save locally or for display.
   • Saving it locally and returning a temporary file to the caller must be the best solution.
   • Show it, turn it into a picture, and you can use itimageAll display modes of the base component are displayed, and you can also set the width and height.

TIPS

If you have any questions, welcome to issues. If you feel good, can you send me small ✨ ✨, but I have more power to update.

Github:github.com/kuckboy1994…