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

This article mainly introduces "how to use css to achieve the heart-shaped jigsaw puzzle". In the daily operation, I believe that many people have doubts about how to use css to achieve the heart-shaped jigsaw puzzle. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the doubts about "how to use css to achieve the heart-shaped jigsaw puzzle." Next, please follow the editor to study!

The idea of realizing Mini Program

1. There are two canvas, a small canvas shows what it will look like in the end, and a large canvas is used to capture the screenshot, generate the picture, and save it to the album.

By positioning the CSS, just move the large canvas out of the screen so that the user can not see it.

If you use a small canvas to save the picture, the final picture is a bit blurry.

2. Canvas can be regarded as a grid of 9 * 9.

This is represented by an array called heart. Use the small grid to spell out the heart shape and render it on canvas according to the contents of the array.

The function of Mini Program

This Mini Program has the functions of selecting a single picture, selecting multiple pictures, supplementing pictures, saving pictures, resetting, recommending, and feedback.

Select a single picture

When the user clicks on the heart-shaped area, you can select a single picture, call wx.chooseImage to select the picture from the local album, and then draw this picture on canvas, the specific location is where the user clicked.

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

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

After you have the distance between the x-axis and the y-axis, figure out which grid you should draw on.

/ / grid indicates the width of a grid / / determines in which grid x = Math.floor (x / grid); / / determines in which grid y = Math.floor (y / grid) the y axis is.

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

Get the picture information through wx.getImageInfo, take the short side as the width of the square, and then draw from (long side-short edge) / 2.

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

< height) { sy = (height - width) / 2;} 知道画什么，在哪里画之后，调用 canvasContext.drawImage 来画就可以了。 选择多张图片 选择多张图片，同样是调用 wx.chooseImage 方法，成功选择多张图片后，返回的对象中有一个 tempFilePaths 属性，这个属性保存了，图片的本地文件路径列表。

Then iterate through the heart array, that is, the array that holds the heart-shaped data. If the value of an element in the array is 1, that is to say, within the heart-shaped range, draw a picture from the tempFilePaths in order, and draw it the same way. If it is not a square, just draw the middle part.

Supplementary picture

In the image file, several images are saved to supplement the heart shape, and their paths are saved in an array.

/ / images: ['.. /.. / 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',]

Then iterate through the heart array, and if the value of an element in the array is 1, randomly select a picture from this set of pictures to draw.

Draw a picture, draw multiple pictures, supplementary pictures, they all draw pictures on canvas, in order to avoid the position of the picture has been overlaid, the level of the picture they draw is different.

Supplementary pictures: 1 draw multiple pictures: 2 draw a picture: 3

High-grade can cover low-level, low-grade can not cover high-level, the same level, except for drawing multiple pictures can not be covered, the other two cases can be covered.

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

Drawing more than one picture can overwrite the supplementary picture, but the picture selected by the user will not be overwritten either.

Draw a picture, regardless of whether there is a picture in this location or not, you will draw another one.

Save pictures

When you save a picture, you intercept the large canvas in order, and then save it as a picture, which mainly depends on the API of wx.canvasToTempFilePath. This API can export the contents of the specified area of the current canvas to generate a picture of the specified size and return the file path.

Here are a few details to pay attention to.

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

2. In order to save the picture, you can also keep the heart shape in the user's photo album.

3. There are two optional parameters destWidth and destHeight in wx.canvasToTempFilePath, which determine the width and height of the output picture. If you don't know exactly how much it is, you can use the default value.

The units of destWidth and destHeight are physical pixels (pixel), and 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 length and width of the output image, the resulting image width and height are actually scaled to 1 / density of canvas, so it appears blurred.

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 screen, but to the device pixel ratio (pixelRatio), that is, how many physical pixels are used to display the CSS pixels of the 1px. You can check the device pixel ratio with API wx.getSystemInfo.

Wx.getSystemInfo ({success: function (res) {console.log (res.pixelRatio)}})

Here, if my understanding is wrong, please point it out.

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

4. Because it takes some time to save 9 pictures, you need a progress bar at this time. When you save a picture, show the progress bar and disable the save button. After all, clicking the button is 9 pictures, so it is better to disable it at this time. Every time you save a picture, the value of the progress bar is + 12. When it exceeds 100, it means that all nine pictures have been saved.

WeChat Mini Programs also happens to have a progress bar (progress).

Reset

This function is to traverse the heart array, using a color, according to the contents of the array, draw the heart. Then draw two lines on the x-axis and y-axis to make it look like a nine-palace grid.

Recommendation and feedback recommend to friends for feedback

These two functions are used, WeChat Mini Programs's button component, it should be noted here is that when clearing the default style of button, you need to remove the border of the after pseudo-element of button.

Button::after {border: 0;} at this point, the study on "how to use css to realize the heart-shaped jigsaw puzzle of the nine palace grid" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.