Small program poster best implementation ideas, visual editing directly generated code use

Cut to the chase

>> Painter -custom-poster is mounted on github page, the opening speed will be slower, please be patient or solve git network speed problem by yourself

background

When making small programs, we often have a need to share the small program to the circle of friends, but the circle of friends is not allowed to directly share the small program, then we have other ways to solve? The answer is definitely yes, that is, canvas generates personalized posters and shares pictures to moments

Analysis of the

1. There are a lot of requirements for generating pictures in applets, but anyone who has used Canvas will find some unexpected problems >> related to applets
2. Drawing graphics directly on canvas will make the code very messy and difficult to maintain for ordinary developers, and it often takes a long time to optimize the code
3. Different environment rendering issues, such as the developer tools look good, as soon as the Android real machine, the image does not show, the location does not correspond and so on

To solve

How about developing a library of plugins that generate posters?

• First, you only need to provide a simple parameter configuration file
• Fixed some of the small and large potholes encountered by the small Canvas
• There are rigorous testing sessions to solve the problems encountered in various environments and models, and provide a stable online version
• Long-term maintenance, and a dedicated update iteration of more novel functions

Above requirements is of course possible, once I also want to try to develop a come out, but then try give up after just a few tools available, after all this stuff, wheels require constant maintenance updates, and already has so many good ready-made plug-in, why bother to write, I will contribute code not more beautiful, here is my collection of a few

• Small program to generate a picture library, easily through the JSON way to draw a picture can be sent to friends circle >>Painter
• Applet component – Applet poster component >> WXA-plugin-canvas
• Mp_canvas_drawer | | | | | | | | | | | | | |

What do I want?

Lao so much, as if to provide you plug-ins I have nothing to do… In order to make a cool poster, I thought about it for a long time. With the plugin, you only need to provide the configuration code to make a poster, but I found some problems

1. Poster production efficiency is not high enough, fine tuning the size and position of an element, you need to constantly modify the save code, wait for a moment, see the effect, really annoying
2. A small position adjustment may need to adjust back and forth countless times, this simplest mechanized labor, this life is impossible
3. Take the perfect manuscript and hand it to the designer. This position is wrong, this line is too thick, this color is too heavy… If you believe me, I’m gonna shoot you
4. For some exquisitely complex posters, implementation is really not practical

Click on any of the examples on the left and import the code to see the renderer. You can guess what I’m thinking

How to implement

• At first, I wanted to use simple HTML and CSS plus drag function, but after a brief attempt, I gave up, because this function is really too complex, simple tools will not work
• The middle plan stalled for a long time and was abandoned at one point
• Until I found this library, fabric.js, it was really good, the praise is beyond words, the only drawback is that there are few Chinese tutorials, I have to use English and Google Translate
• Fabric introduces that you can easily create any simple shape, complex shape, image; Add them to the canvas and modify them in any way you want: position, size, Angle, color, stroke, opacity, etc

How To Use

Currently, the tool is divided into four parts

Examples show

To display some beautiful user-designed posters, click on the corresponding example and import the code into the canvas

The canvas area

To display the real poster effect, the elements added to the canvas can be dragged, rotated and zoomed directly with the mouse

Operating area

Four buttons in the first row

1. Copy the code to convert the display effect of the canvas into the JSON configuration code required by the poster plug-in library of the small program. Currently, I am using the Painter library, which will be converted into the configuration code of this plug-in by default. Just copy the code directly to card.js
2. It doesn’t matter if the view code function is used, you can see the generated code visually
3. Export THE JSON code needed to convert the canvas into fabric, so that you can save your own poster code
4. Import JSON. Import the JSON code exported in step 3 to display the designed poster style on the canvas

Five buttons in the second row

1. Canvas For details about the attributes of the canvas, see the following table
2. Text Add text attribute parameters detailed below
3. Rectangles add rectangles for details below
4. Image Add Image attribute parameters are described below
5. Qr code Add THE attribute parameters of the QR code see below

The third row

Detailed setting parameters for various elements

The activation zone

Activate the object refers to the element the mouse to click the canvas, the object will be covered by blue border, at the moment the object is activated, you can perform drag rotation scaling operation Active region only object is activated, used to set various configuration parameters of active objects, modify the value value, real-time update of the active object corresponding state, click on other area, This module will be hidden

shortcuts

