Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-22 15:04:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add demo of SVG rendering, comparing to browser SVG renderer.

Browse source
This commit is contained in:
kangax 2011-08-05 15:46:12 -04:00
parent a5b22895e7
commit 7e5e9e3ea6
2 changed files with 83 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demos/index.html
View file

@ -22,6 +22,7 @@
<li style="margin-bottom:5px"><a href="customization/index.html">Customization</a></li>
<li style="margin-bottom:5px"><a href="polaroid/index.html">Polaroid photos (custom class)</a></li>
<li style="margin-bottom:5px"><a href="opacity_mouse_move/index.html">Opacity &amp; mouse move</a></li>
<li style="margin-bottom:5px"><a href="svg_rendering/index.html">SVG rendering</a></li>
</ul>
</div>
</body>

82
demos/svg_rendering/index.html Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG rendering — Fabric.js demos</title>
<script src="../../dist/all.js"></script>
<style>
#bd-wrapper { text-align: center; }
.canvas-container { border: 1px solid #ccc; display: inline-block; vertical-align: top; margin-bottom: 10px; background: #fff; }
h2 span { font-weight: normal; }
.block { float: left; margin-right: 10px; margin-bottom: 10px }
.block.left { clear: left; }
.test { background: #ccc; margin-right: 10px; margin-bottom: 10px; padding-left: 10px;
box-shadow: rgba(0,0,0,0.5) 1px 1px 3px; overflow: hidden; display: inline-block; }
iframe { background: #fff; border: 0; max-width: 600px }
</style>
<link rel="stylesheet" href="../../lib/master.css" type="text/css">
<script>
function toShape(objects, options) {
if (objects.length > 1) {
return new fabric.PathGroup(objects, options);
}
return objects[0];
}
</script>
<script>
function initCanvas(id) {
var canvas;
fabric.loadSVGFromURL('../kitchensink/assets/' + id + '.svg', function(objects, options) {
var shape = toShape(objects, options);
var canvasEl = document.getElementById('c' + id);
canvasEl.width = shape.width || 600;
canvasEl.height = shape.height || 600;
canvas = new fabric.Canvas('c' + id);
canvas.add(shape).centerObjectH(shape).centerObjectV(shape).renderAll();
shape.setCoords();
canvas.calcOffset();
});
}
</script>
</head>
<body>
<ul id="header">
<li><a href="../index.html">Demos</a></li>
<li><a href="../../benchmarks/index.html">Benchmarks</a></li>
<li><a href="../../docs/index.html">Docs</a></li>
<li><a href="../../test/unit/suite_runner.html">Tests</a></li>
</ul>
<div id="bd-wrapper">
<h2><span>Fabric.js demos</span> &middot; SVG rendering</h2>
<script>
var blacklist = [
16 /* image doesn't render properly */,
20 /* very intense shape */,
33, 34, 35 /* very intense shapes */,
52 /* image doesn't render properly */,
56 /* image doesn't render properly */,
66 /* the shape is too big */,
68 /* svg has parsing error */,
72, 73 /* shapes are too big */,
74, 75 /* shapes has weird dimensions */,
78, 79, 80, 81, 82, 83, 84, 85 /* wrong offset */
];
for (var i = 1; i <= 147; i++) {
if (blacklist.indexOf(i) == -1) {
document.write('<div class="test"><div class="block left"><p>Canvas #' + i + '</p>');
document.write('<canvas id="c' + i + '" width="600" height="600"></canvas></div>');
document.write('<div class="block"><p><a href="../kitchensink/assets/' + i + '.svg">SVG</a></p>');
document.write('<iframe src="../kitchensink/assets/' + i + '.svg"></iframe></div></div><br>');
initCanvas(i);
}
}
</script>
</div>
</body>
</html>