https://github.com/gausszhou/vue-drag-resize-rotate

一个Vue2.0组件，支持拖拽，拉伸，旋转，放缩，自动对齐；A Component for Vue.js 2.0;
https://github.com/gausszhou/vue-drag-resize-rotate

draggable resizable rotatable vue vuejs

Last synced: about 6 hours ago
JSON representation

一个Vue2.0组件，支持拖拽，拉伸，旋转，放缩，自动对齐；A Component for Vue.js 2.0;

• Host: GitHub
• URL: https://github.com/gausszhou/vue-drag-resize-rotate
• Owner: gausszhou
• License: mit
• Created: 2021-02-18T00:51:29.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-28T15:39:34.000Z (11 months ago)
• Last Synced: 2024-10-31T13:07:46.581Z (15 days ago)
• Topics: draggable, resizable, rotatable, vue, vuejs
• Language: Vue
• Homepage: https://gausszhou.github.io/vue-drag-resize-rotate/
• Size: 1.94 MB
• Stars: 134
• Watchers: 6
• Forks: 39
• Open Issues: 6
• Metadata Files:
  • Readme: README.en.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-drag-resize-rotate

 

[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE) [![Npm Package](https://img.shields.io/npm/v/@gausszhou/vue-drag-resize-rotate.svg)](https://www.npmjs.com/package/@gausszhou/vue-drag-resize-rotate)



简体中文 | English



## Tips

> Please detour if the elements dragged at the same time reach more than 50+ businesses

## Online demo

[Chinese online demo address](https://gausszhou.github.io/vue-drag-resize-rotate)

## Getting started

```bash

npm install  @gausszhou/vue-drag-resize-rotate

```

```vue

  


    

    {{ angle }}

    

  


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

export default {

  components: {

    VueDragResizeRotate,

  },

  data() {

    return {

      angle: 0,

    };

  },

  methods: {

    resizing(x, y, w, h) {

      console.log(x, y, w, h);

    },

    rotating(angle) {

      console.log(angle)

    },

  },

};

```

## Todo list

 

- [x] Fixed some regular judgment problems and 1px error of container size

- [x] Integrate auto-align function

- [x] Integrate and refactor rotation function

   - [x] realizes rotation, can stretch the size when rotating, and does not move to the vertex

   - [x] Rotary handle style follows angle changes

- [x] fix aspect ratio

   - [x] allow external incoming aspect ratio

- [x] fix zoom

- [ ] rebuild code

   - [ ] Extract logic

   - [ ] Optimized performance

> Tip: After turning on the rotation, the grid alignment and parent container restrictions will be invalid, and there will be Breaking Changes to be refactored! ! !

## References

```shell

https://github.com/mauricius/vue-draggable-resizable

https://github.com/gorkys/vue-draggable-resizable-gorkys

https://github.com/tmrcui/vue-draggable-resizable-rotatable   

```