├── .editorconfig
├── .gitignore
├── README.md
├── babel.config.js
├── dev.md
├── examples
    ├── App.vue
    ├── assets
    │   ├── bg.jpg
    │   ├── btn.png
    │   └── logo.png
    ├── components
    │   ├── common
    │   │   └── element.vue
    │   └── stage.vue
    ├── favicon.ico
    ├── index.html
    ├── lib
    │   └── utils
    │   │   └── index.js
    └── main.js
├── package.json
├── src
    ├── index.js
    └── vue-drag-rotate-resize
    │   ├── index.vue
    │   ├── rect-box.vue
    │   └── utils.js
├── tests
    └── unit
    │   ├── .eslintrc.js
    │   └── example.spec.js
└── vue.config.js


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /lib
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## vue-drag-rotate-resize
 2 | 
 3 | 
 4 | ### Demo
 5 | [demo](https://chenxingyuoo.github.io/vue-drag-rotate-resize)
 6 | 
 7 | ## 安装
 8 | ```
 9 | npm install @chenxingyu_o/vue-drag-rotate-resize
10 | ```
11 | 
12 | ## 注册组件
13 | ```javescript
14 | import VueDragRotateResize from '@chenxingyu_o/vue-drag-rotate-resize'
15 | import '@chenxingyu_o/vue-drag-rotate-resize/lib/vue-drag-rotate-resize.css'
16 | Vue.use(VueDragRotateResize)
17 | ```
18 | 
19 | ## 使用组件
20 | ```vue
21 | <template>
22 |   <div id="app">
23 |     <!-- resize -->
24 |     <vue-drag-rotate-resize
25 |       v-show="Object.keys(resizeObject).length"
26 |       :top="resizeObject.y || 0"
27 |       :left="resizeObject.x || 0"
28 |       :width="resizeObject.width || 0"
29 |       :height="resizeObject.height || 0"
30 |       :rotateAngle="resizeObject.rotate || 0"
31 |       :rotatable="true"
32 |       :onDragStart="()=>{}"
33 |       :onDrag="handleDrag"
34 |       :onDragEnd="()=>{}"
35 |       :onResizeStart="()=>{}"
36 |       :onResize="handleResize"
37 |       :onResizeEnd="()=>{}"
38 |       :onRotateStart="()=>{}"
39 |       :onRotate="handleRotate"
40 |       :onRotateEnd="()=>{}"
41 |     >
42 |       <div>content</div>
43 |       <template slot="rotate">
44 |         <div class="rotate-btn">o</div>
45 |       </template>
46 |     </vue-drag-rotate-resize>
47 |   </div>
48 | </template>
49 | 
50 | <script>
51 |   import VueDragRotateResize from '@chenxingyu_o/vue-drag-rotate-resize'
52 |   export default {
53 |     data() {
54 |       return {
55 |         resizeObject: {
56 |           x: 100,
57 |           y: 60,
58 |           width: 200,
59 |           height: 100,
60 |           rotate: 0,
61 |         }
62 |       }
63 |     },
64 |     components: {
65 |       VueDragRotateResize
66 |     },
67 |     methods: {
68 |       handleDrag (e, deltaX, deltaY) {
69 |         this.resizeObject.x += deltaX
70 |         this.resizeObject.y += deltaY
71 |       },
72 |       handleResize (e, { top, left, width, height }, isShiftKey, type) {
73 |         Object.assign(this.resizeObject, {
74 |           y: Math.round(top),
75 |           x: Math.round(left),
76 |           width: Math.round(width),
77 |           height: Math.round(height)
78 |         })
79 |       },
80 |       handleRotate (e, rotateAngle) {
81 |         this.resizeObject.rotate = rotateAngle
82 |       }
83 |     }
84 |   }
85 | </script>
86 | ```
87 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/dev.md:
--------------------------------------------------------------------------------
 1 | # vue-drag-rotate-resize
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn run lint
21 | ```
22 | 
23 | ### Run your unit tests
24 | ```
25 | yarn run test:unit
26 | ```
27 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <stage></stage>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import stage from './components/stage.vue'
 9 | export default {
10 |   components: {
11 |     stage
12 |   }
13 | }
14 | </script>
15 | 
16 | <style>
17 | *{
18 |   margin: 0;
19 |   box-sizing: border-box;
20 | }
21 | html,body,#app{
22 |   width: 100%;
23 |   height: 100%;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/examples/assets/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenxingyuoo/vue-drag-rotate-resize/23493d93878d2d9947fb0ae0a7ff978f4192ec74/examples/assets/bg.jpg


--------------------------------------------------------------------------------
/examples/assets/btn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenxingyuoo/vue-drag-rotate-resize/23493d93878d2d9947fb0ae0a7ff978f4192ec74/examples/assets/btn.png


--------------------------------------------------------------------------------
/examples/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenxingyuoo/vue-drag-rotate-resize/23493d93878d2d9947fb0ae0a7ff978f4192ec74/examples/assets/logo.png


--------------------------------------------------------------------------------
/examples/components/common/element.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="element-item"
 3 |     :style="elementItemStyle"
 4 |     @mousedown="onMousedown"
 5 |     @contextmenu="onContextmenu">
 6 |     <img :src="data.src" >
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: {
13 |     // 元素数据
14 |     data: {
15 |       type: Object,
16 |       required: true
17 |     },
18 |     // 数组索引
19 |     index: {
20 |       type: Number,
21 |       required: true
22 |     }
23 |   },
24 |   computed: {
25 |     // 元素盒子样式
26 |     elementItemStyle () {
27 |       const { x, y, width, height, rotate, zIndex } = this.data
28 | 
29 |       return {
30 |         position: 'absolute',
31 |         top: `${y || 0}px`,
32 |         left: `${x || 0}px`,
33 |         width: `${width}px`,
34 |         height: `${height}px`,
35 |         'z-index': `${zIndex}`,
36 |         transform: `rotate(${rotate}deg)`
37 |       }
38 |     }
39 |   },
40 |   methods: {
41 |     // 监听鼠标按下事件、判断是左键还是右键
42 |     onMousedown (e) {
43 |       if (e.buttons === 1) {
44 |         this.$emit('onMousedown', e, this.data, this.index)
45 |       } else if (e.buttons === 2) {
46 |         this.$emit('onContextmenu', e, this.data, this.index)
47 |       }
48 |     },
49 |     onContextmenu (e) {
50 |       e.preventDefault()
51 |       return false
52 |     }
53 |   }
54 | }
55 | </script>
56 | 
57 | <style lang="less">
58 | .element-item{
59 |   img{
60 |     width: 100%;
61 |     height: 100%;
62 |     display: block;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/examples/components/stage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="stage-box">
  3 |     <!-- element -->
  4 |     <element-item
  5 |       v-for="(item, index) in data"
  6 |       ref="element-item"
  7 |       :data="item"
  8 |       :index="index"
  9 |       :key="index"
 10 |       @onMousedown="handleMousedown"
 11 |       ></element-item>
 12 | 
 13 |       <!-- resize -->
 14 |       <vue-drag-rotate-resize
 15 |         v-show="Object.keys(resizeObject).length"
 16 |         :top="resizeObject.y || 0"
 17 |         :left="resizeObject.x || 0"
 18 |         :width="resizeObject.width || 0"
 19 |         :height="resizeObject.height || 0"
 20 |         :rotateAngle="resizeObject.rotate || 0"
 21 |         :rotatable="!isMultiple"
 22 |         :aspectRatio="isMultiple ? resizeObject.width / resizeObject.height : 0"
 23 |         :onDragStart="handleDragStart"
 24 |         :onDrag="handleDrag"
 25 |         :onDragEnd="handleDragEnd"
 26 |         :onResizeStart="handleResizeStart"
 27 |         :onResize="handleResize"
 28 |         :onResizeEnd="hanlderResizeEnd"
 29 |         :onRotateStart="handleRotateStart"
 30 |         :onRotate="handleRotate"
 31 |         :onRotateEnd="handleRotateEnd"
 32 |       >
 33 |       <template slot="rotate">
 34 |         <div class="rotate-btn"></div>
 35 |       </template>
 36 |       </vue-drag-rotate-resize>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import { getRect2WHRatio } from '../lib/utils/'
 42 | import cloneDeep from 'lodash/cloneDeep'
 43 | import elementItem from './common/element'
 44 | 
 45 | import bg from '../assets/bg.jpg'
 46 | import btn from '../assets/btn.png'
 47 | 
 48 | export default {
 49 |   data () {
 50 |     return {
 51 |       isDraging: false,
 52 |       resizeObject: {},
 53 |       activeElement: null,
 54 |       activedElements: [],
 55 |       data: [
 56 |         {
 57 |           x: 100,
 58 |           y: 60,
 59 |           width: 200,
 60 |           height: 100,
 61 |           rotate: 0,
 62 |           zIndex: 100,
 63 |           src: bg
 64 |         },
 65 |         {
 66 |           x: 120,
 67 |           y: 180,
 68 |           width: 162.5,
 69 |           height: 39,
 70 |           rotate: 0,
 71 |           zIndex: 101,
 72 |           src: btn
 73 |         }
 74 |       ]
 75 |     }
 76 |   },
 77 |   components: {
 78 |     elementItem
 79 |   },
 80 |   computed: {
 81 |     isMultiple () {
 82 |       return this.activedElements.length > 1
 83 |     }
 84 |   },
 85 |   created () {
 86 |     document.addEventListener('click', (e) => {
 87 |       if (this.getDraging()) {
 88 |         return
 89 |       }
 90 | 
 91 |       if (!e.target.closest('#stage-box')) {
 92 |         this.hideEdit()
 93 |       }
 94 |     }, false)
 95 |   },
 96 |   methods: {
 97 |     hideEdit () {
 98 |       this.resizeObject = {}
 99 |     },
100 |     setDraging () {
101 |       this.isDraging = true
102 |     },
103 |     cancelDraging () {
104 |       setTimeout(() => {
105 |         this.isDraging = false
106 |       }, 10)
107 |     },
108 |     getDraging () {
109 |       return this.isDraging
110 |     },
111 |     getRect () {
112 |       let object = {
113 |         x: [],
114 |         y: [],
115 |         width: [],
116 |         height: []
117 |       }
118 | 
119 |       // get x、y
120 |       this.activedElements.map((element, index) => {
121 |         object.x.push(element.x)
122 |         object.y.push(element.y)
123 |       })
124 |       const minX = Math.min(...object.x)
125 |       const minY = Math.min(...object.y)
126 | 
127 |       // get width、height
128 |       this.activedElements.map((element, index) => {
129 |         const { right, bottom } = this.$refs['element-item'][index]['$el'].getBoundingClientRect()
130 |         object.width.push(right - minX)
131 |         object.height.push(bottom - minY)
132 |       })
133 | 
134 |       return {
135 |         x: minX,
136 |         y: minY,
137 |         width: Math.max(...object.width),
138 |         height: Math.max(...object.height)
139 |       }
140 |     },
141 |     handleMousedown (e, data, index) {
142 |       if (e.metaKey || e.ctrlKey) {
143 |         this.activedElements.push(data)
144 |         if (this.activedElements.length === 1) {
145 |           this.resizeObject = cloneDeep(data)
146 |         } else {
147 |           const rect = this.getRect()
148 |           this.resizeObject = rect
149 |         }
150 |       } else {
151 |         this.resizeObject = cloneDeep(data)
152 |         this.activedElements = [data]
153 |       }
154 |     },
155 |     handleDragStart () {
156 |       this.setDraging()
157 |     },
158 |     handleDrag (e, deltaX, deltaY) {
159 |       this.resizeObject.x += deltaX
160 |       this.resizeObject.y += deltaY
161 | 
162 |       this.activedElements.map((element, index) => {
163 |         element.x += deltaX
164 |         element.y += deltaY
165 |       })
166 |     },
167 |     handleDragEnd () {
168 |       this.cancelDraging()
169 |     },
170 |     handleResizeStart () {
171 |       this.setDraging()
172 |       this.oldResizeObject = cloneDeep(this.resizeObject)
173 |       this.oldActivedElements = cloneDeep(this.activedElements)
174 |     },
175 |     handleResize (e, { top, left, width, height }, isShiftKey, type) {
176 |       const options = {
177 |         y: Math.round(top),
178 |         x: Math.round(left),
179 |         width: Math.round(width),
180 |         height: Math.round(height)
181 |       }
182 | 
183 |       this.resizeRatioObject = getRect2WHRatio(options, this.oldResizeObject)
184 | 
185 |       const { widthRatio, heightRatio } = this.resizeRatioObject
186 | 
187 |       const diffX = options.x - this.oldResizeObject.x
188 |       const diffY = options.y - this.oldResizeObject.y
189 | 
190 |       const rect = this.getRect()
191 | 
192 |       this.activedElements.map((element, index) => {
193 |         const oldElement = this.oldActivedElements[index]
194 | 
195 |         const width = Math.round(oldElement.width / widthRatio)
196 |         const height = Math.round(oldElement.height / heightRatio)
197 | 
198 |         const xRatio = (oldElement.x - this.oldResizeObject.x) / this.oldResizeObject.width
199 |         const yRatio = (oldElement.y - this.oldResizeObject.y) / this.oldResizeObject.height
200 | 
201 |         const x = diffX + this.oldResizeObject.x + Math.round(options.width * xRatio)
202 |         const y = diffY + this.oldResizeObject.y + Math.round(rect.height * yRatio)
203 | 
204 |         Object.assign(element, {
205 |           x,
206 |           y,
207 |           width,
208 |           height
209 |         })
210 |       })
211 | 
212 |       Object.assign(this.resizeObject, options)
213 |     },
214 |     hanlderResizeEnd () {
215 |       this.cancelDraging()
216 |       if (this.isMultiple) {
217 |         const rect = this.getRect()
218 |         Object.assign(this.resizeObject, rect)
219 |       }
220 |     },
221 |     handleRotateStart () {
222 |       this.setDraging()
223 |     },
224 |     handleRotate (e, rotateAngle) {
225 |       this.resizeObject.rotate = rotateAngle
226 |       this.activedElements.map((element, index) => {
227 |         element.rotate = rotateAngle
228 |       })
229 |     },
230 |     handleRotateEnd () {
231 |       this.cancelDraging()
232 |     }
233 |   }
234 | }
235 | </script>
236 | 
237 | <style lang="less">
238 | 
239 | .stage-box{
240 |   position: relative;
241 |   width: 100%;
242 |   height: 100%;
243 | }
244 | .rotate-btn {
245 |   position: absolute;
246 |   width: 14px;
247 |   height: 14px;
248 |   left: 50%;
249 |   top: -32px;
250 |   margin-left: -7px;
251 |   border: 1px solid #409EFF;
252 |   border-radius: 50%;
253 |   box-sizing: border-box;
254 | }
255 | </style>
256 | 


--------------------------------------------------------------------------------
/examples/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenxingyuoo/vue-drag-rotate-resize/23493d93878d2d9947fb0ae0a7ff978f4192ec74/examples/favicon.ico


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-drag-rotate-resize</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-drag-rotate-resize doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/examples/lib/utils/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 获取2个平面的宽比、高比
 3 |  * @param  {object}  originRect  原宽高对象
 4 |  * @param  {object}  targetRect  目标宽高对象
 5 |  * @return {object}              宽高比
 6 |  * @example
 7 |  * getRect2WHRatio({width: 100, height: 100}, {width: 200, height: 200})
 8 |  * // => {heightRatio: 2,maxRatio: 2, minRatio: 2, widthRatio: 2}
 9 |  */
10 | export const getRect2WHRatio = (originRect, targetRect) => {
11 |   const widthRatio = targetRect.width / originRect.width
12 |   const heightRatio = targetRect.height / originRect.height
13 |   return {
14 |     widthRatio: widthRatio,
15 |     heightRatio: heightRatio,
16 |     maxRatio: Math.max(widthRatio, heightRatio),
17 |     minRatio: Math.min(widthRatio, heightRatio)
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import VueDragRotateResize from '../src/index'
 4 | Vue.use(VueDragRotateResize)
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | new Vue({
 9 |   render: h => h(App)
10 | }).$mount('#app')
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@chenxingyu_o/vue-drag-rotate-resize",
  3 |   "version": "1.0.0",
  4 |   "author": "chenxignyuoo",
  5 |   "description": "a vue2 component. drag-rotate-resize",
  6 |   "main": "lib/vue-drag-rotate-resize.common.js",
  7 |   "scripts": {
  8 |     "serve": "vue-cli-service serve",
  9 |     "build": "vue-cli-service build ./src/index.js --dest lib --target lib --name vue-drag-rotate-resize",
 10 |     "build-demo": "vue-cli-service build",
 11 |     "lint": "vue-cli-service lint",
 12 |     "test:unit": "vue-cli-service test:unit"
 13 |   },
 14 |   "files": [
 15 |     "lib",
 16 |     "src"
 17 |   ],
 18 |   "keywords": [
 19 |     "vue",
 20 |     "drag",
 21 |     "resize",
 22 |     "rotate",
 23 |     "draggable",
 24 |     "resizable",
 25 |     "rotateable"
 26 |   ],
 27 |   "repository": {
 28 |     "type": "git",
 29 |     "url": "git+https://github.com/chenxingyuoo/vue-drag-rotate-resize.git"
 30 |   },
 31 |   "dependencies": {
 32 |     "core-js": "^2.6.5",
 33 |     "vue": "^2.6.10"
 34 |   },
 35 |   "devDependencies": {
 36 |     "@vue/cli-plugin-babel": "^3.0.1",
 37 |     "@vue/cli-plugin-eslint": "^3.0.1",
 38 |     "@vue/cli-plugin-unit-jest": "^3.0.1",
 39 |     "@vue/cli-service": "^3.0.1",
 40 |     "@vue/eslint-config-standard": "^4.0.0",
 41 |     "@vue/test-utils": "1.0.0-beta.29",
 42 |     "babel-core": "7.0.0-bridge.0",
 43 |     "babel-eslint": "^10.0.1",
 44 |     "babel-jest": "^23.6.0",
 45 |     "eslint": "^5.16.0",
 46 |     "eslint-plugin-vue": "^5.0.0",
 47 |     "less": "^3.0.4",
 48 |     "less-loader": "^4.1.0",
 49 |     "vue-template-compiler": "^2.6.10"
 50 |   },
 51 |   "eslintConfig": {
 52 |     "root": true,
 53 |     "env": {
 54 |       "node": true
 55 |     },
 56 |     "extends": [
 57 |       "plugin:vue/essential",
 58 |       "@vue/standard"
 59 |     ],
 60 |     "rules": {},
 61 |     "parserOptions": {
 62 |       "parser": "babel-eslint"
 63 |     }
 64 |   },
 65 |   "postcss": {
 66 |     "plugins": {
 67 |       "autoprefixer": {}
 68 |     }
 69 |   },
 70 |   "browserslist": [
 71 |     "> 1%",
 72 |     "last 2 versions"
 73 |   ],
 74 |   "jest": {
 75 |     "moduleFileExtensions": [
 76 |       "js",
 77 |       "jsx",
 78 |       "json",
 79 |       "vue"
 80 |     ],
 81 |     "transform": {
 82 |       "^.+\\.vue$": "vue-jest",
 83 |       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
 84 |       "^.+\\.jsx?$": "babel-jest"
 85 |     },
 86 |     "transformIgnorePatterns": [
 87 |       "/node_modules/"
 88 |     ],
 89 |     "moduleNameMapper": {
 90 |       "^@/(.*)$": "<rootDir>/src/$1"
 91 |     },
 92 |     "snapshotSerializers": [
 93 |       "jest-serializer-vue"
 94 |     ],
 95 |     "testMatch": [
 96 |       "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
 97 |     ],
 98 |     "testURL": "http://localhost/",
 99 |     "watchPlugins": [
100 |       "jest-watch-typeahead/filename",
101 |       "jest-watch-typeahead/testname"
102 |     ]
103 |   },
104 |   "license": "MIT"
105 | }
106 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import DragRotateResize from './vue-drag-rotate-resize/index.vue'
 2 | 
 3 | DragRotateResize.install = function (Vue) {
 4 |   Vue.component(DragRotateResize.name, DragRotateResize)
 5 | }
 6 | 
 7 | /* istanbul ignore if */
 8 | if (typeof window !== 'undefined' && window.Vue) {
 9 |   DragRotateResize.install(window.Vue)
10 | }
11 | 
12 | export default DragRotateResize
13 | 


--------------------------------------------------------------------------------
/src/vue-drag-rotate-resize/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <rectBox
  3 |     :styles="styles"
  4 |     :zoom="zoom"
  5 |     :zoomable="zoomable"
  6 |     :rotatable="rotatable"
  7 |     :parentScaleNum="parentScaleNum"
  8 |     :parentRotateAngle="parentRotateAngle"
  9 |     :onDragStart="onDragStart"
 10 |     :onDrag="handleDrag"
 11 |     :onDragEnd="onDragEnd"
 12 |     :onResizeStart="onResizeStart"
 13 |     :onResize="handleResize"
 14 |     :onResizeEnd="onResizeEnd"
 15 |     :onRotateStart="onRotateStart"
 16 |     :onRotate="handleRotate"
 17 |     :onRotateEnd="onRotateEnd"
 18 |   >
 19 |     <slot></slot>
 20 | 
 21 |     <template slot="rotate">
 22 |       <slot name="rotate"></slot>
 23 |     </template>
 24 |   </rectBox>
 25 | </template>
 26 | 
 27 | <script>
 28 | 'use strict'
 29 | import { centerToTL, tLToCenter, getNewStyle, degToRadian, getRect2CenterTranslate } from './utils'
 30 | import rectBox from './rect-box.vue'
 31 | 
 32 | export default {
 33 |   name: 'vue-drag-rotate-resize',
 34 |   props: {
 35 |     // 缩放比例
 36 |     zoom: {
 37 |       type: Number,
 38 |       default: 1
 39 |     },
 40 |     top: {
 41 |       type: Number,
 42 |       required: true
 43 |     },
 44 |     left: {
 45 |       type: Number,
 46 |       required: true
 47 |     },
 48 |     width: {
 49 |       type: Number,
 50 |       required: true
 51 |     },
 52 |     height: {
 53 |       type: Number,
 54 |       required: true
 55 |     },
 56 |     // 旋转角度
 57 |     rotateAngle: {
 58 |       type: Number,
 59 |       default: 0
 60 |     },
 61 |     // 缩放位置
 62 |     zoomable: {
 63 |       type: String,
 64 |       default: 'n, w, s, e, nw, ne, se, sw'
 65 |     },
 66 |     // 是否可旋转
 67 |     rotatable: {
 68 |       type: Boolean,
 69 |       default: true
 70 |     },
 71 |     // 父元素旋转角度
 72 |     parentRotateAngle: {
 73 |       type: Number,
 74 |       default: 0
 75 |     },
 76 |     // 父元素缩放比例
 77 |     parentScaleNum: {
 78 |       type: Number,
 79 |       default: 1
 80 |     },
 81 |     // 设置最小宽度
 82 |     minWidth: {
 83 |       type: Number,
 84 |       default: -Infinity
 85 |     },
 86 |     // 设置最小高度
 87 |     minHeight: {
 88 |       type: Number,
 89 |       default: -Infinity
 90 |     },
 91 |     // 自定宽高比
 92 |     aspectRatio: {
 93 |       type: Number
 94 |     },
 95 |     // 是否中心缩放
 96 |     isCenterZoom: {
 97 |       type: Boolean,
 98 |       default: false
 99 |     },
100 |     // 中心缩放目标矩形
101 |     centerZoomTargetRect: {
102 |       type: Object,
103 |       default () {
104 |         return {
105 |           width: 100,
106 |           height: 100
107 |         }
108 |       }
109 |     },
110 |     // 旋转开始回调
111 |     onRotateStart: {
112 |       type: Function
113 |     },
114 |     // 旋转回调
115 |     onRotate: {
116 |       type: Function
117 |     },
118 |     // 旋转结束回调
119 |     onRotateEnd: {
120 |       type: Function
121 |     },
122 |     // 调整大小开始回调
123 |     onResizeStart: {
124 |       type: Function
125 |     },
126 |     // 调整大小回调
127 |     onResize: {
128 |       type: Function
129 |     },
130 |     // 调整大小结束回调
131 |     onResizeEnd: {
132 |       type: Function
133 |     },
134 |     // 拖动开始回调
135 |     onDragStart: {
136 |       type: Function
137 |     },
138 |     // 拖动回调
139 |     onDrag: {
140 |       type: Function
141 |     },
142 |     // 拖动结束回调
143 |     onDragEnd: {
144 |       type: Function
145 |     }
146 |   },
147 |   data () {
148 |     return {
149 | 
150 |     }
151 |   },
152 |   components: {
153 |     rectBox
154 |   },
155 |   computed: {
156 |     styles () {
157 |       return tLToCenter({ top: this.top, left: this.left, width: this.width, height: this.height, rotateAngle: this.rotateAngle })
158 |     }
159 |   },
160 |   methods: {
161 |     handleDrag (e, deltaX, deltaY) {
162 |       this.onDrag && this.onDrag(e, deltaX, deltaY)
163 |     },
164 |     handleRotate (e, angle, startAngle) {
165 |       if (!this.onRotate) return
166 |       let rotateAngle = Math.round(startAngle + angle)
167 |       if (rotateAngle >= 360) {
168 |         rotateAngle -= 360
169 |       } else if (rotateAngle < 0) {
170 |         rotateAngle += 360
171 |       }
172 |       if (rotateAngle > 356 || rotateAngle < 4) {
173 |         rotateAngle = 0
174 |       } else if (rotateAngle > 86 && rotateAngle < 94) {
175 |         rotateAngle = 90
176 |       } else if (rotateAngle > 176 && rotateAngle < 184) {
177 |         rotateAngle = 180
178 |       } else if (rotateAngle > 266 && rotateAngle < 274) {
179 |         rotateAngle = 270
180 |       }
181 |       this.onRotate(e, rotateAngle)
182 |     },
183 |     handleResize (e, length, alpha, rect, type, isShiftKey) {
184 |       if (!this.onResize) return
185 |       const { rotateAngle, aspectRatio, minWidth, minHeight, parentRotateAngle } = this
186 |       const beta = alpha - degToRadian(rotateAngle + parentRotateAngle)
187 |       const deltaW = length * Math.cos(beta)
188 |       const deltaH = length * Math.sin(beta)
189 |       const ratio = isShiftKey && !aspectRatio ? rect.width / rect.height : aspectRatio
190 |       const newStyle = getNewStyle(type, { ...rect, rotateAngle }, deltaW, deltaH, ratio, minWidth, minHeight)
191 |       const { centerX, centerY } = newStyle.position
192 |       const { width, height } = newStyle.size
193 | 
194 |       const result = centerToTL({ centerX, centerY, width, height, rotateAngle })
195 | 
196 |       if (this.isCenterZoom) {
197 |         // 居中信息
198 |         const centerInfo = getRect2CenterTranslate(result, {
199 |           width: this.centerZoomTargetRect.width,
200 |           height: this.centerZoomTargetRect.height
201 |         })
202 | 
203 |         result.left = centerInfo.left
204 |         result.top = centerInfo.top
205 |       }
206 | 
207 |       this.onResize(e, result, isShiftKey, type)
208 |     }
209 |   }
210 | }
211 | </script>
212 | 


--------------------------------------------------------------------------------
/src/vue-drag-rotate-resize/rect-box.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="rect-box" :style="divStyle" ref="rectBox" @mousedown="startDrag">
  3 |     <div v-for="(item, i) in direction" class="scale" :class="zoomableMap[item]" @mousedown.stop="(e) => startResize(e, zoomableMap[item])" :style="[{cursor: getCursorStyle(item)}, reverseScaleStyle]" :key="i"></div>
  4 | 
  5 |     <div class="rotate" ref="rotate" @mousedown.stop="startRotate" v-show="rotatable">
  6 |       <slot name="rotate">
  7 |         <div class="rotate-icon"></div>
  8 |       </slot>
  9 |     </div>
 10 | 
 11 |     <slot />
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script>
 16 | 'use strict'
 17 | import { getLength, getAngle, getCursor } from './utils'
 18 | 
 19 | export default {
 20 |   props: {
 21 |     styles: {
 22 |       type: Object,
 23 |       default () {
 24 |         return {}
 25 |       }
 26 |     },
 27 |     zoom: {
 28 |       type: Number
 29 |     },
 30 |     zoomable: {
 31 |       type: String
 32 |     },
 33 |     rotatable: {
 34 |       type: Boolean
 35 |     },
 36 |     parentRotateAngle: {
 37 |       type: Number
 38 |     },
 39 |     parentScaleNum: {
 40 |       type: Number
 41 |     },
 42 |     onRotateStart: {
 43 |       type: Function
 44 |     },
 45 |     onRotate: {
 46 |       type: Function
 47 |     },
 48 |     onRotateEnd: {
 49 |       type: Function
 50 |     },
 51 |     onResizeStart: {
 52 |       type: Function
 53 |     },
 54 |     onResize: {
 55 |       type: Function
 56 |     },
 57 |     onResizeEnd: {
 58 |       type: Function
 59 |     },
 60 |     onDragStart: {
 61 |       type: Function
 62 |     },
 63 |     onDrag: {
 64 |       type: Function
 65 |     },
 66 |     onDragEnd: {
 67 |       type: Function
 68 |     }
 69 | 
 70 |   },
 71 |   name: 'rect-box',
 72 |   data () {
 73 |     return {
 74 |       locals: 1,
 75 |       cursor: [],
 76 |       zoomableMap: {
 77 |         'n': 't',
 78 |         's': 'b',
 79 |         'e': 'r',
 80 |         'w': 'l',
 81 |         'ne': 'tr',
 82 |         'nw': 'tl',
 83 |         'se': 'br',
 84 |         'sw': 'bl'
 85 |       },
 86 |       direction: this.zoomable.split(',').map(d => d.trim()).filter(d => d)
 87 |     }
 88 |   },
 89 |   watch: {
 90 |     zoomable (z) {
 91 |       this.direction = z.split(',').map(d => d.trim()).filter(d => d)
 92 |     }
 93 |   },
 94 |   components: {},
 95 |   computed: {
 96 |     reverseScaleStyle () {
 97 |       return {
 98 |         transform: `scale(${1 / this.parentScaleNum})`
 99 |       }
100 |     },
101 |     divStyle () {
102 |       let { position, size, transform } = this.styles
103 | 
104 |       let style = {
105 |         width: Math.abs(size.width) + 'px',
106 |         height: Math.abs(size.height) + 'px',
107 |         transform: `rotate(${transform.rotateAngle}deg)`,
108 |         left: position.centerX - Math.abs(size.width) / 2 + 'px',
109 |         top: position.centerY - Math.abs(size.height) / 2 + 'px'
110 |       }
111 | 
112 |       return style
113 |     }
114 |   },
115 |   beforeMount () {
116 |   },
117 |   mounted () {
118 |     this.setElementRef(this.$refs.rectBox)
119 |   },
120 |   filters: {
121 | 
122 |   },
123 |   methods: {
124 |     setElementRef (ref) {
125 |       this.$element = ref
126 |     },
127 |     getCursorStyle (d) {
128 |       let { transform } = this.styles
129 |       const cursor = `${getCursor(transform.rotateAngle + this.parentRotateAngle, d)}-resize`
130 |       return cursor
131 |     },
132 |     // Drag
133 |     startDrag  (e) {
134 |       if (e.which !== 1) return true
135 |       if (e.stopPropagation) e.stopPropagation()
136 |       if (e.preventDefault) e.preventDefault()
137 |       let { clientX: startX, clientY: startY } = e
138 |       this.onDragStart && this.onDragStart(e)
139 |       this._isMouseDown = true
140 |       const onMove = (e) => {
141 |         if (!this._isMouseDown) return // patch: fix windows press win key during mouseup issue
142 |         e.stopImmediatePropagation()
143 |         if (e.stopPropagation) e.stopPropagation()
144 |         if (e.preventDefault) e.preventDefault()
145 |         window.requestAnimationFrame(() => {
146 |           const { clientX, clientY } = e
147 |           const deltaX = (clientX - startX) / this.zoom
148 |           const deltaY = (clientY - startY) / this.zoom
149 |           this.onDrag(e, deltaX, deltaY)
150 |           startX = clientX
151 |           startY = clientY
152 |         })
153 |       }
154 |       const onUp = (e) => {
155 |         document.removeEventListener('mousemove', onMove)
156 |         document.removeEventListener('mouseup', onUp)
157 |         if (!this._isMouseDown) return
158 |         this._isMouseDown = false
159 |         this.onDragEnd && this.onDragEnd(e)
160 |       }
161 |       document.addEventListener('mousemove', onMove)
162 |       document.addEventListener('mouseup', onUp)
163 |     },
164 | 
165 |     // Rotate
166 |     startRotate  (e) {
167 |       if (e.button !== 0) return
168 |       if (e.stopPropagation) e.stopPropagation()
169 |       if (e.preventDefault) e.preventDefault()
170 |       const { clientX, clientY } = e
171 |       const { styles: { transform: { rotateAngle: startAngle } } } = this
172 |       const rect = this.$element.getBoundingClientRect()
173 |       const center = {
174 |         x: rect.left + rect.width / 2,
175 |         y: rect.top + rect.height / 2
176 |       }
177 |       const startVector = {
178 |         x: clientX - center.x,
179 |         y: clientY - center.y
180 |       }
181 |       this.onRotateStart && this.onRotateStart(e)
182 |       this._isMouseDown = true
183 |       const onMove = (e) => {
184 |         if (!this._isMouseDown) return // patch: fix windows press win key during mouseup issue
185 |         if (e.stopPropagation) e.stopPropagation()
186 |         if (e.preventDefault) e.preventDefault()
187 |         e.stopImmediatePropagation()
188 |         window.requestAnimationFrame(() => {
189 |           const { clientX, clientY } = e
190 |           const rotateVector = {
191 |             x: clientX - center.x,
192 |             y: clientY - center.y
193 |           }
194 |           const angle = getAngle(startVector, rotateVector)
195 |           this.onRotate(e, angle, startAngle)
196 |         })
197 |       }
198 |       const onUp = (e) => {
199 |         document.removeEventListener('mousemove', onMove)
200 |         document.removeEventListener('mouseup', onUp)
201 |         if (!this._isMouseDown) return
202 |         this._isMouseDown = false
203 |         this.onRotateEnd && this.onRotateEnd(e)
204 |       }
205 |       document.addEventListener('mousemove', onMove)
206 |       document.addEventListener('mouseup', onUp)
207 |     },
208 | 
209 |     // Resize
210 |     startResize (e, type, cursor) {
211 |       if (e.button !== 0) return
212 |       // document.body.style.cursor = cursor
213 |       const styles = this.styles
214 |       const { centerX, centerY } = styles.position
215 |       const { width, height } = styles.size
216 |       const { rotateAngle } = styles.transform
217 |       // const { styles: { position: { centerX, centerY }, size: { width, height }, transform: { rotateAngle } } } = this
218 |       // const { clientX: startX, clientY: startY } = e
219 |       const startX = e.clientX
220 |       const startY = e.clientY
221 |       const rect = { width, height, centerX, centerY, rotateAngle }
222 |       // const type = e.target.getAttribute('class').split(' ')[ 0 ]
223 |       this.onResizeStart && this.onResizeStart(e)
224 |       this._isMouseDown = true
225 | 
226 |       const onMove = (e) => {
227 |         if (!this._isMouseDown) return // patch: fix windows press win key during mouseup issue
228 |         e.stopImmediatePropagation()
229 |         window.requestAnimationFrame(() => {
230 |           const { clientX, clientY } = e
231 |           const deltaX = (clientX - startX) / this.zoom
232 |           const deltaY = (clientY - startY) / this.zoom
233 |           const alpha = Math.atan2(deltaY, deltaX)
234 |           const deltaL = getLength(deltaX, deltaY)
235 |           const isShiftKey = e.shiftKey
236 |           this.onResize(e, deltaL, alpha, rect, type, isShiftKey)
237 |         })
238 |       }
239 | 
240 |       const onUp = (e) => {
241 |         document.body.style.cursor = 'auto'
242 |         document.removeEventListener('mousemove', onMove)
243 |         document.removeEventListener('mouseup', onUp)
244 |         if (!this._isMouseDown) return
245 |         this._isMouseDown = false
246 |         this.onResizeEnd && this.onResizeEnd(e)
247 |       }
248 |       document.addEventListener('mousemove', onMove)
249 |       document.addEventListener('mouseup', onUp)
250 |     }
251 |   }
252 | }
253 | </script>
254 | 
255 | <style lang="less" scoped>
256 |   .rect-box {
257 |     position: fixed;
258 |     cursor: move;
259 |     z-index: 999;
260 |     user-select: none;
261 |     // pointer-events: none;
262 |     &.locked {
263 |       > div {
264 |         display: none;
265 |       }
266 |       &:before {
267 |         outline-color: #ff3d67;
268 |       }
269 |       &:after {
270 |         outline-color: #ff3d67;
271 |       }
272 |     }
273 |     &:before {
274 |       content: "";
275 |       position: absolute;
276 |       left: 0;
277 |       top: 0;
278 |       right: 0;
279 |       bottom: 0;
280 |       outline: 1px solid hsla(0,0%,100%,.67);
281 |     }
282 |     &:after {
283 |       content: "";
284 |       position: absolute;
285 |       left: 0;
286 |       top: 0;
287 |       right: 0;
288 |       bottom: 0;
289 |       outline: 1px dashed rgba(0,0,0,.5);
290 |     }
291 |   }
292 |   .rotate {
293 |     cursor: alias !important;
294 |     .rotate-icon {
295 |       position: absolute;
296 |       pointer-events: all;
297 |       width: 14px;
298 |       height: 14px;
299 |       left: 50%;
300 |       top: -32px;
301 |       margin-left: -7px;
302 |       border: 1px solid #409EFF;
303 |       border-radius: 50%;
304 |       box-sizing: border-box;
305 |     }
306 |   }
307 |   .scale {
308 |     pointer-events: all;
309 |     position: absolute;
310 |     width: 8px;
311 |     height: 8px;
312 |     cursor: se-resize;
313 |     z-index: 110;
314 |     transform: none;
315 |     border: 1px solid #409EFF;
316 |     background-color: #fff;
317 |     border-radius: 50%;
318 |     box-sizing: border-box;
319 |   }
320 |   .t,
321 |   .tl,
322 |   .tr {
323 |     top: -4px;
324 |   }
325 | 
326 |   .b,
327 |   .bl,
328 |   .br {
329 |     bottom: -4px;
330 |   }
331 | 
332 |   .r,
333 |   .tr,
334 |   .br {
335 |     right: -4px;
336 |   }
337 | 
338 |   .tl,
339 |   .l,
340 |   .bl {
341 |     left: -4px;
342 |   }
343 | 
344 |   .l,
345 |   .r {
346 |     top: 50%;
347 |     margin-top: -4px;
348 |   }
349 | 
350 |   .t,
351 |   .b {
352 |     left: 50%;
353 |     margin-left: -4px;
354 |   }
355 | </style>
356 | 


--------------------------------------------------------------------------------
/src/vue-drag-rotate-resize/utils.js:
--------------------------------------------------------------------------------
  1 | export const getLength = (x, y) => Math.sqrt(x * x + y * y)
  2 | 
  3 | export const getAngle = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => {
  4 |   const dot = x1 * x2 + y1 * y2
  5 |   const det = x1 * y2 - y1 * x2
  6 |   const angle = Math.atan2(det, dot) / Math.PI * 180
  7 |   return (angle + 360) % 360
  8 | }
  9 | 
 10 | export const degToRadian = (deg) => deg * Math.PI / 180
 11 | 
 12 | const cos = (deg) => Math.cos(degToRadian(deg))
 13 | const sin = (deg) => Math.sin(degToRadian(deg))
 14 | 
 15 | const setWidthAndDeltaW = (width, deltaW, minWidth) => {
 16 |   const expectedWidth = width + deltaW
 17 |   if (expectedWidth > minWidth) {
 18 |     width = expectedWidth
 19 |   } else {
 20 |     deltaW = minWidth - width
 21 |     width = minWidth
 22 |   }
 23 |   return { width, deltaW }
 24 | }
 25 | 
 26 | const setHeightAndDeltaH = (height, deltaH, minHeight) => {
 27 |   const expectedHeight = height + deltaH
 28 |   if (expectedHeight > minHeight) {
 29 |     height = expectedHeight
 30 |   } else {
 31 |     deltaH = minHeight - height
 32 |     height = minHeight
 33 |   }
 34 |   return { height, deltaH }
 35 | }
 36 | 
 37 | export const getNewStyle = (type, rect, deltaW, deltaH, ratio, minWidth, minHeight) => {
 38 |   let { width, height, centerX, centerY, rotateAngle } = rect
 39 |   const widthFlag = width < 0 ? -1 : 1
 40 |   const heightFlag = height < 0 ? -1 : 1
 41 |   width = Math.abs(width)
 42 |   height = Math.abs(height)
 43 |   switch (type) {
 44 |     case 'r': {
 45 |       const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
 46 |       width = widthAndDeltaW.width
 47 |       deltaW = widthAndDeltaW.deltaW
 48 |       if (ratio) {
 49 |         deltaH = deltaW / ratio
 50 |         height = width / ratio
 51 |         // 左上角固定
 52 |         centerX += deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle)
 53 |         centerY += deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle)
 54 |       } else {
 55 |         // 左边固定
 56 |         centerX += deltaW / 2 * cos(rotateAngle)
 57 |         centerY += deltaW / 2 * sin(rotateAngle)
 58 |       }
 59 |       break
 60 |     }
 61 |     case 'tr': {
 62 |       deltaH = -deltaH
 63 |       const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
 64 |       width = widthAndDeltaW.width
 65 |       deltaW = widthAndDeltaW.deltaW
 66 |       const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
 67 |       height = heightAndDeltaH.height
 68 |       deltaH = heightAndDeltaH.deltaH
 69 |       if (ratio) {
 70 |         deltaW = deltaH * ratio
 71 |         width = height * ratio
 72 |       }
 73 |       centerX += deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle)
 74 |       centerY += deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle)
 75 |       break
 76 |     }
 77 |     case 'br': {
 78 |       const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
 79 |       width = widthAndDeltaW.width
 80 |       deltaW = widthAndDeltaW.deltaW
 81 |       const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
 82 |       height = heightAndDeltaH.height
 83 |       deltaH = heightAndDeltaH.deltaH
 84 |       if (ratio) {
 85 |         deltaW = deltaH * ratio
 86 |         width = height * ratio
 87 |       }
 88 |       centerX += deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle)
 89 |       centerY += deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle)
 90 |       break
 91 |     }
 92 |     case 'b': {
 93 |       const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
 94 |       height = heightAndDeltaH.height
 95 |       deltaH = heightAndDeltaH.deltaH
 96 |       if (ratio) {
 97 |         deltaW = deltaH * ratio
 98 |         width = height * ratio
 99 |         // 左上角固定
100 |         centerX += deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle)
101 |         centerY += deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle)
102 |       } else {
103 |         // 上边固定
104 |         centerX -= deltaH / 2 * sin(rotateAngle)
105 |         centerY += deltaH / 2 * cos(rotateAngle)
106 |       }
107 |       break
108 |     }
109 |     case 'bl': {
110 |       deltaW = -deltaW
111 |       const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
112 |       width = widthAndDeltaW.width
113 |       deltaW = widthAndDeltaW.deltaW
114 |       const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
115 |       height = heightAndDeltaH.height
116 |       deltaH = heightAndDeltaH.deltaH
117 |       if (ratio) {
118 |         height = width / ratio
119 |         deltaH = deltaW / ratio
120 |       }
121 |       centerX -= deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle)
122 |       centerY -= deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle)
123 |       break
124 |     }
125 |     case 'l': {
126 |       deltaW = -deltaW
127 |       const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
128 |       width = widthAndDeltaW.width
129 |       deltaW = widthAndDeltaW.deltaW
130 |       if (ratio) {
131 |         height = width / ratio
132 |         deltaH = deltaW / ratio
133 |         // 右上角固定
134 |         centerX -= deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle)
135 |         centerY -= deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle)
136 |       } else {
137 |         // 右边固定
138 |         centerX -= deltaW / 2 * cos(rotateAngle)
139 |         centerY -= deltaW / 2 * sin(rotateAngle)
140 |       }
141 |       break
142 |     }
143 |     case 'tl': {
144 |       deltaW = -deltaW
145 |       deltaH = -deltaH
146 |       const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
147 |       width = widthAndDeltaW.width
148 |       deltaW = widthAndDeltaW.deltaW
149 |       const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
150 |       height = heightAndDeltaH.height
151 |       deltaH = heightAndDeltaH.deltaH
152 |       if (ratio) {
153 |         width = height * ratio
154 |         deltaW = deltaH * ratio
155 |       }
156 |       centerX -= deltaW / 2 * cos(rotateAngle) - deltaH / 2 * sin(rotateAngle)
157 |       centerY -= deltaW / 2 * sin(rotateAngle) + deltaH / 2 * cos(rotateAngle)
158 |       break
159 |     }
160 |     case 't': {
161 |       deltaH = -deltaH
162 |       const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
163 |       height = heightAndDeltaH.height
164 |       deltaH = heightAndDeltaH.deltaH
165 |       if (ratio) {
166 |         width = height * ratio
167 |         deltaW = deltaH * ratio
168 |         // 左下角固定
169 |         centerX += deltaW / 2 * cos(rotateAngle) + deltaH / 2 * sin(rotateAngle)
170 |         centerY += deltaW / 2 * sin(rotateAngle) - deltaH / 2 * cos(rotateAngle)
171 |       } else {
172 |         centerX += deltaH / 2 * sin(rotateAngle)
173 |         centerY -= deltaH / 2 * cos(rotateAngle)
174 |       }
175 |       break
176 |     }
177 |   }
178 | 
179 |   return {
180 |     position: {
181 |       centerX,
182 |       centerY
183 |     },
184 |     size: {
185 |       width: width * widthFlag,
186 |       height: height * heightFlag
187 |     }
188 |   }
189 | }
190 | 
191 | const cursorStartMap = { n: 0, ne: 1, e: 2, se: 3, s: 4, sw: 5, w: 6, nw: 7 }
192 | // const cursorDirectionArray = [ 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw' ]
193 | const cursorDirectionArray = ['ns', 'nesw', 'ew', 'nwse', 'ns', 'nesw', 'ew', 'nwse']
194 | const cursorMap = { 0: 0, 1: 1, 2: 2, 3: 2, 4: 3, 5: 4, 6: 4, 7: 5, 8: 6, 9: 6, 10: 7, 11: 8 }
195 | export const getCursor = (rotateAngle, d) => {
196 |   const increment = cursorMap[ Math.floor(rotateAngle / 30) ]
197 |   const index = cursorStartMap[ d ]
198 |   const newIndex = (index + increment) % 8
199 |   return cursorDirectionArray[ newIndex ]
200 | }
201 | 
202 | export const centerToTL = ({ centerX, centerY, width, height, rotateAngle }) => ({
203 |   top: centerY - height / 2,
204 |   left: centerX - width / 2,
205 |   width,
206 |   height,
207 |   rotateAngle
208 | })
209 | 
210 | export const tLToCenter = ({ top, left, width, height, rotateAngle }) => ({
211 |   position: {
212 |     centerX: left + width / 2,
213 |     centerY: top + height / 2
214 |   },
215 |   size: {
216 |     width,
217 |     height
218 |   },
219 |   transform: {
220 |     rotateAngle
221 |   }
222 | })
223 | 
224 | /**
225 |  * 获取一个矩形的中心点
226 |  * @param  {object} rect 矩形宽高对象
227 |  * @return {object}      中心点坐标
228 |  * @example
229 |  * getRectCenter({width: 100, height: 100})
230 |  * // => {centerX: 50, centerY: 50}
231 |  */
232 | export const getRectCenter = (rect) => {
233 |   return {
234 |     centerX: rect.width / 2,
235 |     centerY: rect.height / 2
236 |   }
237 | }
238 | 
239 | /**
240 |  * 获取2个矩形的中心点偏移值
241 |  * @param  {object}  originRect  原宽高对象
242 |  * @param  {object}  targetRect  目标宽高对象
243 |  * @example
244 |  * getRect2CenterTranslate({width: 100, height: 100}, {width: 200, height: 200})
245 |  * // => {left: 50, top: 50}
246 |  */
247 | export const getRect2CenterTranslate = (originRect, targetRect) => {
248 |   const targetCenter = getRectCenter(targetRect)
249 |   const originCenter = getRectCenter(originRect)
250 |   return {
251 |     top: targetCenter.centerY - originCenter.centerY,
252 |     left: targetCenter.centerX - originCenter.centerX
253 |   }
254 | }
255 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils'
 2 | import HelloWorld from '@/components/HelloWorld.vue'
 3 | 
 4 | describe('HelloWorld.vue', () => {
 5 |   it('renders props.msg when passed', () => {
 6 |     const msg = 'new message'
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       propsData: { msg }
 9 |     })
10 |     expect(wrapper.text()).toMatch(msg)
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   pages: {
 3 |     index: {
 4 |       entry: 'examples/main.js',
 5 |       template: 'examples/index.html',
 6 |       filename: 'index.html'
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------