mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-18 05:00:58 +00:00
Add another benchmark (this time with continuous animation and fps indicator). Start experimenting with free drawing via brush.
This commit is contained in:
kangax
parent
b04d187a04
commit
bd5d670cbc
4 changed files with 166 additions and 11 deletions
76
test/benchmark/benchmark2.js
Normal file
76
test/benchmark/benchmark2.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
(function() {
|
||||
|
||||
var canvas = new fabric.Element('test'),
|
||||
fpsEl = document.getElementById('fps'),
|
||||
complexityEl = document.getElementById('complexity'),
|
||||
canvasObjects;
|
||||
|
||||
canvas.onFpsUpdate = function(value) {
|
||||
fpsEl.innerHTML = value;
|
||||
};
|
||||
|
||||
function loadSVGFromURL(url, callback) {
|
||||
new fabric.util.request(url, {
|
||||
method: 'get',
|
||||
onComplete: function(r) {
|
||||
var xml = r.responseXML;
|
||||
if (!xml) return;
|
||||
var doc = xml.documentElement;
|
||||
if (!doc) return;
|
||||
fabric.parseSVGDocument(doc, callback);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var coords = [{ x: 150, y: 150 }, { x: 450, y: 150 }, { x: 150, y: 450 }, { x: 450, y: 450 }];
|
||||
|
||||
for (var i = coords.length; i--; ) {
|
||||
(function(i){
|
||||
loadSVGFromURL('../demo/assets/7.svg', function(objects, options) {
|
||||
var pathGroup = new fabric.PathGroup(objects, options);
|
||||
|
||||
pathGroup
|
||||
.set('left', coords[i].x)
|
||||
.set('top', coords[i].y)
|
||||
.set('angle', 30)
|
||||
.set('fill', '#ff5555')
|
||||
.scale(0.5)
|
||||
.setCoords();
|
||||
|
||||
canvas.add(pathGroup);
|
||||
|
||||
if (i === 0) {
|
||||
canvasObjects = canvas.getObjects();
|
||||
animate();
|
||||
setTimeout(function() {
|
||||
complexityEl.innerHTML = canvas.complexity();
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
})(i);
|
||||
|
||||
function animate() {
|
||||
fabric.util.animate({
|
||||
startValue: 0,
|
||||
endValue: 360,
|
||||
duration: 3000,
|
||||
easing: function(value) {
|
||||
return value;
|
||||
},
|
||||
onChange: function(value) {
|
||||
canvasObjects[0].setAngle(value);
|
||||
canvasObjects[1].setAngle(value);
|
||||
canvasObjects[2].setAngle(value);
|
||||
canvasObjects[3].setAngle(value);
|
||||
canvas.renderAll();
|
||||
},
|
||||
onComplete: function() {
|
||||
animate();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
})();
|
||||
25
test/benchmark/index2.html
Normal file
25
test/benchmark/index2.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Fabric.js benchmark</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="../lib/excanvas.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script src="../../dist/all.min.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
.canvas_container { position: relative; border: 1px solid #aaa; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Fabric.js benchmark</h2>
|
||||
<p>Complexity: <span id="complexity">XXXX</span> paths</p>
|
||||
<p>FPS: <span id="fps" style="font-weight: bold;">XXXX</span></p>
|
||||
<canvas id="test" width="600" height="600"></canvas>
|
||||
<script src="benchmark2.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
function loadSVGFromURL(url, callback) {
|
||||
var req = new fabric.util.request(url, {
|
||||
new fabric.util.request(url, {
|
||||
method: 'get',
|
||||
onComplete: function(r) {
|
||||
var xml = r.responseXML;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,17 @@
|
|||
<script src="../dist/all.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- <canvas id="c" width="300" height="300"></canvas> -->
|
||||
|
||||
<canvas id="d" width="300" height="300"></canvas>
|
||||
|
||||
<div id="out"></div>
|
||||
|
||||
<p>Opacity: <input type="range" id="opacity"></p>
|
||||
<p>Diameter: <input type="range" id="diameter"></p>
|
||||
<p>Hardness: <input type="range" id="hardness"></p>
|
||||
<p>Color: <input value="rgba(255,0,0,0)" id="color"></p>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var canvas = document.getElementById('d'),
|
||||
|
|
@ -22,16 +30,37 @@
|
|||
xPoints = [ ],
|
||||
yPoints = [ ],
|
||||
width = canvas.width,
|
||||
height = canvas.height;
|
||||
height = canvas.height,
|
||||
|
||||
opacity = 0.5,
|
||||
diameter = 20,
|
||||
type = 'brush',
|
||||
hardness = 50,
|
||||
color = 'rgba(255,0,0,0)';
|
||||
|
||||
ctx.fillStyle = '#000000';
|
||||
|
||||
function onMove(e) {
|
||||
var x = e.pageX,
|
||||
y = e.pageY;
|
||||
y = e.pageY,
|
||||
spread = type == 'pencil' ? (diameter - 1) : (hardness / 100 * diameter - 1);
|
||||
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
//ctx.globalCompositeOperation = 'source-over';
|
||||
|
||||
var r = ctx.createRadialGradient(x, y, spread, x, y, diameter);
|
||||
|
||||
colorWithOpacity = color.replace(/\d+\)$/, opacity + ')');
|
||||
r.addColorStop(0, colorWithOpacity);
|
||||
r.addColorStop(0.95, color); // prevent aggregation of semi-opaque pixels
|
||||
r.addColorStop(1, color);
|
||||
ctx.fillStyle = r;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
|
||||
//ctx.globalCompositeOperation = 'source-in';
|
||||
|
||||
//ctx.lineTo(x, y);
|
||||
//ctx.stroke();
|
||||
|
||||
xPoints.push(x);
|
||||
yPoints.push(y);
|
||||
|
|
@ -54,6 +83,7 @@
|
|||
yPoints.push(y);
|
||||
|
||||
canvas.onmousemove = onMove;
|
||||
onMove(e);
|
||||
};
|
||||
|
||||
canvas.onmouseup = function(e) {
|
||||
|
|
@ -62,20 +92,44 @@
|
|||
var minX = fabric.util.array.min(xPoints),
|
||||
minY = fabric.util.array.min(yPoints);
|
||||
|
||||
ctx.fillStyle = 'rgb(255,0,0)';
|
||||
ctx.fillRect(minX, minY, 3, 3);
|
||||
ctx.fillStyle = 'rgb(0,0,0)'
|
||||
//ctx.fillStyle = 'rgb(255,0,0)';
|
||||
//ctx.fillRect(minX, minY, 3, 3);
|
||||
|
||||
/*
|
||||
path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' ');
|
||||
|
||||
for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) {
|
||||
path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
|
||||
}
|
||||
|
||||
document.getElementById('out').innerHTML = ('var p = new fabric.Path("' + path.join('') + '"); p.fill = null; p.options.stroke = "rgb(0,0,0)"; __canvas.add(p); p.set("left", __canvas.getCenter().left).set("top", __canvas.getCenter().top).setCoords(); __canvas.renderAll();');
|
||||
document.getElementById('out').innerHTML = ('var p = new fabric.Path("' + path.join('') + '"); ' +
|
||||
'p.fill = null; p.options.stroke = "rgb(0,0,0)"; __canvas.add(p); p.set("left", '+
|
||||
'__canvas.getCenter().left).set("top", __canvas.getCenter().top).setCoords(); __canvas.renderAll();');
|
||||
*/
|
||||
};
|
||||
|
||||
// var canvas = this.canvas = new fabric.Element('c');
|
||||
function byId(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
byId('opacity').onchange = function() {
|
||||
opacity = this.value / 100;
|
||||
};
|
||||
byId('opacity').value = 100 * opacity;
|
||||
|
||||
byId('diameter').onchange = function() {
|
||||
diameter = this.value;
|
||||
};
|
||||
byId('diameter').value = diameter;
|
||||
|
||||
byId('hardness').onchange = function() {
|
||||
hardness = this.value;
|
||||
};
|
||||
byId('hardness').value = hardness;
|
||||
|
||||
byId('color').onchange = function() {
|
||||
color = this.value;
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue