mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-03-21 16:30:24 +00:00
82 lines
3.1 KiB
HTML
82 lines
3.1 KiB
HTML
<!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> · 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>
|