docs: update README

This commit is contained in:
Zeno Zeng 2021-06-05 14:44:05 +08:00
parent c0d5b7746d
commit 6d3c41335a
3 changed files with 18 additions and 87 deletions

View File

@ -1,22 +1,18 @@
Canvas2Svg [![Build Status](https://travis-ci.org/gliffy/canvas2svg.svg?branch=master)](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.

View File

@ -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:

View File

@ -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",