@4keys/svg.resize.js 中文文档教程

Question

svg.resize.js

svg.js 的扩展，允许调整使用 svg.select.js

Demo

有关演示，请参阅 http://svgdotjs.github.io/svg.resize.js/

Get Started

• 安装 svg.resize.js< /code> 使用 bower：

  bower install svg.resize.js
  

• 将 svg.js 和 svg.select.js 之后的脚本包含到页面中

  <script src="svg.js"></script>
  <script src="svg.select.js"></script>
  <script src="svg.resize.js"></script>
  

• 选择一个矩形并使其可调整大小：

  <div id="myDrawing"></div>
  
  var drawing = new SVG('myDrawing').size(500, 500);
  drawing.rect(50,50).selectize().resize()
  

Usage

激活调整大小

var draw = SVG('drawing');
var rect = draw.rect(100,100);
rect.selectize().resize();

停用调整大小

rect.resize('stop');

将元素保持在约束框中

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 (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.
• 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