Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to realize the knowledge of Jiugong lattice heart-shaped puzzle effect by Mini programs. The content is detailed and easy to understand. The operation is simple and fast. It has certain reference value. I believe everyone will gain something after reading this article on how to realize Jiugong lattice heart-shaped puzzle effect by Mini programs. Let's take a look at it together.

Thinking of Realizing Mini programs

There are two canvases, a small canvas to show what it will look like in the end, and a large canvas to take screenshots at the end, generate pictures, and save them to albums.

By positioning CSS, large canvas can be moved to the outside of the screen so that the user does not see it.

And if you save the image in a small canvas, the final image is a little fuzzy.

Canvas can be seen as a 9 * 9 grid,

And that's what we're going to do with an array called heart.

Use the small grid to spell out the heart, and render it on canvas according to the contents of the array.

Functions of Mini programs

This Mini programs have the function of selecting single picture, selecting multiple pictures, supplementing pictures, saving pictures, resetting, recommending, feedback.

Select a single image

When the user clicks on the heart area, they can select a single image, call wx.chooseImage to select an image from the local album, and then draw this image on canvas, the specific position of the drawing is the position that the user clicks on.

Bind a touchend event to a small canvas, and when the event is triggered, there's a changedTouches attribute in the event, which is an array that holds information about the currently changing touch point, and the elements in this array have x and y attributes, which is the distance from the touch point to the upper left corner of the canvas.

//touch point value on x axis var x = e.changedTouches[0].x;//touch point value on y axis var y = e.changedTouches[0].y; copy code

With the distance between the x and y axes, figure out which grid to draw on.

//grid indicates the width of a grid//determine which grid x = Math.floor(x / grid);//determine which grid y = Math.floor(y / grid); copy code

After knowing which grid to draw, we have to determine which part of the picture to draw, because all the grids are square, but the picture selected by the user is not necessarily square, if compressed into a square, it will be very ugly, so when I draw, I choose the middle part to draw.

Get image information via wx.getImageInfo, draw from (long side-short side)/2 with the short side as wide as the square.

//Get the width and height of the image var width = res.width;var height = res.height;//If the image is not square, draw only the middle part// sWidth indicates the width of the square var sWidth = width > height ? height : width;// sx is the X coordinate of the upper-left corner of the rectangular selection box of the source image var sx = 0;// sy is the y coordinate of the upper-left corner of the rectangular selection box of the source image var sy = 0;if (width > height) { sx = (width - height) / 2;}if (width < height) { sy = (height - width) / 2;} Copy Code

Once you know what to draw and where to draw it, call canvasContext.drawImage to draw it.

Select multiple images

Select multiple pictures, also call wx.chooseImage method, successfully select multiple pictures, returned object has a tempFilePaths attribute, this attribute holds, picture local file path list.

Then traverse the heart array, that is, the array that holds the heart data. If the value of an element in the array is 1, that is, within the heart range, draw an image from tempFilePaths in sequence. When drawing, the same, if not square, draw only the middle part.

Supplementary pictures

In the image file, there are several images saved to complement the hearts, and their paths are saved in an array.

//images used to complement the heart: [ '../../ images/1.jpg', '../../ images/2.jpg', '../../ images/3.jpg', '../../ images/4.jpg', '../../ images/5.jpg', '../../ images/6.jpg', '../../ images/7.jpg', '../../ images/8.jpg', '../../ images/9.jpg', '../../ images/10.jpg', ] copy code

Then we traverse the heart array, and if an element of the array has a value of 1, we randomly select one of the images to draw on.

Draw a picture, draw multiple pictures, supplement pictures, they all draw pictures on canvas, in order to avoid the position of the picture already drawn, they draw pictures at different levels.

Additional pictures: 1 Draw multiple pictures: 2 Draw one picture: 3 Copy code

The higher level can cover the lower level, the lower level cannot cover the higher level, and the same level, except that the drawing of multiple pictures cannot be covered, the other two cases can be covered.

The simple meaning is: supplement the picture, after the supplement is finished, the supplement will overwrite the original supplement, but the picture selected by the user will not be overwritten.

Drawing multiple pictures can overwrite supplementary pictures, but the pictures selected by the user will not be overwritten.

Draw a picture, regardless of whether there is a picture in this position, draw another picture.

save the picture

When saving images, it is to capture large canvases in order and save them into images. It is mainly implemented by wx.canvasToTempFilePath API. This API can export the contents of the specified area of the current canvas to generate images of specified size and return the file path.

There are a few details to note here.

1, in order to avoid the last saved picture has a black background, it is best to start by drawing a rectangle on the canvas the same size as the canvas, and the rectangle is filled with color.

2, in order to save the picture, in the user's album can also keep the heart. You need to save pictures in this order

3. wx.canvasToTempFilePath has two optional parameters destWidth and destHeight, which determine the width and height of the output image. If you don't know exactly how much, you can use the default value.

destWidth and destHeight units are physical pixels (pixels), canvas is drawn with logical pixels (physical pixels = logical pixels * density), so if you only use width and height (logical pixels) in canvas as the width and height of the output image, the width and height of the generated image are actually scaled to 1 / density of canvas, so it looks fuzzy.

The default value is width * screen pixel density

The screen pixel density mentioned in the document should not refer to the number of pixels per inch of the screen, but to the device pixel ratio (pixelRatio), that is, how many physical pixels are used to display 1px CSS pixel. Use APIwx.getSystemInfo to view device pixel ratio

wx.getSystemInfo({ success: function(res) { console.log(res.pixelRatio) }}) Copy Code

If my understanding here is wrong, please also know the small partner pointed out.

Having said so much, I mainly want to say that using the default value is actually very clear.

4, because to save 9 pictures, so it takes some time, this time you need a progress bar, save the picture, show the progress bar, disable the save button, after all, click the button is 9 pictures, so this time or disable the good, every save a picture progress bar value +12, more than 100, it means that 9 pictures are saved.

And Weixin Mini Programs (Mini) also happen to have the progress bar component.

reset

This function is to traverse the heart array, using a color, according to the contents of the array, draw out the heart. Then draw two lines on the x and y axes, forming a nine-square grid.

Recommend and Feedback Recommend to a Friend Feedback Copy Code

These two functions use the button component of Weixin Mini Programs (Mini). What needs to be noted here is that when clearing the default style of button, the border of the after pseudo-element of button needs to be removed.

button::after{ border: 0; } copy where code can be optimized

There are some places where Mini programs are making choices for users. For example, if the selected picture is not square, draw the middle part, but the middle part may not be what the user wants, and if each picture requires the user to choose which part to draw, a total of 81 pictures, obviously some trouble, here can continue to optimize.

Also, when supplementing pictures, the supplementary pictures are not necessarily the ones that users like, so this part will consider whether some labels can be added. Users can choose different labels to supplement the pictures that match the labels, similar to QQ music lyrics posters.

About "Mini programs how to achieve Jiugong lattice heart-shaped puzzle effect" The content of this article is introduced here, thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to realize the effect of nine-square lattice heart-shaped jigsaw puzzle by Mini programs." If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.