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]

Scale cannot be done similar to move by just using transform. You would have to consider reference point for the scaling.

In the scale event arguments, the info argument contains around property. Roughly, the calculation should be something like below

X = around.x + ((point.x - around.x) * scalex)

Y = around.y + ((point.y - around.y) * scaley)

Sorry I have not verified it.

[Haider_Ali]

Its working  better this way, try this fiddle

graphicScale - JSFiddle

on some window size  its not working fine (try adjusting the map area in jsfddle  )

[thejuskambi]

The logic for scaling is working correctly. If I comment the line where you are using geometryEngine.offset. The Red graphic and the editor graphic seems to match.

[Haider_Ali]

Please  select the line graphic at different zoom level in some its working fine

[Haider_Ali]

I think its happening if selected graphic is not centered

[thejuskambi · Accepted solution]

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);

[Haider_Ali]

Thankyou its working fine,

just added

if( !evt.delta)

{

       return;

}

because evt.delta was undefined when i opened developer tool in chrome and resized it

Updated code in the following fiddle

graphicScale - JSFiddle