docs: update README
This commit is contained in:
Zeno Zeng
parent
c0d5b7746d
commit
6d3c41335a
93
README.md
93
README.md
@ -1,22 +1,18 @@
|
||||
Canvas2Svg [](https://travis-ci.org/gliffy/canvas2svg)
|
||||
==========
|
||||
This library turns your Canvas into SVG using javascript. In other words, this library lets you build an SVG document
|
||||
using the canvas api. Why use it?
|
||||
* You have a canvas drawing you want to persist as an SVG file.
|
||||
* You like exporting things.
|
||||
* Because you didn't want to transform your custom file format to SVG.
|
||||
# SVGCanvas
|
||||
|
||||
Draw on SVG using Canvas's 2D Context API.
|
||||
A maintained fork of [gliffy's canvas2svg](https://github.com/gliffy/canvas2svg).
|
||||
|
||||
## Demo
|
||||
|
||||
Demo
|
||||
==========
|
||||
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
|
||||
build up a scene graph in SVG. Yay!
|
||||
|
||||
Usage
|
||||
==========
|
||||
## Usage
|
||||
|
||||
```javascript
|
||||
//Create a new mock canvas context. Pass in your desired width and height for your svg document.
|
||||
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();
|
||||
```
|
||||
|
||||
Tests
|
||||
==========
|
||||
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
|
||||
==================
|
||||
## 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:
|
||||
|
||||
@ -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.
|
||||
|
||||
Updates
|
||||
==========
|
||||
## CHANGELOG
|
||||
|
||||
- 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.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.0 Initial release
|
||||
|
||||
Misc
|
||||
==========
|
||||
Some canvas 2d context methods are not implemented yet. Watch out for setTransform and arcTo.
|
||||
## License
|
||||
|
||||
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.
|
||||
|
||||
@ -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.
|
||||
*
|
||||
* Licensed under the MIT license:
|
||||
|
||||
10
package.json
10
package.json
@ -1,9 +1,8 @@
|
||||
{
|
||||
"name": "canvas2svg",
|
||||
"version": "1.0.19",
|
||||
"description": "canvas2svg",
|
||||
"name": "svgcanvas",
|
||||
"version": "1.1.0",
|
||||
"description": "svgcanvas",
|
||||
"main": "canvas2svg.js",
|
||||
"homepage": "http://gliffy.github.io/canvas2svg/",
|
||||
"directories": {
|
||||
"test": "test"
|
||||
},
|
||||
@ -15,9 +14,8 @@
|
||||
"svg",
|
||||
"canvas2svg"
|
||||
],
|
||||
"author": "Kerry Liu",
|
||||
"author": "Zeno Zeng",
|
||||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"chai": "^2.1.1",
|
||||
"cheerio": "^0.19.0",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user