90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
# svg.resize.js
|
|
|
|
An extension of [svg.js](https://github.com/svgdotjs/svg.js) which allows to resize elements which are selected with [svg.select.js](https://github.com/svgdotjs/svg.select.js)
|
|
|
|
# Demo
|
|
|
|
For a demo see http://svgdotjs.github.io/svg.resize.js/
|
|
|
|
# Get Started
|
|
|
|
Install `svg.js`, `svg.select.js` and `svg.resize.js` using npm:
|
|
|
|
```bash
|
|
npm i @svgdotjs/svg.js @svgdotjs/svg.select.js @svgdotjs/svg.resize.js
|
|
```
|
|
|
|
Or get it from a cnd:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="https://unpkg.com/@svgdotjs/svg.resize.js@latest/dist/svg.resize.css" />
|
|
<script src="https://unpkg.com/@svgdotjs/svg.js"></script>
|
|
<!-- the select plugin comes bundled with the resize plugin -->
|
|
<!-- <script src="https://unpkg.com/@svgdotjs/svg.select.js"></script> -->
|
|
<script src="https://unpkg.com/@svgdotjs/svg.resize.js"></script>
|
|
```
|
|
|
|
Select and resize a rectangle using this simple piece of code:
|
|
|
|
```ts
|
|
var canvas = new SVG().addTo('body').size(500, 500)
|
|
canvas.rect(50, 50).fill('red').select().resize()
|
|
```
|
|
|
|
# Usage
|
|
|
|
Activate resizing
|
|
|
|
```ts
|
|
rect.select().resize()
|
|
```
|
|
|
|
Deactivate resizing
|
|
|
|
```ts
|
|
rect.resize(false)
|
|
```
|
|
|
|
Preserve aspect ratio, resize around center and snap to grid:
|
|
|
|
```ts
|
|
rect.resize({ preserveAspectRatio: true, aroundCenter: true, grid: 10, degree: 0.1 })
|
|
```
|
|
|
|
# Options
|
|
|
|
- `preserveAspectRatio`: Preserve the aspect ratio of the element while resizing
|
|
- `aroundCenter`: Resize around the center of the element
|
|
- `grid`: Snaps the shape to a virtual grid while resizing
|
|
- `degree`: Snaps to an angle when rotating
|
|
|
|
# Events
|
|
|
|
While resizing, a `resize` event is fired. It contains the following properties (in `event.detail`):
|
|
|
|
- `box`: The resulting bounding box after the resize operation
|
|
- `angle`: The resulting rotation angle after the resize operation
|
|
- `eventType`: The type of resize operation (the event fired by the select plugin)
|
|
- `event`: The original event
|
|
- `handler`: The resize handler
|
|
|
|
```ts
|
|
rect.on('resize', (event) => {
|
|
console.log(event.detail)
|
|
})
|
|
```
|
|
|
|
# Contributing
|
|
|
|
```bash
|
|
git clone https://github.com/svgdotjs/svg.resize.js.git
|
|
cd svg.resize.js
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
# Migration from svg.js v2
|
|
|
|
- The option naming changed a bit. Please double check
|
|
- The former events were removed. The resize event now serves the same purpose
|