Saturday, December 14, 2013

fancy product designer move element by API

i've been searching for how to move an item (text, image, design ...) by API; not using drag and drop.
(JQuery Plugin fancy product designer)

here is a fonctionnal code:

bgObject.canvas.setBackgroundImage(bgObject.canvas.source, bgObject.canvas.renderAll.bind(bgObject.canvas), {
  x:bgObject.params.x - 1,
  y:bgObject.params.y   
});
bgObject.params.x --;

where is bgObject is the object loaded by the plugin, you can get it by firing the elementAdded event
example:

var bgObject= null;

          $('#clothing-designer')
.bind('elementAdded', function(evt, obj)  {
   if(obj.title == "Default Image") {
                                            bgObject = obj; 
                                        }
});


Note that if you try to understand the code, we are moving a canvas object.
Canvas and many other objects are parts of fabric framework.
 readingits  documentation may be very helpful :
http://fabricjs.com/docs/
http://fabricjs.com/docs/fabric.Canvas.html (canvas)
that's all !

No comments:

Post a Comment