CoString of 2D Canvas Rectangle Events
View this example in sandbox :
o,109.72328593151204,214.0909703111111&z,15&r,6,ef1568,1,61ed04,0.3,67.72328593151204,70.0909703111111,28.723285931512038,162.0909703111111
View this example full screen.
View this example in sandbox :
o,109.72328593151204,214.0909703111111&z,15&r,6,ef1568,1,61ed04,0.3,67.72328593151204,70.0909703111111,28.723285931512038,162.0909703111111
var g_oCoStrMap = null; var g_oRectangle = null; var g_oInfoWindow = null; function initialize() { var oMapOptions = { coStrType: zhupiter.CoStr.CoStrType.CANVAS2D, center: new zhupiter.CoStr.Point2D(214.0909703111111, 109.72328593151204), zoom: 15 }; g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions); var oBounds = new zhupiter.CoStr.Bounds2D( new zhupiter.CoStr.Point2D(70.0909703111111, 67.72328593151204), new zhupiter.CoStr.Point2D(162.0909703111111, 28.723285931512038) ); g_oRectangle = new zhupiter.CoStr.Rectangle({ bounds: oBounds, editable: true, draggable: true }); g_oRectangle.setMap(g_oCoStrMap); zhupiter.CoStr.event.addListener(g_oRectangle, 'bounds_changed', onBoundsChanged); g_oInfoWindow = new zhupiter.CoStr.InfoWindow(); } function onBoundsChanged(oInEv) { var oNe = g_oRectangle.getBounds().getNorthEast(); var oSw = g_oRectangle.getBounds().getSouthWest(); var sStr = '<b>Rectangle moved.</b><br>' + 'New north-east corner: ' + oNe.y() + ', ' + oNe.x() + '<br>' + 'New south-west corner: ' + oSw.y() + ', ' + oSw.x(); g_oInfoWindow.setContent(sStr); g_oInfoWindow.setPosition(oNe); g_oInfoWindow.setMap(g_oCoStrMap); } zhupiter.CoStr.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html> <html> <head> <meta name='viewport' content='initial-scale=1.0, user-scalable=no'> <meta charset='utf-8'> <title>2D Canvas Rectangle Events</title> <style> html, body, #map_canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src='//costr.zhupiter.com/js/'></script> <script> var g_oCoStrMap = null; var g_oRectangle = null; var g_oInfoWindow = null; function initialize() { var oMapOptions = { coStrType: zhupiter.CoStr.CoStrType.CANVAS2D, center: new zhupiter.CoStr.Point2D(214.0909703111111, 109.72328593151204), zoom: 15 }; g_oCoStrMap = new zhupiter.CoStr.Map(document.getElementById('map_canvas'), oMapOptions); var oBounds = new zhupiter.CoStr.Bounds2D( new zhupiter.CoStr.Point2D(70.0909703111111, 67.72328593151204), new zhupiter.CoStr.Point2D(162.0909703111111, 28.723285931512038) ); g_oRectangle = new zhupiter.CoStr.Rectangle({ bounds: oBounds, editable: true, draggable: true }); g_oRectangle.setMap(g_oCoStrMap); zhupiter.CoStr.event.addListener(g_oRectangle, 'bounds_changed', onBoundsChanged); g_oInfoWindow = new zhupiter.CoStr.InfoWindow(); } function onBoundsChanged(oInEv) { var oNe = g_oRectangle.getBounds().getNorthEast(); var oSw = g_oRectangle.getBounds().getSouthWest(); var sStr = '<b>Rectangle moved.</b><br>' + 'New north-east corner: ' + oNe.y() + ', ' + oNe.x() + '<br>' + 'New south-west corner: ' + oSw.y() + ', ' + oSw.x(); g_oInfoWindow.setContent(sStr); g_oInfoWindow.setPosition(oNe); g_oInfoWindow.setMap(g_oCoStrMap); } zhupiter.CoStr.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id='map_canvas'></div> </body> </html>
CoString | Donate bitcoin: 1LX5KC19tXCPK8y72Z6LVoZjoSaCp9P6K