Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🛠 Renderer.renderPath
remove jank from shape code
+64
-33
+10
js/canvas-renderer.js
+10
js/canvas-renderer.js
···
41
41
42
42
CanvasRenderer.setPath = function() {};
43
43
44
+
CanvasRenderer.renderPath = function( ctx, elem, pathCommands, isClosed ) {
45
+
this.begin( ctx, elem );
46
+
pathCommands.forEach( function( command ) {
47
+
command.render( ctx, elem, CanvasRenderer );
48
+
});
49
+
if ( isClosed ) {
50
+
this.closePath( ctx, elem );
51
+
}
52
+
};
53
+
44
54
CanvasRenderer.stroke = function( ctx, elem, isStroke, color, lineWidth ) {
45
55
if ( !isStroke ) {
46
56
return;
+21
-12
js/cone.js
+21
-12
js/cone.js
···
4
4
5
5
( function( root, factory ) {
6
6
// universal module definition
7
-
var depends = [ './utils', './vector', './anchor', './ellipse' ];
7
+
var depends = [ './utils', './vector', './path-command',
8
+
'./anchor', './ellipse' ];
8
9
/* globals define, module, require */
9
10
if ( typeof define == 'function' && define.amd ) {
10
11
// AMD
···
15
16
} else {
16
17
// browser global
17
18
var Zdog = root.Zdog;
18
-
Zdog.Cone = factory( Zdog, Zdog.Vector, Zdog.Anchor, Zdog.Ellipse );
19
+
Zdog.Cone = factory( Zdog, Zdog.Vector, Zdog.PathCommand,
20
+
Zdog.Anchor, Zdog.Ellipse );
19
21
}
20
-
}( this, function factory( utils, Vector, Anchor, Ellipse ) {
22
+
}( this, function factory( utils, Vector, PathCommand, Anchor, Ellipse ) {
21
23
22
24
var Cone = Ellipse.subclass({
23
25
length: 1,
···
39
41
this.renderApex = new Vector();
40
42
this.tangentA = new Vector();
41
43
this.tangentB = new Vector();
44
+
45
+
this.surfacePathCommands = [
46
+
new PathCommand( 'move', [ {} ] ), // points set in renderConeSurface
47
+
new PathCommand( 'line', [ {} ] ),
48
+
new PathCommand( 'line', [ {} ] ),
49
+
];
42
50
};
43
51
44
52
Cone.prototype.render = function( ctx, renderer ) {
···
84
92
tangentA.add( this.renderOrigin );
85
93
tangentB.add( this.renderOrigin );
86
94
95
+
this.setSurfaceRenderPoint( 0, tangentA );
96
+
this.setSurfaceRenderPoint( 1, this.apex.renderOrigin );
97
+
this.setSurfaceRenderPoint( 2, tangentB );
98
+
87
99
// render
88
100
var elem = this.getSurfaceRenderElement( ctx, renderer );
89
-
renderer.begin( ctx, elem );
90
-
91
-
var pathValue = '';
92
-
pathValue += renderer.move( ctx, elem, this.tangentA );
93
-
pathValue += renderer.line( ctx, elem, this.apex.renderOrigin );
94
-
pathValue += renderer.line( ctx, elem, this.tangentB );
95
-
renderer.setPath( ctx, elem, pathValue );
96
-
101
+
renderer.renderPath( ctx, elem, this.surfacePathCommands );
97
102
renderer.stroke( ctx, elem, this.stroke, this.color, this.getLineWidth() );
98
103
renderer.fill( ctx, elem, this.fill, this.color );
99
104
renderer.end( ctx, elem );
100
-
101
105
};
102
106
103
107
var svgURI = 'http://www.w3.org/2000/svg';
···
113
117
this.surfaceSvgElement.setAttribute( 'stroke-linejoin', 'round' );
114
118
}
115
119
return this.surfaceSvgElement;
120
+
};
121
+
122
+
Cone.prototype.setSurfaceRenderPoint = function( index, point ) {
123
+
var renderPoint = this.surfacePathCommands[ index ].renderPoints[0];
124
+
renderPoint.set( point );
116
125
};
117
126
118
127
return Cone;
+19
-10
js/cylinder.js
+19
-10
js/cylinder.js
···
4
4
5
5
( function( root, factory ) {
6
6
// universal module definition
7
-
var depends = [ './utils', './shape', './group', './ellipse' ];
7
+
var depends = [ './utils', '/path-command', './shape',
8
+
'./group', './ellipse' ];
8
9
/* globals define, module, require */
9
10
if ( typeof define == 'function' && define.amd ) {
10
11
// AMD
···
15
16
} else {
16
17
// browser global
17
18
var Zdog = root.Zdog;
18
-
Zdog.Cylinder = factory( Zdog, Zdog.Shape, Zdog.Group, Zdog.Ellipse );
19
+
Zdog.Cylinder = factory( Zdog, Zdog.PathCommand, Zdog.Shape,
20
+
Zdog.Group, Zdog.Ellipse );
19
21
}
20
-
}( this, function factory( utils, Shape, Group, Ellipse ) {
22
+
}( this, function factory( utils, PathCommand, Shape, Group, Ellipse ) {
21
23
22
24
function noop() {}
23
25
···
28
30
updateSort: true,
29
31
});
30
32
33
+
CylinderGroup.prototype.create = function() {
34
+
Group.prototype.create.apply( this, arguments );
35
+
this.pathCommands = [
36
+
new PathCommand( 'move', [ {} ] ),
37
+
new PathCommand( 'line', [ {} ] ),
38
+
];
39
+
};
40
+
31
41
CylinderGroup.prototype.render = function( ctx, renderer ) {
32
42
this.renderCylinderSurface( ctx, renderer );
33
43
Group.prototype.render.apply( this, arguments );
···
41
51
var elem = this.getRenderElement( ctx, renderer );
42
52
var frontBase = this.frontBase;
43
53
var rearBase = this.rearBase;
54
+
var scale = frontBase.renderNormal.magnitude();
55
+
var strokeWidth = frontBase.diameter * scale + frontBase.getLineWidth();
56
+
// set path command render points
57
+
this.pathCommands[0].renderPoints[0].set( frontBase.renderOrigin );
58
+
this.pathCommands[1].renderPoints[0].set( rearBase.renderOrigin );
44
59
45
60
if ( renderer.isCanvas ) {
46
61
ctx.lineCap = 'butt'; // nice
47
62
}
48
-
renderer.begin( ctx, elem );
49
-
var pathValue = renderer.move( ctx, elem, frontBase.renderOrigin );
50
-
pathValue += renderer.line( ctx, elem, rearBase.renderOrigin );
51
-
renderer.setPath( ctx, elem, pathValue );
52
-
53
-
var scale = frontBase.renderNormal.magnitude();
54
-
var strokeWidth = frontBase.diameter * scale + frontBase.getLineWidth();
63
+
renderer.renderPath( ctx, elem, this.pathCommands );
55
64
renderer.stroke( ctx, elem, true, this.color, strokeWidth );
56
65
renderer.end( ctx, elem );
57
66
+3
-11
js/shape.js
+3
-11
js/shape.js
···
181
181
182
182
Shape.prototype.renderPath = function( ctx, renderer ) {
183
183
var elem = this.getRenderElement( ctx, renderer );
184
-
// render points
185
-
renderer.begin( ctx, elem );
186
-
var pathValue = '';
187
-
this.pathCommands.forEach( function( command ) {
188
-
pathValue += command.render( ctx, elem, renderer );
189
-
});
190
184
var isTwoPoints = this.pathCommands.length == 2 &&
191
185
this.pathCommands[1].method == 'line';
192
-
if ( !isTwoPoints && this.closed ) {
193
-
pathValue += renderer.closePath( ctx, elem );
194
-
}
195
-
renderer.setPath( ctx, elem, pathValue );
186
+
var isClosed = !isTwoPoints && this.closed;
187
+
var color = this.getRenderColor();
196
188
197
-
var color = this.getRenderColor();
189
+
renderer.renderPath( ctx, elem, this.pathCommands, isClosed );
198
190
renderer.stroke( ctx, elem, this.stroke, color, this.getLineWidth() );
199
191
renderer.fill( ctx, elem, this.fill, color );
200
192
renderer.end( ctx, elem );
+11
js/svg-renderer.js
+11
js/svg-renderer.js
···
51
51
elem.setAttribute( 'd', pathValue );
52
52
};
53
53
54
+
SvgRenderer.renderPath = function( svg, elem, pathCommands, isClosed ) {
55
+
var pathValue = '';
56
+
pathCommands.forEach( function( command ) {
57
+
pathValue += command.render( svg, elem, SvgRenderer );
58
+
});
59
+
if ( isClosed ) {
60
+
pathValue += this.closePath( svg, elem );
61
+
}
62
+
this.setPath( svg, elem, pathValue );
63
+
};
64
+
54
65
SvgRenderer.stroke = function( svg, elem, isStroke, color, lineWidth ) {
55
66
if ( !isStroke ) {
56
67
return;