This is the first article I participated in beginners' introduction
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
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 /divCopy the code
To be continued...