This is the first article I participated in beginners’ introduction

preface

All of a sudden, one day, my leader told me that he wanted to draw frames and mark them on the picture by himself (users can add as many frames as possible, and adjust the size and position of the frames). Ha, ah, I felt confused. Listen to this requirement, my brain turned, gee, I know, I think I wrote a native JS drag when I first learned the front-end? Suddenly I thought, well, I can paddle, I'll just use that to make a VUE component. . After a period of time, I found that code, however, he can not meet my needs now, ah, the dream of water stroke bubble, began to honestly their own line of code.Copy the code

rendering

Step 1: Implement a draggable box

The first step was simple. I drew a div in a Vue component, gave it an ID, and copied it using the drag and drop I wrote earlier. Main methods used to implement drag and drop:

1. Onmousedown event 2. Onmousemove Event 3Copy the code

The main logic is simple: there is a global variable down. When the mouse is pressed down, down = true. When the mouse is moved, the div coordinate moves with the mouse.

This is the basic operation of dragging and dropping a div. This step is very simple.

Step 2: Make a box shrink

This second step, in fact, is not difficult yo. But think clearly so you don’t lose your head. I didn’t zoom in on div in the lower right corner like I do on many web pages (maybe I’m a little lazy and don’t want to bother). My div shrinks using a keyboard event that shrinks the div by rolling the mouse wheel when the user holds down the ‘W’ key. The important thing to note here is that when you shrink, the position of the div changes at the center point.

The main methods used to achieve this step are:

1. AddEventListener Listens to mouse wheel 2. Onkeydown key is released when keyCode is 87Copy the code

The third step: achieve the drawing of multiple boxes

In this step, I right-click to create and delete divs. The main reason to do this is to avoid any other buttons cluttering up my background image.

This is done using a vue plugin:

Contextmenu, a right-click plug-in in VUECopy the code

Contextmenu plugin library in vue, I am in the heart of the search for a tutorial, installation reference. Check out github.com/Francecil/v…

Part of the code (not included methods, will be sorted out later) :

<div class="image-wraps" ref="myedit"> <div class="myedit-span" v-for="(item, index) in mydata" :key="index" :style="getSpanStyle(item, index)" :id="'rec'+ index" @click="init(index)" @contextmenu.prevent="onContextmenu(item, $event)" > <div class="name-span" :style="getSpanStyle(item, index, <div class="myMenu" v-show="mymenu.current" :style="mymenu.style"> <el-button @click="newMark()" type="primary" size="small"> </el-button> <el-button type="danger" @click="deleteItem" Size ="small"> </el-button> </div>Copy the code

To be continued…

This article mainly refers to:

www.programmersought.com/article/589…

Github.com/Francecil/v…