WeChat Mini Program: A json helps you share pictures in your circle of friends

Written in front

---

I have been working on a small program recently and found that making pictures to share in Moments is a must for every project. There were a lot of pitfalls and it was tedious to write, and I couldn’t find a similar component, so I wrote one myself.

Demo

---

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

Features

---

• Easy to use - just one json to draw pictures

• Full-featured——meet 90% of usage scenarios

• Draw text (line breaks, ellipses beyond content, underline, underline, bold text)

• Draw the picture

• Draw the rectangle

• ##Save the picture

• Multi-picture drawing

• ...

• Small amount of code

Experience

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

If you want to use it on your mobile phone, just configure your own appid.

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

• Normal drawing and drawing a single sharing picture.

• Multiple drawings, continuous drawing of shared drawings

Use

---

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

• put the

  in components canvasdrawer Copy to your own project.

• Register the component using the page

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

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

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

           

painting   is the json that needs to be passed in. The getImage method is a callback function after the drawing is completed, and returns the completed image address in event.detail .

• The painting in the current chestnut is briefly displayed. For detailed configuration, please see

  API

##API

The first layer of the data object requires three parameters:

---

width

, height, views. All numbers in the configuration are unitless. This means that canvas draws a proportional diagram. To determine the specific display size, simply place the returned image path in the image tag. Currently, 3 types of configurations can be drawn:

image

, text, rect. The configured attributes basically use camel case names of css, which are relatively easy to understand.

image

##topThe distance between the upper left corner and the top of the artboard# #left##widthHow wide to draw0How high to draw

Attribute

Meaning

Default value

Optional value

url

The drawn image address can be a local image, such as: /images/1.jpeg

The distance between the upper left corner and the left side of the artboard

##height

0

text(text)

##AttributeMeaningDefault valueOptional valuecontentThe drawn image address''(empty string )colorcolorblackfontSizeFont size16##textAlignlineHeight

rect (rectangle, line)

Text alignment	left		center,right
Line height, only in multi-line text Useful	20

##AttributeMeaningDefault valueOptional valuebackgroundBackground colorblack##top##leftThe distance between the upper left corner and the left side of the artboard16widthHow wide to draw0heightHow high to draw0

The distance between the upper left corner and the top of the artboard
				## Q&A 最佳实践 绘制操作的时候最好 锁住屏幕 ，例如在点击绘制的时候 wx.showLoading({ title: '绘制分享图片中', mask: true}) 绘制完成之后 wx.hideLoading() 具体可以参考项目下的 /pages/multiple 1.二维码和小程序码如何绘制？    二维码和小程序码可以通过调用微信官方的接口产生，需要后端配合。   然后走 type: image 类型进行绘制即可。 2.绘制流程相关   views 数组中的顺序代表绘画的先后顺序，会有覆盖的现象。请各位使用者注意。 3.如何实现圆形头像？    canvas 中没有绘制圆形图片的方法，所以使用了 hack 的方式来实现的。使用一张中间镂空的图片盖在头像上就可实现当前效果。 4.canvas drawer 组件为什么不直接显示canvas画板和其内容呢？     考虑到大部分场景，我们都是用来把图片保存到本地，或用以展示。保存到本地，返回临时文件给调用者一定是最佳的解决方式。展示，转化成图片之后，就可以使用 image 基础组件的所有显示模式了，还能设置宽高。 推荐教程：《微信小程序》

The above is the detailed content of WeChat Mini Program: A json helps you share pictures in your circle of friends. For more information, please follow other related articles on the PHP Chinese website!