“I’m participating in Excavation Creators Boot Camp # 4, click here to learn more!”
preface
In order to make your experience better, this article will talk about how to support only Google Browser access to view the page. You guys can go check it out. Now I will write another article, to finish the homework, do what you have to finish, as the saying goes: finish what you start, for humanity. Finish what you start and keep your word.
How do I zoom in and out of a project? This operation is quite common and can be saved and tagged
Demand background
The background is that the page is embedded in CAD software for viewing and editing operations. Users who have been in touch with CAD software should know that the font size inside is very small and inconvenient to view. Therefore, CAD provides a mouse zoom event to enable the interface to zoom in and out for operation and viewing. It was also required to have the function of scaling like CAD software, so that’s where today’s topic comes in.
The background should tell you a little bit about the requirements. The real requirement: develop a page with H5 that can view and edit project information and support zooming. Anyway, a word demand is very simple, but the real demand is more than 10 or 20 words, directly on the rules of the design diagram is easy to understand, as shown below:
That should tell me what I’m talking about and what I’m doing. If sharp-eyed diggers should find out, how do I introduce external fonts into my project and use them? The screenshots used in this article are from this requirements design. It was a glimpse before, but now it’s clear.
The online renderings are as follows (it is inconvenient to use CAD to record GIF images, CAD containing private information should not be made public) :
thinking
In fact, in view of the above sentence needs to think about the main question is only: how to achieve the zoom page function? There is no need to extend the thinking beyond this, after all, this article is mainly about how to scale the page. Well, let’s get straight to the point, as described below
The development of
In view of the above proposed thinking, to find a solution: want to achieve the page zoom, it also has to control the style to achieve the effect of control page zoom in and out. Therefore, according to the accumulated knowledge, the core to solve the problem is transform and transform-Origin.
The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.
Transform related attributes are shown in the following table:
| value | describe |
|---|---|
| none | Definition does not transform. |
| matrix(n.n.n.n.n.n) | Define a 2D transformation using a matrix of six values. |
| matrix3d(n.n.n.n.n.n.n.n.n.n.n.n.n.n.n.n) | Define a 3D transformation using a 4×4 matrix of 16 values. |
| translate(x.y) | Define 2D transformations. |
| translate3d(x.y.z) | Define 3D transformations. |
| translateX(x) | Define the transformation, just using the X-axis values. |
| translateY(y) | Define the transformation, just using the Y-axis value. |
| translateZ(z) | Define the 3D transformation using only the z-axis values. |
| scale(x.y) | Define 2D scale transformations. |
| scale3d(x.y.z) | Define the 3D zoom transformation. |
| scaleX(x) | Define the scale transformation by setting the value of the X axis. |
| scaleY(y) | Define the scale transformation by setting the Y-axis value. |
| scaleZ(z) | Define the 3D scale transformation by setting the z-axis value. |
| rotate(angle) | Define 2D rotation, specifying angles in parameters. |
| rotate3d(x.y.z.angle) | Define 3D rotation. |
| rotateX(angle) | Defines a 3D rotation along the X axis. |
| rotateY(angle) | Define 3D rotation along the Y-axis. |
| rotateZ(angle) | Define 3D rotation along the Z axis. |
| skew(x-angle.y-angle) | Defines 2D skew conversions along the X and Y axes. |
| skewX(angle) | Defines a 2D tilt transformation along the X axis. |
| skewY(angle) | Define a 2D tilt transformation along the Y-axis. |
| perspective(n) | Define perspective views for 3D transformation elements. |
MDN provides a sample experience of Transform, which can be accessed by clicking on the link.
The transform-origin attribute allows you to change the position of the transformed element.
| value | describe |
|---|---|
| x-axis | Defines where the view is placed on the X axis. Possible values: top, left, Center, right,length,% |
| y-axis | Defines where the view is placed on the Y-axis. Possible values: top, left, Center, right,length,% |
| z-axis | Defines where the view is placed on the Z axis. Possible values:length |
MDN provides a sample experience of Transform-Origin, which can be accessed by clicking on the link.
The scale() property of transform and transform-origin are used to implement the above requirements. The code uses the React stack:
Page layout:
Style code:
.bit-right-container { display: flex; justify-content: center; align-items: center; transform-origin: top; // important}. Bit-wrap-options {position: fixed; top: 0; right: 16px; .bit-zoom-box { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin-top: 16px; background: #FFFFFF; Box-shadow: 0px 2px 4px 0px Rgba (0, 0, 0, 0.16); border-radius: 50%; color: #313C42; } .bit-zoom-box:hover { background: linear-gradient(180deg, #FFFFFF 0%, #EEEEEE 100%); Box-shadow: 0px 2px 4px 0px Rgba (0, 0, 0, 0.16); } .active { background: linear-gradient(180deg, #F5F5F5 0%, #EEEEEE 100%); Box-shadow: 0px 2px 4px 0px Rgba (0, 0, 0, 0.16); }}Copy the codeLogical code:
Const ZoomIcons: any[] = [{key: 'zoomOut', label: 'zoomOut', value: < zoomoutbank className=" bank statement "/>}, {key: 'bank statement ', value: (bank statement) (bank statement) (bank statement) 'zoomReload', label: 'restore ', value: < reloadmay include: statements (bank statements) // may include: statements (bank statements) (bank statements) Const [zoomIcon, setZoomIcon] = useState<string>(" ");Copy the code/** * const handleZoom = (key: string) => {setZoomIcon(key); If (key === 'zoomOut' && zoomScale <= 0.1) {setZoomScale(0.1); return; } if (key === 'zoomOut' && zoomScale > 0.1) {setZoomScale(zoomscale-0.1); return; } if (key === 'zoomIn') {setZoomScale(zoomScale + 0.1); return; } setZoomScale (0.9); }Copy the codeAs you can see from the code above, I created the page file using the react-related hooks syntax, and then defined a set of Icons for rendering the shrink, enlarge, and restore buttons on the interface. Then I created two states: zoomScale and zoomIcon. ZoomIcon identifies which action button the user clicked and adds the corresponding style effect. ZoomScale is used to control the scaling of the page container; Again, the handleZoom() function is used to control the operation logic, but note that when the scale value is 0, the width and height of the page elements are 0; When it is negative, the page will be rotated 180 degrees, resulting in the wrong rendering effect of the page. Therefore, a logic is added that when the scale value is less than or equal to 0.1, the scale value is set to 0.1 to ensure that the page still exists and does not disappear.
Transform: scale(-1) ratate(180deg); The page can be rotated back to where it was, but for the sake of unnecessary trouble, I added the case of less than or equal to 0.1 to ensure that it does not go down to 0 and negative all the time; Transform-origin: center; In order to avoid scrolling, we set the origin of element change as Center top, that is, transform-origin: top; , so that the page can be zoomed up and down to see, as shown below:
At this point, the project how to scale the page needs to talk about the end, in fact, as long as you understand the relevant API requirements will become simple, the most afraid is to finish the beginning of the difficult, so usually want to accumulate more development experience, so as not to let themselves appear passive in the future development. Finally, the homework of the Nuggets Creators training camp is completed. I hope there will be similar activities in the future, which will be of great help to our creation. Thank you 👍
Past wonderful articles
- For your better experience, this article will talk about how to support only Google Chrome access to view pages.
- How to use Antd Table to create Echarts maps in React projects?
- How do I introduce and use external fonts in my project?
- How to use the Amap plugin and wrap popover components in React projects?
- Data Visualization – How do I use the Echarts plug-in and encapsulate diagram components in React projects?
- How can I change the default DatePicker week selector in Antd?
- How to encapsulate the Vue watermark component and how to use it in React?
- The most powerful rich text editor? TinyMCE Series [3]
- The most powerful rich text editor? TinyMCE Series [2]
- The most powerful rich text editor? TinyMCE Series of articles [1]
- React project to implement a Checkbox style effect component
- 2022 First update: 3 Progress bar effects in front end projects
- Front-end Tech Trends 2022: You don’t come in and see how to earn it a small target?
- If ancient have programmers writing summaries, probably is such | 2021 year-end summary
- Front-end development specifications in front end team practice
- Javascript high-level constructors
- Javascript high-level inheritance
- Recursion and closure
After the language
Guys, if you find this article helpful, click 👍 or ➕. In addition, if there are questions or do not understand the part of this article, you are welcome to comment on the comment section, we discuss together.