docs: update README
This commit is contained in:
parent
c0d5b7746d
commit
6d3c41335a
93
README.md
93
README.md
@ -1,22 +1,18 @@
|
|||||||
Canvas2Svg [](https://travis-ci.org/gliffy/canvas2svg)
|
# SVGCanvas
|
||||||
==========
|
|
||||||
This library turns your Canvas into SVG using javascript. In other words, this library lets you build an SVG document
|
Draw on SVG using Canvas's 2D Context API.
|
||||||
using the canvas api. Why use it?
|
A maintained fork of [gliffy's canvas2svg](https://github.com/gliffy/canvas2svg).
|
||||||
* You have a canvas drawing you want to persist as an SVG file.
|
|
||||||
* You like exporting things.
|
## Demo
|
||||||
* Because you didn't want to transform your custom file format to SVG.
|
|
||||||
|
|
||||||
Demo
|
|
||||||
==========
|
|
||||||
http://gliffy.github.io/canvas2svg/
|
http://gliffy.github.io/canvas2svg/
|
||||||
|
|
||||||
How it works
|
## How it works
|
||||||
==========
|
|
||||||
We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we
|
We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we
|
||||||
build up a scene graph in SVG. Yay!
|
build up a scene graph in SVG. Yay!
|
||||||
|
|
||||||
Usage
|
## Usage
|
||||||
==========
|
|
||||||
```javascript
|
```javascript
|
||||||
//Create a new mock canvas context. Pass in your desired width and height for your svg document.
|
//Create a new mock canvas context. Pass in your desired width and height for your svg document.
|
||||||
var ctx = new C2S(500,500);
|
var ctx = new C2S(500,500);
|
||||||
@ -33,55 +29,7 @@ var mySerializedSVG = ctx.getSerializedSvg(); //true here, if you need to conver
|
|||||||
var svg = ctx.getSvg();
|
var svg = ctx.getSvg();
|
||||||
```
|
```
|
||||||
|
|
||||||
Tests
|
## Using with node.js
|
||||||
==========
|
|
||||||
To run tests:
|
|
||||||
```
|
|
||||||
npm install
|
|
||||||
npm test
|
|
||||||
```
|
|
||||||
|
|
||||||
To run tests against Chrome and Firefox, call karma directly. This is not the default npm test due to the limited
|
|
||||||
browser selection in travis.
|
|
||||||
```
|
|
||||||
npm install karma-cli -g
|
|
||||||
karma start
|
|
||||||
```
|
|
||||||
|
|
||||||
Debug
|
|
||||||
=========
|
|
||||||
Play with canvas2svg in the provided test/playground.html or run test locally in your browser in test/testrunner.html
|
|
||||||
|
|
||||||
|
|
||||||
Add An Example Case
|
|
||||||
=========
|
|
||||||
Add a test file to the test/example folder. In your file make sure to add the drawing function to the global `C2S_EXAMPLES`,
|
|
||||||
with your filename as a key. For example `test\example\linewidth.js` should look something like:
|
|
||||||
```javascript
|
|
||||||
window.C2S_EXAMPLES['linewidth'] = function(ctx) {
|
|
||||||
for (var i = 0; i < 10; i++){
|
|
||||||
ctx.lineWidth = 1+i;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(5+i*14,5);
|
|
||||||
ctx.lineTo(5+i*14,140);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
install gulp globally if you haven't done so already
|
|
||||||
```
|
|
||||||
npm install -g gulp
|
|
||||||
```
|
|
||||||
Then run the following to update playground.html and testrunner.html
|
|
||||||
```
|
|
||||||
gulp
|
|
||||||
```
|
|
||||||
You should now be able to select your new example from playground.html or see it run in testrunner.html
|
|
||||||
|
|
||||||
If you find a bug, or want to add functionality, please add a new test case and include it with your pull request.
|
|
||||||
|
|
||||||
Using with node.js
|
|
||||||
==================
|
|
||||||
|
|
||||||
You can use `canvas2svg` with node.js using [jsdom](https://github.com/tmpvar/jsdom) with [node-canvas](https://github.com/Automattic/node-canvas). To do this first create a new document object, and then create a new instance of `C2S` based on that document:
|
You can use `canvas2svg` with node.js using [jsdom](https://github.com/tmpvar/jsdom) with [node-canvas](https://github.com/Automattic/node-canvas). To do this first create a new document object, and then create a new instance of `C2S` based on that document:
|
||||||
|
|
||||||
@ -98,8 +46,8 @@ var ctx = new C2S({document: document});
|
|||||||
|
|
||||||
N.B. You may not need node-canvas for some simple operations when using jsdom >= 6.3.0, but it's still recommended that you install it.
|
N.B. You may not need node-canvas for some simple operations when using jsdom >= 6.3.0, but it's still recommended that you install it.
|
||||||
|
|
||||||
Updates
|
## CHANGELOG
|
||||||
==========
|
|
||||||
- v1.0.19 Fix __parseFont to not crash
|
- v1.0.19 Fix __parseFont to not crash
|
||||||
- v1.0.18 clip was not working, the path never made it to the clip area
|
- v1.0.18 clip was not working, the path never made it to the clip area
|
||||||
- v1.0.17 Fix bug with drawing in an empty context. Fix image translation problem. Fix globalAlpha issue.
|
- v1.0.17 Fix bug with drawing in an empty context. Fix image translation problem. Fix globalAlpha issue.
|
||||||
@ -121,21 +69,6 @@ Updates
|
|||||||
- v1.0.1 Allow C2S to be called as a function. https://github.com/gliffy/canvas2svg/issues/2
|
- v1.0.1 Allow C2S to be called as a function. https://github.com/gliffy/canvas2svg/issues/2
|
||||||
- v1.0.0 Initial release
|
- v1.0.0 Initial release
|
||||||
|
|
||||||
Misc
|
## License
|
||||||
==========
|
|
||||||
Some canvas 2d context methods are not implemented yet. Watch out for setTransform and arcTo.
|
|
||||||
|
|
||||||
Releasing
|
|
||||||
=========
|
|
||||||
|
|
||||||
To release a new version:
|
|
||||||
|
|
||||||
* Run `gulp bump` to update the version number
|
|
||||||
* Add a new entry to the [Updates](#Updates) table
|
|
||||||
* `git commit -am v1.0.xx`
|
|
||||||
* `git push`
|
|
||||||
* `npm publish`
|
|
||||||
|
|
||||||
License
|
|
||||||
==========
|
|
||||||
This library is licensed under the MIT license.
|
This library is licensed under the MIT license.
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
/*!!
|
/*!!
|
||||||
* Canvas 2 Svg v1.0.19
|
* SVGCanvas v1.1.0
|
||||||
* A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
|
* A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
|
||||||
*
|
*
|
||||||
* Licensed under the MIT license:
|
* Licensed under the MIT license:
|
||||||
|
10
package.json
10
package.json
@ -1,9 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "canvas2svg",
|
"name": "svgcanvas",
|
||||||
"version": "1.0.19",
|
"version": "1.1.0",
|
||||||
"description": "canvas2svg",
|
"description": "svgcanvas",
|
||||||
"main": "canvas2svg.js",
|
"main": "canvas2svg.js",
|
||||||
"homepage": "http://gliffy.github.io/canvas2svg/",
|
|
||||||
"directories": {
|
"directories": {
|
||||||
"test": "test"
|
"test": "test"
|
||||||
},
|
},
|
||||||
@ -15,9 +14,8 @@
|
|||||||
"svg",
|
"svg",
|
||||||
"canvas2svg"
|
"canvas2svg"
|
||||||
],
|
],
|
||||||
"author": "Kerry Liu",
|
"author": "Zeno Zeng",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"chai": "^2.1.1",
|
"chai": "^2.1.1",
|
||||||
"cheerio": "^0.19.0",
|
"cheerio": "^0.19.0",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user