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

preface

This paper is the implementation of free transformation components in the second part of a do-it-yourself data visualization project – high imitation dataV

How to achieve dynamic zooming of edit panel?

Demand analysis

First, clarify the requirements: I need to put components (text, tables, images, various charts, etc.) on the main stage that can be freely dragged, scaled, rotated, and so on.

The final result

First, let’s take a look at the final effect. The upper and lower anchor points control the upper and lower anchor points. The anchor points of the four corners can be dragged to the direction of the corners to achieve size transformation. An anchor point directly above the center controls the rotation of the assembly.

Implementation scheme

The principle is very simple, in fact, in the component of the outer layer of a freely changing shell.

The implementation logic of the free transformation box is that each anchor point corresponds to a div, drag the anchor point, and implement the corresponding transformation function according to the class of the anchor point. The template code structure is as follows:

The specific implementation is that the current position of the component is recorded when the mouse is mousedown, and the corresponding operation is performed according to the different anchor points triggered and the distance of the mouse movement when the mouse is mousemove. Taking the anchor point on the right as an example, dragging should change the width of the component. The other operations are similar.

vue-drag-resize-rotate

Vue-drag-resize-rotategithub is a free transform component based on which the effects seen above are implemented. It not only provides the transform-related functionality mentioned last year, but also has a bonus: it provides the grid style of the parent container. This component seems to be designed for our scenario. I wonder if the author is doing something similar.

import VueDragResizeRotate from "@gausszhou/vue-drag-resize-rotate";

<vue-drag-resize-rotate
      v-for="item in pageComponents"
      :key="item.id"
      :parent="true"
      :grid="[20, 20]"
      :rotatable="true"
      :w="item.width"
      :h="item.height"
      :x="item.posX"
      :y="item.posY"
      :r="item.romate"
      @resizing="(x, y, w, h) => resizing({ x, y, w, h }, item)"
    >
      <div class="component-event" @click.stop="loadSetting('widget', item.id)">
        <component :is="item.name" :data="item"> </component>
      </div>
</vue-drag-resize-rotate>
Copy the code

Chinese online demo address

conclusion

The above is the realization idea of free transformation component.

This article is also the second 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.

How to achieve dynamic zooming of edit panel?

Reference link: github.com/gausszhou/v…

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 ❤️.