mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-03-23 17:20:27 +00:00
90 lines
No EOL
2.5 KiB
HTML
90 lines
No EOL
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Images</title>
|
|
<style>
|
|
svg {
|
|
border: 1px solid #000;
|
|
}
|
|
.canvas_container {
|
|
border: 1px solid #000;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<img src="pug.jpg" style="position:absolute;left:-999px;top:-999px">
|
|
<script src="raphael-min.js"></script>
|
|
<script src="../../dist/all.js"></script>
|
|
<script>
|
|
function getRandomNum(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
var numObjects = 20,
|
|
width = 500,
|
|
height = 500,
|
|
opacity = 0.75;
|
|
|
|
window.onload = function() {
|
|
|
|
var logEl = document.getElementById('log');
|
|
|
|
(function testRaphael() {
|
|
|
|
var paper = Raphael(550, 50, width, height),
|
|
startTime = new Date(),
|
|
circle;
|
|
|
|
for (var i = numObjects; i--; ) {
|
|
img = paper.image("pug.jpg", getRandomNum(-25, width), getRandomNum(-25, height), 100, 100);
|
|
img.rotate(getRandomNum(0, 90));
|
|
img.attr('opacity', opacity);
|
|
}
|
|
|
|
logEl.innerHTML = 'Raphael: ' + (new Date() - startTime) + 'ms<br>';
|
|
|
|
})();
|
|
|
|
(function testFabric() {
|
|
|
|
var canvas = window.__canvas = new fabric.Element('canvas', {
|
|
renderOnAddition: false,
|
|
stateful: false
|
|
}),
|
|
Image = fabric.Image,
|
|
totalTime = 0,
|
|
circle;
|
|
|
|
for (var i = numObjects; i--; ) {
|
|
fabric.Image.fromURL('pug.jpg', (function(i){
|
|
return function(o) {
|
|
var startTime = new Date();
|
|
|
|
o.set('left', getRandomNum(-25, width))
|
|
.set('top', getRandomNum(-25, height))
|
|
.scale(0.2)
|
|
.setCoords();
|
|
o.rotate(getRandomNum(0, 90));
|
|
o.set('opacity', opacity);
|
|
canvas.add(o);
|
|
|
|
if (i === 0) {
|
|
canvas.renderAll();
|
|
logEl.innerHTML += 'fabric: ' + totalTime + 'ms';
|
|
}
|
|
|
|
totalTime += (new Date() - startTime);
|
|
};
|
|
})(i));
|
|
}
|
|
|
|
})();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p>Rendering an image</p>
|
|
<canvas id="canvas" width="500" height="500"></canvas>
|
|
<p id="log"></p>
|
|
</body>
|
|
</html> |