vue-free-transform

A free transform tool

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-free-transform
182251.0.114 years ago4 years agoMinified + gzip package size for vue-free-transform in KB

Readme

VueJS Free Transform Tool
NPM Version NPM Downloads License: MIT Build Status
VueJS component for resizing, dragging and rotating html elements using css transform matrix
VueJS free transform tool

Installation

yarn install vue-free-transform or npm install vue-free-transform --save

Demo

https://codesandbox.io/s/1jl7z9p3q

Usage

import FreeTransform from 'vue-free-transform'


<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


.tr-transform--active{
    position: absolute;
    z-index: 5;
}

.tr-transform__content{
    user-select: none;
}
.tr-transform__rotator {
    top: -45px;
    left: calc(50% - 7px);
}

.tr-transform__rotator,
.tr-transform__scale-point {
    background: #fff;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.tr-transform__rotator:hover,
.tr-transform__scale-point:hover {
    background: #F1F5F8;
}

.tr-transform__rotator:active,
.tr-transform__scale-point:active {
    background: #DAE1E7;
}

.tr-transform__scale-point {

}

.tr-transform__scale-point--tl {
    top: -7px;
    left: -7px;
}

.tr-transform__scale-point--ml {
    top: calc(50% - 7px);
    left: -7px;
}

.tr-transform__scale-point--tr {
    left: calc(100% - 7px);
    top: -7px;
}

.tr-transform__scale-point--tm {
    left: calc(50% - 7px);
    top: -7px;
}

.tr-transform__scale-point--mr {
    left: calc(100% - 7px);
    top: calc(50% - 7px);
}

.tr-transform__scale-point--bl {
    left: -7px;
    top: calc(100% - 7px);
}

.tr-transform__scale-point--bm {
    left: calc(50% - 7px);
    top: calc(100% - 7px);
}

.tr-transform__scale-point--br {
    left: calc(100% - 7px);
    top: calc(100% - 7px);
}

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