topic Re: Scaling a graphic in ArcGIS JavaScript Maps SDK Questions

Scaling a graphic

Haider_Ali — Fri, 05 Aug 2016 16:49:40 GMT

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/

Re: Scaling a graphic

thejuskambi — Fri, 05 Aug 2016 17:48:40 GMT

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.

Re: Scaling a graphic

Haider_Ali — Fri, 05 Aug 2016 18:34:28 GMT

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 )

Re: Scaling a graphic

thejuskambi — Fri, 05 Aug 2016 19:38:29 GMT

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.

Re: Scaling a graphic

Haider_Ali — Fri, 05 Aug 2016 23:46:07 GMT

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

Re: Scaling a graphic

Haider_Ali — Sat, 06 Aug 2016 13:48:48 GMT

I think its happening if selected graphic is not centered

Re: Scaling a graphic

thejuskambi — Sat, 11 Dec 2021 19:13:18 GMT

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

Re: Scaling a graphic

Haider_Ali — Mon, 08 Aug 2016 18:26:52 GMT

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