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?
