mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-10 01:10:59 +00:00
Alias some methods in fabric.Element for perf. reasons. Few improvements to demo.
This commit is contained in:
kangax
parent
8388559b42
commit
e5fa742aff
3 changed files with 98 additions and 77 deletions
|
|
@ -3,6 +3,8 @@
|
|||
var global = this,
|
||||
window = global.window,
|
||||
document = window.document,
|
||||
capitalize = fabric.util.string.capitalize,
|
||||
camelize = fabric.util.string.camelize,
|
||||
|
||||
Canvas = global.Canvas || (global.Canvas = { });
|
||||
|
||||
|
|
@ -1066,7 +1068,7 @@
|
|||
activeGroup = this.getActiveGroup();
|
||||
|
||||
if (length) {
|
||||
for (var i=0; i<length; ++i) {
|
||||
for (var i = 0; i < length; ++i) {
|
||||
|
||||
// only render objects which are not in the group (if one exists)
|
||||
if (!activeGroup ||
|
||||
|
|
@ -1503,7 +1505,7 @@
|
|||
switch (o.type) {
|
||||
case 'image':
|
||||
case 'font':
|
||||
fabric[fabric.util.string.capitalize(o.type)].fromObject(o, function (o) {
|
||||
fabric[capitalize(o.type)].fromObject(o, function (o) {
|
||||
_this.add(o);
|
||||
if (++numLoadedImages === numTotalImages) {
|
||||
if (callback) callback();
|
||||
|
|
@ -1511,7 +1513,7 @@
|
|||
});
|
||||
break;
|
||||
default:
|
||||
var klass = fabric[fabric.util.string.camelize(fabric.util.string.capitalize(o.type))];
|
||||
var klass = fabric[camelize(capitalize(o.type))];
|
||||
if (klass && klass.fromObject) {
|
||||
_this.add(klass.fromObject(o));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,14 @@
|
|||
(function() {
|
||||
|
||||
var canvas = this.canvas = new fabric.Element('canvas');
|
||||
|
||||
var rect = new fabric.Rect({
|
||||
fill: "red",
|
||||
left: 100,
|
||||
top: 100,
|
||||
width: 50,
|
||||
height: 60
|
||||
});
|
||||
|
||||
var circle = new fabric.Circle({
|
||||
fill: 'green',
|
||||
radius: 30,
|
||||
left: 70,
|
||||
top: 120
|
||||
});
|
||||
|
||||
var ellipse = new fabric.Ellipse({
|
||||
fill: 'blue',
|
||||
rx: 40,
|
||||
ry: 20,
|
||||
left: 150,
|
||||
top: 145,
|
||||
opacity: 0.5,
|
||||
angle: 15
|
||||
});
|
||||
|
||||
fabric.Image.fromURL('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png', function(image) {
|
||||
image.set('left', 300).set('top', 500).set('angle', -25).setCoords();
|
||||
canvas.add(image);
|
||||
});
|
||||
|
||||
fabric.Image.fromURL('http://www.dooziedog.com/dog_breeds/pug/images/full/Pug-Puppy.jpg', function(image) {
|
||||
image.set('left', 450).set('top', 150).set('angle', -5).scale(0.3).setCoords();
|
||||
canvas.add(image);
|
||||
});
|
||||
|
||||
canvas.add(rect).add(circle).add(ellipse.scale(2));
|
||||
|
||||
var getRandomInt = fabric.util.getRandomInt;
|
||||
function getRandomColor() {
|
||||
return getRandomInt(0, 255).toString(16)
|
||||
+ getRandomInt(0, 255).toString(16)
|
||||
+ getRandomInt(0, 255).toString(16);
|
||||
}
|
||||
function getRandomNum(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
function loadSVGFromURL(url, callback) {
|
||||
var req = new fabric.util.request(url, {
|
||||
method: 'get',
|
||||
|
|
@ -52,66 +22,101 @@
|
|||
})
|
||||
}
|
||||
|
||||
var canvas = this.canvas = new fabric.Element('canvas');
|
||||
|
||||
document.getElementById('commands').onclick = function(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
var className = ev.target.className,
|
||||
left = fabric.util.getRandomInt(100, 700),
|
||||
top = fabric.util.getRandomInt(100, 500),
|
||||
angle = fabric.util.getRandomInt(-20, 20);
|
||||
var element = ev.target || ev.srcElement,
|
||||
className = element.className,
|
||||
offset = 50,
|
||||
left = fabric.util.getRandomInt(0 + offset, 700 - offset),
|
||||
top = fabric.util.getRandomInt(0 + offset, 500 - offset),
|
||||
angle = fabric.util.getRandomInt(-20, 40),
|
||||
width = fabric.util.getRandomInt(30, 50),
|
||||
opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
|
||||
|
||||
switch (className) {
|
||||
case 'rect':
|
||||
canvas.add(new fabric.Rect({ left: left, top: top, fill: 'rgb(255,0,0)', width: 50, height: 50, opacity: 0.8 }));
|
||||
canvas.add(new fabric.Rect({
|
||||
left: left,
|
||||
top: top,
|
||||
fill: '#' + getRandomColor(),
|
||||
width: 50,
|
||||
height: 50,
|
||||
opacity: 0.8
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'circle':
|
||||
canvas.add(new fabric.Circle({ left: left, top: top, fill: 'rgb(0,0,255)', radius: 50, opacity: 0.8 }));
|
||||
canvas.add(new fabric.Circle({
|
||||
left: left,
|
||||
top: top,
|
||||
fill: '#' + getRandomColor(),
|
||||
radius: 50,
|
||||
opacity: 0.8
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'triangle':
|
||||
canvas.add(new fabric.Triangle({ left: left, top: top, fill: 'rgb(0,255,0)', width: 50, height: 50, opacity: 0.8 }));
|
||||
canvas.add(new fabric.Triangle({
|
||||
left: left,
|
||||
top: top,
|
||||
fill: '#' + getRandomColor(),
|
||||
width: 50,
|
||||
height: 50,
|
||||
opacity: 0.8
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'image':
|
||||
case 'image1':
|
||||
fabric.Image.fromURL('http://www.dooziedog.com/dog_breeds/pug/images/full/Pug-Puppy.jpg', function(image) {
|
||||
image.set('left', left).set('top', top).set('angle', angle).scale(0.1).setCoords();
|
||||
image.set('left', left).set('top', top).set('angle', angle).scale(getRandomNum(0.05, 0.25)).setCoords();
|
||||
canvas.add(image);
|
||||
});
|
||||
break;
|
||||
|
||||
case 'image2':
|
||||
fabric.Image.fromURL('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png', function(image) {
|
||||
image.set('left', left).set('top', top).set('angle', angle).scale(getRandomNum(0.1, 1)).setCoords();
|
||||
canvas.add(image);
|
||||
});
|
||||
break;
|
||||
|
||||
case 'shape':
|
||||
var id = element.id, match;
|
||||
if (match = /\d+$/.exec(id)) {
|
||||
loadSVGFromURL('assets/' + match[0] + '.svg', function(objects, options) {
|
||||
var pathGroup = new fabric.PathGroup(objects, options);
|
||||
pathGroup
|
||||
.set('left', left)
|
||||
.set('top', top)
|
||||
.set('angle', angle)
|
||||
.set('fill', '#' + getRandomColor())
|
||||
.scale(getRandomNum(0.75, 1.25))
|
||||
.setCoords();
|
||||
|
||||
canvas.add(pathGroup);
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'clear':
|
||||
if (confirm('Are you sure?')) {
|
||||
canvas.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadSVGFromURL('assets/1.svg', function(objects) {
|
||||
var o = objects[0];
|
||||
o.set('left', 250).set('top', 300).setCoords();
|
||||
canvas.add(o)
|
||||
});
|
||||
|
||||
document.getElementById('execute').onclick = function() {
|
||||
var code = document.getElementById('canvas-console').value;
|
||||
if (!(/^\s+$/).test(code)) {
|
||||
eval(code);
|
||||
}
|
||||
};
|
||||
|
||||
loadSVGFromURL('assets/2.svg', function(objects) {
|
||||
var o = objects[0];
|
||||
o.set('left', 650).set('top', 380).setCoords();
|
||||
canvas.add(o)
|
||||
});
|
||||
|
||||
/*
|
||||
loadSVGFromURL('assets/3.svg', function(objects, options) {
|
||||
var pathGroup = new fabric.PathGroup(objects, options);
|
||||
pathGroup.set('left', 550).set('top', 300).set('angle', 20).setCoords();
|
||||
canvas.add(pathGroup);
|
||||
});
|
||||
|
||||
loadSVGFromURL('assets/5.svg', function(objects, options) {
|
||||
var pathGroup = new fabric.PathGroup(objects, options);
|
||||
pathGroup.set('left', 800).set('top', 200).set('angle', -3).setCoords();
|
||||
canvas.add(pathGroup);
|
||||
});
|
||||
*/
|
||||
document.getElementById('rasterize').onclick = function() {
|
||||
window.open(canvas.toDataURL('png'));
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
.canvas_container { margin: 0 auto; position: relative; float: left; border: 1px solid #aaa; }
|
||||
#commands { float: left; margin-left: 20px; list-style: none; }
|
||||
.clear { color: red; font-weight: bold; margin-top: 1em; }
|
||||
#canvas-console { display: block; }
|
||||
#rasterize { margin-top: 10px; color: green; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
|
@ -28,9 +30,21 @@
|
|||
<li><button class="rect">Rectangle</button></li>
|
||||
<li><button class="circle">Circle</button></li>
|
||||
<li><button class="triangle">Triangle</button></li>
|
||||
<li><button class="image">Image</button></li>
|
||||
<li><button class="image1">Image 1</button></li>
|
||||
<li><button class="image2">Image 2</button></li>
|
||||
<li><button class="shape" id="shape1">SVG shape 1</button></li>
|
||||
<li><button class="shape" id="shape2">SVG shape 2</button></li>
|
||||
<li><button class="shape" id="shape3">SVG shape 3</button></li>
|
||||
<li><button class="shape" id="shape4">SVG shape 4</button></li>
|
||||
|
||||
<li><button id="rasterize">Rasterize canvas to image</button></li>
|
||||
|
||||
<li><button class="clear">Clear canvas</button></li>
|
||||
<li style="margin-top:20px;">
|
||||
<label for="canvas-console">Execute code:</label>
|
||||
<textarea rows="8" cols="40" id="canvas-console">canvas.clear(); // clears canvas</textarea>
|
||||
<button type="button" id="execute">Execute</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script src="demo.js" type="text/javascript"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue