You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+64-32Lines changed: 64 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,10 @@
1
-
## Pending Next Release
1
+
## v1.4.0
2
2
3
-
- fix: make .image() use the transformation matrix ([Michael Elsdörfer](https://github.com/miracle2k)) (https://github.com/zenozeng/p5.js-svg/pull/227)
- feat: sync element's width and height to context ([email protected]), calling clear() in your draw function will now trigger internal context.__clearCanvas() to remove elements.
58
+
- feat: sync element's width and height to context ([email protected]), calling
59
+
clear() in your draw function will now trigger internal
60
+
context.__clearCanvas() to remove elements.
52
61
- test: add test for loadFont, fixes #147
53
62
54
63
## v1.0.6
@@ -57,13 +66,18 @@
57
66
58
67
## v1.0.5
59
68
60
-
- feat: implement CanvasTransform Interface, see https://github.com/gliffy/canvas2svg/pull/83, fixes https://github.com/zenozeng/p5.js-svg/issues/170,
61
-
- refactor: support [email protected], see https://github.com/zenozeng/p5.js-svg/pull/182
- use createCanvas(w, h, SVG) instead of createSVG(w, h)
295
325
296
326
- set viewBox attribute when resize, fixes scale issue
297
327
298
-
- add RendererSVG.prototype._withPixelDensity (temporally set pixel density to 1), fixes window scaled issue (https://github.com/zenozeng/p5.js-svg/issues/35)
328
+
- add RendererSVG.prototype._withPixelDensity (temporally set pixel density to
The major difference is that SVG Renderer is based on SVG Document Object Model
47
-
while Canvas 2D Renderer is based on pixels.
48
-
Therefore, the performance may not be as good as canvas, but SVG-format vector images can be rendered at any size without loss of quality.
46
+
while Canvas 2D Renderer is based on pixels. Therefore, the performance may not
47
+
be as good as canvas, but SVG-format vector images can be rendered at any size
48
+
without loss of quality.
49
49
50
-
Note that not all drawing results are exactly same in pixel-level.For example, the round rects below are almost same, but there are some pixels different.
50
+
Note that not all drawing results are exactly same in pixel-level.For example,
51
+
the round rects below are almost same, but there are some pixels different.
51
52
52
53
53
54
54
-
As for filters, gray(), invert(), threshold(), opaque() did have same behavior as Canvas2D Renderer. But blur(), erode(), dilate() didn't.
55
+
As for filters, gray(), invert(), threshold(), opaque() did have same behavior
56
+
as Canvas2D Renderer. But blur(), erode(), dilate() didn't.
55
57
56
-
To implement blur, feGaussianBlur was used, which is different from Processing's blur.
57
-
58
+
To implement blur, feGaussianBlur was used, which is different from Processing's
59
+
blur. 
58
60
59
-
As for erode() and dilate(), they were implemnted using feOffset and feBlend. So, the result is not exactly same.
60
-
61
+
As for erode() and dilate(), they were implemnted using feOffset and feBlend.
62
+
So, the result is not exactly same. 
61
63
62
-
You can view all the pixels based diff on the [online tests](http://zenozeng.github.io/p5.js-svg/test/).
@@ -70,20 +73,25 @@ [email protected] was tested and should work on:
70
73
71
74
## How it works
72
75
73
-
p5.RendererSVG is a class which extends p5.Renderer2D.
74
-
A mocked \<canvas\> element and a CanvasRenderingContext2D api are provided using [svgcanvas](https://github.com/zenozeng/svgcanvas),
75
-
which is JavaScript Object that syncs proprieties and draws on \<svg\> element.
76
+
p5.RendererSVG is a class which extends p5.Renderer2D. A mocked \<canvas\>
77
+
element and a CanvasRenderingContext2D api are provided using
78
+
[svgcanvas](https://github.com/zenozeng/svgcanvas), which is JavaScript Object
79
+
that syncs proprieties and draws on \<svg\> element.
76
80
77
81
## Known issue
78
82
79
83
### Too many child elements
80
84
81
-
Since SVG is XML-based, every call of the draw function will insert elements into it, and these elements keep existing even if they are not visible. So, long-time running will result in too many child elements. We recommend calling clear() in your draw function, which will trigger internal context.__clearCanvas() to remove elements.
85
+
Since SVG is XML-based, every call of the draw function will insert elements
86
+
into it, and these elements keep existing even if they are not visible. So,
87
+
long-time running will result in too many child elements. We recommend calling
88
+
clear() in your draw function, which will trigger internal
89
+
context.__clearCanvas() to remove elements.
82
90
83
91
```javascript
84
92
functiondraw() {
85
-
clear();
86
-
// draw
93
+
clear();
94
+
// draw
87
95
}
88
96
```
89
97
@@ -102,11 +110,9 @@ npm run build
102
110
103
111
## Tests
104
112
105
-
p5.SVG was driven by tests.
106
-
We use Karma and mocha.
107
-
Most tests are based on pixel-diff.
108
-
There are still some p5's methods not covered with unit tests.
109
-
But Rendering and Shape API are already covered with tests and should work.
113
+
p5.SVG was driven by tests. We use Karma and mocha. Most tests are based on
114
+
pixel-diff. There are still some p5's methods not covered with unit tests. But
115
+
Rendering and Shape API are already covered with tests and should work.
110
116
111
117
If you found a bug, feel free to open a issue or pull a request.
0 commit comments