@saqqdy/svg.resize.js
v1.4.3
Published
An extension for svg.js which allows to resize elements which are selected
Downloads
15
Readme
svg.resize.js
An extension of svg.js which allows to resize elements which are selected with svg.select.js
Demo
For a demo see http://saqqdy.github.io/svg.resize.js/
Get Started
Install
svg.resize.js
using bower:bower install svg.resize.js
Include the script after svg.js and svg.select.js into your page
<script src="svg.js"></script> <script src="svg.select.js"></script> <script src="svg.resize.js"></script>
Select a rectangle and make it resizeable:
<div id="myDrawing"></div> var drawing = new SVG('myDrawing').size(500, 500); drawing.rect(50,50).selectize().resize()
Usage
Activate resizing
var draw = SVG('drawing');
var rect = draw.rect(100,100);
rect.selectize().resize();
Deactivate resizing
rect.resize('stop');
Keep element within constrained box
var draw = SVG('drawing');
var rect = draw.rect(100, 100);
var opt = {
constraint: {
minX: 0,
minY: 0,
maxX: 200,
maxY: 300
}
};
rect.selectize().resize(opt)
Options
snapToGrid
: Snaps the shape to a virtual grid while resizing (default1
)snapToAngle
: Snaps to an angle when rotating (default0.1
)constraint
: Keep element within constrained box (see usage above); The box snaps to the grid defined bysnapToGrid
.saveAspectRatio
: Save aspect ratio of the element while resizing with left-top, left-bottom, right-top, right-bottom points.
Events
resizing
: Fired when changes occurresizedone
: Fired when resizing is done
Known Issues
- resize nested svgs does not work