Recently I came up with the need to extend Image class of Fabric js lib. I had to keep synchronized two different Fabric Canvases, with different scale.
In the code snippet below, fabric.TavImage extends fabric.Image. AddToCanvases function adds an instance of TavImage to one canvas, then clones the object and adds it, scaled, to another canvas.
//
// TavImage
//
fabric.TavImage = fabric.util.createClass(fabric.Image, {
type: 'tavImage',
initialize: function (element, options) {
options || (options = {});
this.callSuper('initialize', element, options);
this.set('scaleFrontCanvas', options.scaleFrontCanvas || '');
this.set('scaleHiddenCanvas', options.scaleHiddenCanvas || '');
this.set('id', options.id || '');
this.set('objFrontCloned', options.objFrontCloned || '');
this.set('trasfParams', options.trasfParams || '');
this.set('isBaseImage', options.isBaseImage || false);
this.set('scaleFactor', options.scaleFactor || '');
},
toObject: function () {
return fabric.util.object.extend(this.callSuper('toObject'), {
scaleFrontCanvas: this.get('scaleFrontCanvas'),
scaleHiddenCanvas: this.get('scaleHiddenCanvas'),
id: this.get('id'),
objFrontCloned: this.get('objFrontCloned'),
trasfParams: this.get('trasfParams'),
isBaseImage: this.get('isBaseImage'),
scaleFactor: this.get('scaleFactor')
});
},
_render: function (ctx) {
this.callSuper('_render', ctx);
},
addToCanvases: function (hiddenCanvas, frontCanvas) {
hiddenCanvas.hiddenObjectsCount += 1;
// check if it is not already in canvs
var objects = hiddenCanvas.getObjects();
for (var i in objects) {
if (objects[i].get('id') == this.id)
return;
}
// add to frontCanvas
this.addToFrontCanvas(frontCanvas);
// add to hidden Canvas
this.addToHiddenCanvas(hiddenCanvas);
},
addToFrontCanvas: function (frontCanvas) {
// clone object
this.objFrontCloned = fabric.util.object.clone(this);
this.objFrontCloned.scaleX = this.scaleFrontCanvas || this.scaleX;
this.objFrontCloned.scaleY = this.scaleFrontCanvas || this.scaleY;
frontCanvas.add(this.objFrontCloned);
// center base image layer
if (this.isBaseImage == true) {
this.objFrontCloned.center();
}
this.objFrontCloned.setCoords();
},
addToHiddenCanvas: function (hiddenCanvas) {
// scale to hiddenCanvas
this.scaleX = this.scaleHiddenCanvas || this.scaleX;
this.scaleY = this.scaleHiddenCanvas || this.scaleY;
hiddenCanvas.add(this);
// center base image layer
if (this.isBaseImage == true) {
//this.objFrontCloned.center();
//this.objFrontCloned.setCoords();
}
else {
this.updateCoordsForHiddenCanvas();
//this.updateScaleForHiddenCanvas();
}
},
updateCoordsForHiddenCanvas: function () {
this.left = Math.round(this.trasfParams.s + 1/this.scaleFrontCanvas * (this.objFrontCloned.left - this.trasfParams.s1));
this.top = Math.round(this.trasfParams.t + 1/this.scaleFrontCanvas * (this.objFrontCloned.top - this.trasfParams.t1));
this.setCoords();
},
updateScaleForHiddenCanvas: function () {
if(this.scaleFactor == '')
this.scaleFactor = this.objFrontCloned.scaleX;
this.scaleX = this.objFrontCloned.scaleX / this.scaleFactor;
this.scaleY = this.objFrontCloned.scaleY / this.scaleFactor;
this.setCoords();
}
});
/**
* Creates an instance of fabric.Image from an URL string
* @static
* @param {String} url URL to create an image from
* @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument)
* @param {Object} [imgOptions] Options object
*/
fabric.TavImage.fromURL = function (url, callback, imgOptions) {
fabric.util.loadImage(url, function (img) {
callback(new fabric.TavImage(img, imgOptions));
}, null, imgOptions && imgOptions.crossOrigin);
};
Sometimes there is the need to change the texture of a mesh at run time; for instance to change aspect of a virtual character, to create some light effects and so on.
In the code snippet below, function loadNewTexture accept the url of the new image for the texture to create a new image object. In the onload event of the image, it is drawed on the texture assigned to the material of the mesh.
Do not forget to set "needsUpdate property of the mesh to true at the end.
MyObject.prototype.loadNewTexture = function (src) {
var that = this;
var textureImg = new Image();
textureImg.src = src;
textureImg.onload = function () {
var ctx = that.mesh.material.map.image.getContext('2d');
ctx.drawImage(textureImg, 0, 0, textureImg.width, textureImg.height,
0, 0, textureImg.width, textureImg.height);
that.mesh.material.map.needsUpdate = true;
};
}
In the first part of this article series we have described the main concepts of Near Field communication and how Microsoft has provided support for this technology in Windows 8. Then we have seen how to set up two Windows 8 virtual machines with a proximity driver, i.e something which allows us to simulate a tap gesture. In this second part we will learn how to use the sample proximity driver and explore the functionalities exposed by the Proximity API.
NetNfpControl: a testing tool to simulate a proximity event
As already described in the first part, we can use a sample proximity driver to simulate a tap gesture. We found the sample netnfp solution in the Windows 8 Driver Samples package. In this solution, together with the driver and the package for the driver projects, there is also a project, NetNfpControl, containing a testing tool to simulate proximity hardware.
Read all on silverlightshow:
http://www.silverlightshow.net/items/Near-Field-Communication-in-Windows-8-Part-2.aspx
Near Field Communication (NFC) is certainly a promising technology and some standardization processes are on-going at nfc-forum.
Microsoft announced extended support for this technology in Windows 8, but renamed it as Near Field Proximity. I'm investigating on the Proximity API that developers can use to create NFC-enabled apps; it is surprisingly simple..
Read more on my first-part article:
http://www.silverlightshow.net/items/Near-Field-Communication-in-windows-8-part-1.aspx