Svg.resize.js Save

An extension of svg.js which allows to resize elements which are selected

Project 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://svgdotjs.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)

Set minimum size

var draw = SVG('drawing');
var rect = draw.rect(100, 100);
var opt = {
	resizeLimits: {
		width: 20,
		height: 20,
	}
};
rect.selectize().resize(opt)

Options

  • snapToGrid: Snaps the shape to a virtual grid while resizing (default 1)
  • snapToAngle: Snaps to an angle when rotating (default 0.1)
  • constraint: Keep element within constrained box (see usage above); The box snaps to the grid defined by snapToGrid.
  • resizeLimits: Keep element with minimum size (default { width: 0, height: 0 })
  • saveAspectRatio: Save aspect ratio of the element while resizing with left-top, left-bottom, right-top, right-bottom points.

Events

  • resizing: Fired when changes occur
  • resizedone: Fired when resizing is done

Known Issues

  • resize nested svgs does not work
Open Source Agenda is not affiliated with "Svg.resize.js" Project. README Source: svgdotjs/svg.resize.js
Stars
90
Open Issues
16
Last Commit
4 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating