• Runtimes
  • We are changing the scale using hammer.js.

Hi.
The scale is changed using hammer.js to freely use rotation, enlargement, and reduction.

`

      let stage = document.querySelector("canvas");
      let mc = new Hammer.Manager(stage);
      let pan = new Hammer.Pan({pointers: 2});
      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) {
        adjustRotation -= e.rotation;
      });

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

        let transforms = ['scale(' + currentScale + ')'];
        if(transforms){

          let e = canvas.clientWidth;
          console.log(currentScale);

        }
        transforms.push('translate(' + currentDeltaX + 'px,' + currentDeltaY + 'px)');
        transforms.push('rotate(' + Math.round(currentRotation) + 'deg)');
        stage.style.transform = transforms.join(' ');
      });

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

When the scale is changed using hammer.js, the skeleton does not move.

    var hairimagesrc = document.getElementById("maskon");
    var hairimagewidth = $(hairimagesrc).width();

		let w = canvas.clientWidth;

    console.log("width: " + w);

		let h = canvas.clientHeight;
		if (canvas.width != w || canvas.height != h) {
			canvas.width = w;
			canvas.height = h;
		}

		// Calculations to center the skeleton in the canvas.
		let bounds = skeletons[activeSkeleton][format].bounds;
		let centerX = bounds.offset.x + bounds.size.x / 2;


		let centerY = bounds.offset.y + bounds.size.y / 2;
		let scaleX = bounds.size.x / canvas.width;
		let scaleY = bounds.size.y / canvas.height;
		let scale = Math.max(scaleX, scaleY) * 0.5;
		if (scale < 1) scale = 1.2;
		let width = canvas.width * scale;
		let height = canvas.height * scale;

`

Where should I fix it?

Related Discussions
...

I'm afraid I'm not familiar with hammer.js at all, but from the looks of it, you are using it to interpret multi-touch gestures to pan and pinch zoom a canvas. You perform the scale and rotation via a CSS transform. That's what I get from your first code block.

The second one tries to center and scale the skeleton on the newly scaled canvas. That looks ok-ish. But I don't see where you apply the scale to the skeleton.

It's best to boil all this down into a single, self-contained .html file with some JavaScript that lets us reproduce the problem.