Question

I am doing zooming tool and have some problem with Sprite.setAttributes({scale: {…});
Centered by center of canvas…

http://teempla.com/sites/all/themes/teamplan/d2d/ – here is it.

Try to draw two or more lines with pencil and press Zoom + you will see that there are floating. It’s Wrong. And strange, ‘corse they position relative center.

pice of click-event code:

click: function( e, t, eOpts ){
   d2dModel.set('zoom',d2dModel.get('zoom')+0.1);
  var draw = Ext.ComponentManager.get(Ext.select('.d2d-draw-panel',true).elements[0].id);
  for (var i in draw.surface.items.map){
     draw.surface.items.map[i].setAttributes({
        scale: {
           cx: d2dModel.get('width')/2,
           cy: d2dModel.get('height')/2,
           x: d2dModel.get('zoom'),
           y: d2dModel.get('zoom')
        }
     }, true);
 }
}

In Raphael.JS i made it with

el.transform('s'+zoom+','+zoom+','+w/2+','+h/2); 

And it works fine.

Thank’s for any ideas!

Answer 1

Try zooming on your surface by using setViewBox

http://docs.sencha.com/ext-js/4-1/source/Surface.html#Ext-draw-Surface-method-setViewBox

What I did in my project was this:

    var bbox = draw.surface.items.getBBox();
    draw.surface.setViewBox(bbox.x, bbox.y, draw.getSize().width / zoomValue, draw.getSize().height / zoomValue);

Note that this was during ext 4 beta, but it should be almost the same now.