• ‘←’ moves one pixel to the left
• ‘→’ moves one pixel to the right
• Move ‘↑’ up one pixel
• Move the ‘↓’ down 1 pixel
• ‘CTRL + Z’ undo
• ‘CTRL + Y’ resumes
• ‘delete’ to delete
• ‘[‘ raises the level of the element
• ‘]’ lowers the level of the element

The layout properties

Common layout properties

shadow

You can modify image, rect, text, etc. When you modify text, it is equivalent to text-shadow; Image and rect are equivalent to box-shadow

Usage:

shadow: 'h-shadow v-shadow blur color'; H - shadow: required. Position of horizontal shadows. Negative values are allowed. V - shadow: required. Position of vertical shadows. Negative values are allowed. The blur: required. Fuzzy distance. Color: required. Shadow color. Example: shadow:10 10 5 #888888Copy the code

Gradient support

You can use the following method to create gradients for CSS 3 in the background property of the canvas, where the center of the radial gradient is the middle point and the radius is the longest edge.

linear-gradient(-135deg.blue 0%, rgba(18, 52, 86, 1) 20%, # 987 80%)

radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)
Copy the code

!!!!!!!!! Note: the percentage after the color must be written.

The canvas properties

Text attributes

Remark:

• The first example of the fontFamily tool supports text fonts, but why not see the import applets?
• The height of the text is calculated by maxLines lineheight

Image properties

Mode parameter description

• ScaleToFill scales images to a fixed width and height
• AspectFill clipped the image to show the corresponding width and height
• Auto Auto Fill Width Full Display Height Adaptive center display

Tips (Must see)

• This tool does not consider compatibility. If you find incompatibility, please use Google Browser
• Painter only supports these kinds of graphics, so it does not support circles, lines, etc
• If an element is blocked and cannot be manipulated during editing, select the object and use the [] shortcut key to raise and lower the level of the element
• If you want to achieve one column of multi-line text, set the text width to the same size as fontsize, otherwise you will have incomplete text, which is caused by the Painter implementation
• Text does not support direct scaling because text size and element height are not easy to calculate. You can change elements dynamically by changing the maxLines lineHeight fontSize value of the active column
• If you find that an element is blocked by another element in the exported code, manually adjust the position of the element. The further the element in the JSON array is displayed, the higher the hierarchy is. Since Painter does not provide the hierarchy parameter, it can only be done so far
• The exported code of this tool is all in the unit of PX, why not support RPX, because under the unit of RPX, there will be problems in the calculation of shadow and border width, because the original example does not provide a px image generation scheme, you can download my modified demo>>Painter to solve it
• The width of the text changes dynamically depending on the number of words. If you want to add an icon to the end of the text and layout it according to the length of the text area, refer to the Painter documentation tutorial to modify the source code directly
• Due to the development of this tool has some difficulties, such as bugs, suggestions or use of the problem, please issue, source address >> Painter -custom-poster

Poster code contribution

If you have a good poster design and are willing to contribute open source, you can contribute your poster code and thumbnails. The example code files are in example, in order. For example, if the example is example2.js, you can add example3.js and example3.jpg images. For example, refer to the source code in the folder and export it in index.js

Export code

Do not format the code, it will report an error, please copy it to the JSON field as is

Generate thumbnails

• At first I tried to generate images directly in this tool, but failed due to a cross-domain problem with browser images
• So please go to the mini program to generate and save the picture, set the quality of the picture to 0.2, and go to Tinypng to compress the picture, reduce the size of the picture as much as possible
• Find Painter. Js and replace the method below to generate 0.2 quality images as shown below

  saveImgToLocal() {
      const that = this;
      setTimeout((a)= > {
        wx.canvasToTempFilePath(
          {
            canvasId: 'k-canvas'.fileType: 'jpg'.quality: 0.2.success: function(res) {
              that.getImageInfo(res.tempFilePath);
            },
            fail: function(error) {
              console.error(`canvasToTempFilePath failed, The ${JSON.stringify(error)}`);
              that.triggerEvent('imgErr', { error: error }); }},this
        );
      }, 300);
    }
Copy the code

Save the image into the corresponding folder, submit the code to wait for merging

TODO

• Color value selection supports the palette tool
• Text padding support
• Zoom position bounce problem optimization
• Layout interaction optimization
• If the need is large, support several other plug-in library code generation

~ creation is not easy, if it helps you, please give a star star✨✨ thank you ~