Leaflet.Path.Transform icon indicating copy to clipboard operation
Leaflet.Path.Transform copied to clipboard

Different rotation origin

Open aczopekkontaktio opened this issue 6 years ago • 3 comments

Hello, I very like your profile. However, I have case when I need to rotate my polygon where pivot is not center of polygon but bottom-left corner. So, I have overriden _getRotationOrigin method. Looks like this

_getRotationOrigin: function() { return this._rect._latlngs[0][0]; },

For me this is perfect. However, when I am rotating then preview matrix looks perfect. Unfortunately, after finishing rotation (_onrotateend) my polygon has been rotated but pivot is around mid again, looks different than on preview. What should I change yet to make this rotation origin adequate at the end? I was figthing with it around 2 days and still can do nothing...

aczopekkontaktio avatar Jul 23 '19 15:07 aczopekkontaktio

I ran into the same issue. After some debugging, it seems there are 2 variables set to determine the origin: _rotationOriginPt and _rotationOrigin. The latter one is set in _createRotationHandlers() to the center again. If instead you assign the result of this._getRotationOrigin() to this variable, the polygon would stay at the correct position (with some minor deviations).

torx85 avatar Feb 18 '20 15:02 torx85

As mentionned by @torx85, when replacing the _rotationOrigin also in the this._getRotationOrigin() function, it works !

mRamzii avatar Jun 24 '20 14:06 mRamzii

Just providing a quick code example here for other people who would like to rotate around a different point. This code transforms a given rectangle around it's bottom left point. It is a hack, but workable.

      const crds = [
        [52, 5],
        [52.1, 5.1],
      ]
      const polygon = L.rectangle(crds, { transform: true }).addTo(this.missionLayer)
      polygon.transform.enable({ rotation: true, scaling: false })
      // Override center of rotation https://github.com/w8r/Leaflet.Path.Transform/issues/53
      polygon.transform._rotationOrigin = new L.LatLng(crds[0][0], crds[0][1])
      polygon.transform._rotationOriginPt = new L.LatLng(crds[0][0], crds[0][1])
      polygon.transform._getRotationOrigin = function () {
        return new L.LatLng(crds[0][0], crds[0][1])
      }
      polygon.on('rotateend', (e) => {
        polygon.transform._rotationOrigin = new L.LatLng(crds[0][0], crds[0][1])
      })

av-jeroen avatar May 22 '23 16:05 av-jeroen