5.0.1-beta.0 • Published 2 years ago
@svg-drawing/core v5.0.1-beta.0
@svg-drawing/core
How to use
npm
Install
yarn add @svg-drawing/core
# or
# npm i svg-drawing
Example code is here
This example renders the drawing area.
import { SvgDrawing } from '@svg-drawing/core'
const el = document.createElement('div')
// Drawing area will be resized to fit the rendering area
el.setAttribute(
'style',
`
border: 1px solid #ddd;
width: 500px;
height: 500px;
`
)
document.body.appendChid(el)
new SvgDrawing(el)
SvgDrawing methods.
const draw = new SvgDrawing(el)
// change parameter. There are other changeable parameters like fill, close, curve, etc.
draw.penColor = '#00b'
draw.penWidth = 10
// drawing deactivate
draw.off()
// drawing reactivate
draw.on()
// drawing all clear
draw.clear()
// undo drawing
draw.undo()
// Download image. Also available in SvgAnimation, Renderer
draw.download() // Default download is svg.
draw.download({ extension: 'jpg', filename: 'example.jpg' })
draw.download({ extension: 'png', filename: 'example.png' })
// Load svg data. Only the path element.
// SVG exported by this library can be read.
draw.svg.parseSVGString(
'<svg width="200" height="200"><path fill="#f00" stroke="#00f" stroke-width="4" d="M 1 1 L 2 2 C 3 3 5 3 7 3 Z"></path></svg>'
)
draw.svg.parseSVGElement(document.getElementByID('loadSVG'))
CDN
<div id="draw-area" style="width: 100vw;height: 100vh;"></div>
<script src="https://unpkg.com/@svg-drawing/core@4.0.0-beta.6/lib/index.umd.js"></script>
<script>
var draw = new SVGDCore.SvgDrawing(document.getElementById('draw-area'))
</script>
Here is an example for Html only.
4.2.5
2 years ago
5.0.1-beta.0
2 years ago
5.0.0-beta.1
2 years ago
4.2.4-alpha.0
2 years ago
4.2.3
2 years ago
4.2.4
2 years ago
4.2.2
2 years ago
4.2.1
3 years ago
4.2.0
3 years ago
4.1.0
3 years ago
4.0.1
3 years ago
4.0.0
4 years ago
4.0.0-beta.6
4 years ago
4.0.0-beta.5
4 years ago
4.0.0-beta.4
4 years ago
4.0.0-beta.3
4 years ago
4.0.0-beta.2
4 years ago
4.0.0-beta.1
4 years ago