skmail / Vue Free Transform
Licence: mit
VueJS Free transform tool component
Stars: ✭ 172
Projects that are alternatives of or similar to Vue Free Transform
Live Tools
Live-Tools is a library project which aims to convert some Android features to LiveData
Stars: ✭ 75 (-56.4%)
Mutual labels: rotation
React Native Easy Gestures
React Native Gestures. Support: Drag, Scale and Rotate a Component.
Stars: ✭ 153 (-11.05%)
Mutual labels: rotation
Handeye calib camodocal
Easy to use and accurate hand eye calibration which has been working reliably for years (2016-present) with kinect, kinectv2, rgbd cameras, optical trackers, and several robots including the ur5 and kuka iiwa.
Stars: ✭ 364 (+111.63%)
Mutual labels: rotation
Robond Kinematics Project
Robotic Arm Pick & Place using ROS, RViz, Gazebo, and KUKA KR210
Stars: ✭ 39 (-77.33%)
Mutual labels: rotation
Circlr
Animation rotation via scroll, mouse and touch events
Stars: ✭ 159 (-7.56%)
Mutual labels: rotation
React Native Amazing Cropper
Image cropper for react native using Animated API
Stars: ✭ 67 (-61.05%)
Mutual labels: rotation
Jpeg Autorotate
Node module to rotate JPEG images based on EXIF orientation.
Stars: ✭ 127 (-26.16%)
Mutual labels: rotation
R3det tensorflow
Code for AAAI 2021 paper: R3Det: Refined Single-Stage Detector with Feature Refinement for Rotating Object
Stars: ✭ 434 (+152.33%)
Mutual labels: rotation
Rverify.js
✅❎ A lightweight image rotation verification plugin.
Stars: ✭ 33 (-80.81%)
Mutual labels: rotation
Androiduigesturerecognizer
AndroidGestureRecognizer is an Android implementation of the Apple's UIGestureRecognizer framework
Stars: ✭ 119 (-30.81%)
Mutual labels: rotation
Mesh mesh align plus
Precisely align, move, and measure+match objects and mesh parts in your 3D scenes.
Stars: ✭ 350 (+103.49%)
Mutual labels: rotation
Aginterfaceinteraction
library performs interaction with UI interface
Stars: ✭ 156 (-9.3%)
Mutual labels: rotation
Dota Doai
This repo is the codebase for our team to participate in DOTA related competitions, including rotation and horizontal detection.
Stars: ✭ 326 (+89.53%)
Mutual labels: rotation
Jqueryrotate
jQueryRotate - plugin to rotate images by any angle cross-browse with animation support
Stars: ✭ 157 (-8.72%)
Mutual labels: rotation
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
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].