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

Object Structure Overview 


{
  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)

attribute meaning The default value An optional value
url The address of the drawing image, which can be a local image, such as:/images/1.jpeg
top The distance from the top left corner to the top of the artboard
left The distance from the top left corner to the left side of the artboard
width To draw more wide 0
height How high to draw 0

Text.

attribute meaning The default value An optional value
content The address of the drawing picture “(empty string)
color color black
fontSize The font size 16
textAlign Text alignment left Center, right
lineHeight Line height, useful only in multi-line text 20
top Distance from top left corner of text to top of artboard 0
left Distance from the top left corner of the text to the left side of the artboard 0
breakWord Whether a line break is required false true
MaxLineNumber Maximum number of rows, set onlybreakWord: true, the current attribute is valid, the content beyond the number of lines is displayed as… 2
width andMaxLineNumberAttribute matching,widthThat is to reach the newline width
bolder Whether the bold false true
textDecoration Display the underlined and underlined effect none Underline (underline), line-through (underline)

Rect (rectangle, line)

attribute meaning The default value An optional value
background The background color black
top The distance from the top left corner to the top of the artboard
left The distance from the top left corner to the left side of the artboard
width To draw more wide 0
height How high to draw 0

Q&A

  1. 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

  2. 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.

  3. Drawing process correlation

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

  4. 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.

  5. 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…