Develop Reference

renderAll() not working in fabric.js

I have six floors of a building drawn on a canvas with fabric.js. In order to show only one floor, I do this:
building.selectFloor = function(floorId){
for (var i = 0; i < floors.length; i++){
if (floorId == floors[i].name){
floors[i].visible = true;
}else{
floors[i].visible = false;
}
}
canvas.renderAll();
};
But nothing changes - all floors are still visible. The floors set to visible = false don't disappear until renderAll() is called later on a window resize:
$(window).resize(setSize);
setSize();
function setSize(){
viewportWidth = $(window).width();
viewportHeight = $(window).height();
$appContainer.css({ "width": viewportWidth, "height": viewportHeight});
canvas.setDimensions({ width: viewportWidth, height: viewportHeight });
if (canvas.building){
canvas.building.center();
canvas.building.scaleX = canvas.building.scaleY = (viewportWidth + viewportHeight) / (1920 + 1080);
canvas.renderAll();
}
}
but then they do disappear. Why is one renderAll() working, and the other not? I've tried wrapping the non-functioning renderAll() in a window.timeOut to see if a delay helps, but no luck.

Ok - so I figured it out in the end: building is a group which appears to be getting cached by some internal fabric magic, and the cached version is being rendered instead of the updated version. To render the updated version you have to do this
canvas.building.set('dirty', true);
canvas.renderAll();
Hope that helps someone on down the line.
EDIT
Turns out there's an easier solution still:
canvas.building.objectCaching = false

There is a new version that changed the format to:
canvas.requestRenderAll();

This worked for me in later versions:
// for one canvas
myCanvas.objectCaching = false;
// for all canvas
fabric.Object.prototype.objectCaching = false;
// in both case it still needs to be re-rendered
myCanvas.renderAll();
ps: using version 4.2.0

You have to update (at least in the new version) object properties with object.set({...}) or set object.dirty = true in order to make the cache system recognize the change in the object properties. Disabling cache might not be the best idea, it has been included for a reason. canvas.requestRenderAll(); then works as intended.

Fabric.js: How to observe object:scaling event and update properties dynamically?

I'm trying to get the shape properties to dynamically update when the shape is being scaled.
Here's a fiddle: http://jsfiddle.net/anirudhrantsandraves/DAjrp/
The console log commands:
console.log('Width = '+scaledObject.currentWidth);
console.log('Height = '+scaledObject.currentHeight);
are supposed to dynamically display the height and width of the shape as it is being scaled.
The properties remain the same in the console when the shape gets scaled. However, when I select the object again and scale it, the previous values of the properties are displayed.
Is there a way to make this dynamic?

getWidth() and getHeight() are used to get the current width and height in Fabric.js.
So in "object:scaling" event:
canvas.on('object:scaling', onObjectScaled);
function onObjectScaled(e)
{
var scaledObject = e.target;
console.log('Width = '+scaledObject.getWidth());
console.log('Height = '+scaledObject.getHeight());
}
will serve your purpose.
Updated fiddle — http://jsfiddle.net/DAjrp/2/

Just in case, if you wanted to get the scaled height
canvas.on("object:scaling", (e) => {
canvas.getActiveObjects().forEach((o) => {
// if it's scaled then just multiple the height by scaler
const objHeight = o.scaleY ? o.height * o.scaleY : o.height;
// ...
});
});

increase font size in website on smartphones and iPhones

I am working on a site that should look almost the same on every device. i.e. laptop, PC, ipads, iphones and other smartphones.
I am using fittext.js which is pure javascript in order to reduce/increase the font size on the website according to the user's screen resolution.
however, the fonts are very small on devices such as iphones!
how can i increase the font size a bit more on iphones and other smart phones?
this is the javascript code i am using:
fittext.js
(function(){
var css = function (el, prop) {
return window.getComputedStyle ? getComputedStyle(el).getPropertyValue(prop) : el.currentStyle[prop];
};
var addEvent = function (el, type, fn) {
if (el.addEventListener)
el.addEventListener(type, fn, false);
else
el.attachEvent('on'+type, fn);
};
window.fitText = function (el, kompressor) {
var settings = {
'minFontSize' : -1/0,
'maxFontSize' : 1/0
};
var fit = function (el) {
var compressor = kompressor || 1;
var resizer = function () {
el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px';
};
// Call once to set.
resizer();
// Bind events
// If you have any js library which support Events, replace this part
// and remove addEvent function (or use original jQuery version)
addEvent(window, 'resize', resizer);
};
if (el.length)
for(var i=0; i<el.length; i++)
fit(el[i]);
else
fit(el);
// return set of elements
return el;
};
})();
and this is in my HTML page:
<script src="fittext.js"></script>
<script type="text/javascript">
fitText(document.getElementById('fittext'), 2.9)
</script>

Fittext's suggested use says that it shouldn't be used for paragraphs of information. For mobile sites ensure you have a mobile viewport set, and then the easiest way to change font size for smaller devices is to use media queries.

JQuery-UI Draggable locked to the window

I created a really simple map and I wanted it to be dragable.
Here is the code:
http://jsfiddle.net/AeABp/
It works, I can move the map around how I want. But I want it to be locked to the "window", so that there is never white space when it get dragged, I hope you understand what I mean.
I also had a look at the the overview from jquery-ui, but didn't find anything that I needed.

You need to constrain movement to a set of coordinates to make it work properly. Took a bit of messing with, but the containment constrains the element based on the top left corner of the element.
$(function() {
var con = $('#container');
var cw = con.width( ), ch = con.height( );
var map = $('#map');
var mw = map.width( ), mh = map.height( );
var x1 = -mw + cw, y1 = -mh + ch;
map.draggable({containment:[x1,y1,0,0]});
});

There's an easy way to do it (if i understood well):
$('#map').draggable({
containment: 'window',
scroll: false
});

How would use javascript to open an image in a separate window after I resize it?

This is the code that I have to re-size the image for me. What I don't know how to do is have the code open the image after it has been re-sized.
So what I wish for it to is is
Resize the image(It is already doing this).
Once image is re-sized, open it in a separate window
This is the code that re-sizes the image for me.
function resize(which, max) {
var elem = document.getElementById(which);
if (elem == undefined || elem == null) return false;
if (max == undefined) max = 1024;
if (elem.width > elem.height) {
elem.width = max;
elem.height = 768;
}
}

That code does not actually resize the picture, it just changes how it is displayed. If the image is downloaded or opened in a separate window, it will be the dimensions of the original image. I don't think there is any way of modifying the image through JavaScript.
What you could do, though, is find a program that can do that for you and call that through an Ajax call. For example, I think the Gimp can handle that, and if you can call that from a PHP script, then you can call that PHP script through an Ajax call and display that. It's kind of a complicated solution but that's the best I can think of.

As tjameson pointed out, JavaScript doesn't really resize your image.
If you want to take this image to a new window, here is a way to do it:
var im = document.getElementsByTagName('img')[0];
var w = window.open("");
var b = w.document.body;
b.appendChild(im);
You can apply the resize function on this image if you want it displayed resized.

I appended the needed code to the initial resize function
function resize(which, max)
{
var elem = document.getElementById(which);
if (elem == undefined || elem == null) return false;
if (max == undefined) max = 1024;
if (elem.width > elem.height)
{
elem.width = max;
elem.height = 768;
}
var f = window.open("", "_blank", "height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
f.document.title = elem.alt;
f.document.body.innerHTML += '<img src="'+elem.src+'" height="'+elem.height+'" width="'+elem.width+'" alt="'+elem.alt+'">';
}