Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
svg fixes
+16
-11
+8
-10
demo/flex-size/flex-size.js
+8
-10
demo/flex-size/flex-size.js
···
4
4
var isSpinning = true;
5
5
var TAU = Zdog.TAU;
6
6
7
+
var model = new Zdog.Anchor();
8
+
7
9
var canvasIllo = new Zdog.Illustration({
8
10
element: 'canvas',
9
11
zoom: zoom,
10
12
resize: true,
11
-
dragRotate: true,
13
+
dragRotate: model,
12
14
onDragStart: function() {
13
15
isSpinning = false;
14
16
},
···
20
22
var svgIllo = new Zdog.Illustration({
21
23
element: 'svg',
22
24
zoom: zoom,
23
-
dragRotate: true,
25
+
dragRotate: model,
24
26
onDragStart: function() {
25
27
isSpinning = false;
26
28
},
27
29
});
28
30
29
31
// ----- model ----- //
30
-
31
-
var model = new Zdog.Anchor({
32
-
addTo: canvasIllo,
33
-
});
34
32
35
33
new Zdog.Rect({
36
34
width: 20,
···
76
74
// ----- animate ----- //
77
75
78
76
function animate() {
79
-
svgIllo.rotate.y += isSpinning ? +TAU/150 : 0;
80
-
canvasIllo.rotate.y += isSpinning ? +TAU/150 : 0;
81
-
svgIllo.updateRenderGraph();
82
-
canvasIllo.updateRenderGraph();
77
+
model.rotate.y += isSpinning ? +TAU/150 : 0;
78
+
model.updateGraph();
79
+
svgIllo.renderGraph( model );
80
+
canvasIllo.renderGraph( model );
83
81
requestAnimationFrame( animate );
84
82
}
85
83
+2
demo/patties/index.html
+2
demo/patties/index.html
+3
demo/strutter/index.html
+3
demo/strutter/index.html
···
25
25
margin: 0px auto 20px;
26
26
cursor: move;
27
27
}
28
+
29
+
svg.illo { max-width: 600px; }
28
30
</style>
29
31
30
32
</head>
···
35
37
</div>
36
38
37
39
<script src="../../js/utils.js"></script>
40
+
<script src="../../js/canvas-renderer.js"></script>
38
41
<script src="../../js/svg-renderer.js"></script>
39
42
<script src="../../js/vector.js"></script>
40
43
<script src="../../js/anchor.js"></script>
+3
-1
demo/template/index.html
+3
-1
demo/template/index.html
···
25
25
margin: 0px auto 20px;
26
26
cursor: move;
27
27
}
28
+
29
+
svg.illo { max-width: 600px; }
28
30
</style>
29
31
30
32
</head>
31
33
<body>
32
34
33
35
<div class="container">
34
-
<svg class="illo"></svg>
36
+
<canvas class="illo"></canvas>
35
37
</div>
36
38
37
39
<script src="../../js/utils.js"></script>