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

Add another complex shape (~9K paths) to the raphael vs. fabric perf suite.

Browse source
This commit is contained in:
kangax 2011-02-09 00:41:27 -05:00
parent ba4486e5be
commit afb841e085
5 changed files with 3207 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
test/raphael_vs_fabric/complex_shape.html
View file

@ -16,10 +16,6 @@
<script src="../../dist/all.js"></script>
<script src="tiger.js"></script>
<script>
var numObjects = 5,
width = 500,
height = 500;
window.onload = function() {

99
test/raphael_vs_fabric/complex_shape_2.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Complex shape 2</title>
<style>
svg {
border: 1px solid #000;
}
.canvas_container {
border: 1px solid #000;
position: relative;
}
#holder {
height: 760px;
width: 380px;
left: 500px;
position: absolute;
}
</style>
<script src="raphael-min.js"></script>
<script src="../../dist/all.js"></script>
<script src="dragon.js"></script>
<script>
window.onload = function() {
var width = 380,
height = 760;
var logEl = document.getElementById('log');
(function testRaphael() {
var start = function () {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.attr({opacity: .5});
},
move = function (dx, dy) {
// move will be called with dx and dy
this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
// restoring state
this.attr({opacity: 1});
};
var startTime = new Date();
var r = Raphael("holder", width, height);
r.dragon();
// r.drag(start, move, up);
logEl.innerHTML = 'Raphael: <b>' + (new Date() - startTime) + '</b>ms<br>';
})();
(function testFabric() {
var canvas = window.__canvas = new fabric.Element('canvas', {
renderOnAddition: false,
stateful: false
});
canvas.loadSVGFromURL('dragon.svg', function(objects) {
var startTime = new Date();
var group = new fabric.PathGroup(objects, {
left: 185,
top: 380,
width: 371,
height: 760
});
canvas.add(group);
canvas.renderAll();
var renderingTime = new Date() - startTime;
logEl.innerHTML += 'fabric: <b>' + (fabric.documentParsingTime + renderingTime) + '</b>ms (parsing: '+fabric.documentParsingTime+', rendering: '+ renderingTime +')';
document.getElementById('description').appendChild(document.createTextNode(' (' + group.complexity() + ' paths)'))
});
canvas.calcOffset();
})();
};
</script>
</head>
<body>
<p id="description">Rendering a complex shape</p>
<div id="holder"></div>
<canvas id="canvas" width="380" height="760"></canvas>
<p id="log"></p>
</body>
</html>

1
test/raphael_vs_fabric/dragon.js Normal file
View file

File diff suppressed because one or more lines are too long

3106
test/raphael_vs_fabric/dragon.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 316 KiB

2
test/unit/element.js
View file

@ -790,7 +790,7 @@
test('onFpsUpdate', function() {
ok(typeof canvas.onFpsUpdate == 'function');
ok(typeof canvas.onFpsUpdate != 'undefined');
var invoked = false, fps;