“This is the 10th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

A recent visual editing project prior to refactoring, somewhat similar to No-code. When editing the middle main stage, you need to show the zoom effect of the screen on the main stage because you need to define the kanban screen size.

Take a look at the final result:

Implementation approach

  1. First you need to set the screen size of the user:1920 * 1080The size of the zoom into our home screen container, the zoom can be used with CSS3transtion: scaleProperties.
stageResize() {
  // Width and height of the outer container
  const { width, height } =
    this.$refs.screen.parentNode.getBoundingClientRect();
  this.scale = Math.min(
    width / this.screen.width,
    height / this.screen.height
  );
  // console.log("width", width, this.scale);
},
Copy the code

First, get the width and height of the outer stage container, and take the smaller values of the width and height of the outer stage container and the smaller values of the mold of the screen size set by the user as the final scaling size. This ensures that no matter what aspect ratio the user sets, the stage area will be rendered perfectly.

  1. Stabilization and resize

The resize event is listened for during the component mount phase and the stage is triggered to dynamically calculate the scaling ratio. Remember to disable event listening during component uninstallation or destruction to prevent memory leaks.

resizeDebounce: debounce(this.stageResize, 300),

mounted() {
    this.resizeDebounce();
    // Listen for resize to scale the canvas
    window.addEventListener("resize".this.resizeDebounce);
},
beforeDestroy() {
    window.removeEventListener("resize".this.resizeDebounce);
},
Copy the code

Debounce is written in data and can also be written in compouted, but not in methods. It is returned as a function and does not work. As for the cause and effect of this problem, I plan to write a separate article to explain it in detail, so that students who are interested can continue to pay attention to it.

  1. Style binding
    screenConfig() {
      const {
        width,
        height,
        fontSize,
        whUnit = "",
        fontUnit = "",} =this.screen;
      return {
        // background: `linear-gradient(-90deg, ${this.gridColor} 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(${this.gridColor} 1px, transparent 1px) 0% 0% / 20px 20px; `,. this.screen,width: width + whUnit,
        height: height + whUnit,
        fontSize: fontSize + fontUnit,
        transform: `scale(The ${this.scale}) translate(-The ${((1 / this.scale - 1) / 2) * 100
        }%, -The ${((1 / this.scale - 1) / 2) * 100}%) `.transition: "All 0.3 s"}; },Copy the code

Translate (-${((1 / this.scale-1) / 2) * 100}%, -${((1 / this.scale-1) / 2) * 100}%), So after scaling, you need to move the stage to the center of the main area. Suppose scale = 0.2; This means that if we zoom in by a factor of 5, we need to move the stage up and left twice (200%).

The above effect can be realized, using ali dateV’s editing page for reference.

conclusion

The above is to edit the main stage of the board dynamic zooming idea.

This article is also the first in a series of articles on the realization of a visual system from zero (like Ali dataV). We will continue to share the difficulties and solutions encountered in the implementation.

Chapter two: How to realize the free transformation of components in visual system development?

Write in the last

I’m Back, a front-end developer who loves sharing. If you think this article is good, remember to triple + pay attention, you may need it someday! Your encouragement is my biggest motivation ❤️.