Scaling a graphic

Haider_Ali

I want to scale a  line graphic on scale event and below is the the code of what i am doing

myEditor.editToolbar.on('scale', function(e) {

     var tt = transform(e.graphic.geometry, e.info.scaleX, e.info.scaleY);

 

     tsymbolGraphic.setGeometry(tt);

          // and then drawing the tsymbolGraphic on map

});

///and my transform function

function transform(geometry,scaleX,scaleY)

  {  // currently for polyline

  var poly = new Polyline(geometry.spatialReference);

  var screenPoint,mapPoint;

  arrayUtils.forEach(geometry.paths,function(path,i)

  {

  poly.paths = [];

  arrayUtils.forEach(path,function(pnt,j)

  {

  screenPoint = map.toScreen(new Point(pnt[0],pnt[1], geometry.spatialReference));

  screenPoint.x = screenPoint.x * scaleX  + 5  ;

  screenPoint.y = screenPoint.y * scaleY  + 5 ;

  mapPoint =  map.toMap(screenPoint);

  poly.paths = [mapPoint.x,mapPoint.y];

  });

  });

  return poly;

  }

here is the link of full code https://jsfiddle.net/0fy3v8yr/​

thejuskambi

I get what the issue is, The offset happens only when you pan the map. If zoom or change the level, the issue does not occur. Its because, whenever we pan, the 0,0 location of the map/layer is offset and that information is missing while scaling.

To overcome that, add the following to maintain a variable with map delta offsets.

var mapDelta;
map.on("extent-change", function(evt){
     console.log(JSON.stringify(evt.delta));
     if(!evt.levelChange && mapDelta){
          mapDelta.x += evt.delta.x;
          mapDelta.y += evt.delta.y;
      } else {
          mapDelta = evt.delta;
      }
});

Now the scaling logic will looks like below

screenPoint.x = (refPnt.x + mapDelta.x)  + ((screenPoint.x - (refPnt.x  + mapDelta.x)) * scaleX);
screenPoint.y = (refPnt.y + mapDelta.y) + ((screenPoint.y - (refPnt.y + mapDelta.y)) * scaleY);