VueJS Free Transform Tool
VueJS component for resizing, dragging and rotating html elements using css transform matrix
Installation
yarn install vue-free-transform
or npm install vue-free-transform --save
Demo
https://codesandbox.io/s/1jl7z9p3q
Usage
<FreeTransform :x="0" :y="0" :scale-x="1" :scale-y="1" :width="100" :height="100" :angle="0" :offset-x="0" :offset-y="0" @update="update($event)"> <div class="element" :style="{width: `100px`,height: `100px`}"> <img src="..."/> </div> </FreeTransform>
Optional Attributes
selected
selectOn
styles
Attribute | Description |
---|---|
styles | additional styles for parent wrapper usefull for z-index |
selected | hide the controls when values is false |
selectOn | trigger selection on mousedown , click or dblclick |
aspect-ratio | enable aspect ratio resizing default (true) |
scale-from-center | enable scale from center resizing default (true) |
Events
onSelect
dblclick
click
mousedown
css
Keyboard shortcuts
shift
for aspect ratio resizing
alt
for scaling from center
shift
+ alt
scaling from center based on aspect ratio
shift
while rotation will snap rotation using 15 degrees