'pinch and rotate multiple objects in fabric.js with Hammer.js

I want to operate pinch rotate for multiple fabric.js objects in Hammer.js.

If rotate one object and then try to rotate another object,

It reflects the angle of the previously selected object.

https://codepen.io/saburouta/pen/NWwqYQx

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <script>
    window.onload = function () {

      var canvas = new fabric.Canvas('canvas');

      canvas.setWidth(1000);
      canvas.setHeight(1000);

      canvas.add(new fabric.Rect({
          left: 50,
          top: 50,
          width: 100,
          height: 100,
          fill: 'green'
        }));

        canvas.add(new fabric.Rect({
          left: 150,
          top: 150,
          width: 100,
          height: 100,
          fill: 'blue'
        }));

      canvas.renderAll();

      document.body.addEventListener('touchmove', function(event) {
        event.preventDefault();
      }, false);
      let stage = canvas.upperCanvasEl;

      let mc = new Hammer.Manager(stage);
      let pan = new Hammer.Pan();
      let rotate = new Hammer.Rotate();
      let pinch = new Hammer.Pinch();

      mc.add([pan, pinch, rotate]);
      mc.get('pinch').set({ enable: true });
      mc.get('rotate').set({ enable: true });

      let adjustDeltaX = 0;
      let adjustDeltaY = 0;
      let adjustScale = 1;
      let adjustRotation = 0;

      let currentDeltaX = null;
      let currentDeltaY = null;
      let currentScale = null;
      let currentRotation = null;

      mc.on("panstart pinchstart rotatestart", function(e) {
        const activeObject = canvas.getActiveObject()
        adjustRotation -= e.rotation // The previously selected object angle will be reflected.
        adjustScale = activeObject.scaleX
      });

      mc.on("panmove pinchmove rotatemove", function(e) {
        currentRotation = adjustRotation + e.rotation;
        currentScale = adjustScale * e.scale;
        currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
        currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

        const activeObject = canvas.getActiveObject()
        activeObject.angle = Math.round(currentRotation) 
        activeObject.scaleX = currentScale
        activeObject.scaleY = currentScale
      });

      mc.on("panend pinchend rotateend", function(e) {
        adjustScale = currentScale;
        adjustRotation = currentRotation;
        adjustDeltaX = currentDeltaX;
        adjustDeltaY = currentDeltaY;
      });

      }
  </script>
</body>
</html>

How can I prevent the previous angle from being reflected even with multiple objects?

fabricjs hammer.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'pinch and rotate multiple objects in fabric.js with Hammer.js

Sources

Related Questions