CODEWITHSUNDEEP
javascripthtmlcss
Mayank Kataria
Mayank Kataria

Reputation: 1030

How to retain translate(-50%, -50%) effect?

I have applied hammerjs gestures on a textblock. Textblock initially is positioned at center through this code:

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

When I apply any gesture to that text, -50% translation goes away. How to retain that -50% effect?

Here's the transformation code that I'm using while gestures are applied:

const diff = this.startRotation - Math.round(eve.rotation);

this.selectedTextBlock.rotation = this.selectedTextBlock.lastRotation - diff;
this.selectedTextBlock.scale = this.selectedTextBlock.lastScale * eve.scale;
this.selectedTextBlock.deltaX = this.selectedTextBlock.lastDeltaX + (eve.deltaX / this.selectedTextBlock.scale);
this.selectedTextBlock.deltaY = this.selectedTextBlock.lastDeltaY + (eve.deltaY / this.selectedTextBlock.scale);

transforms.push('scale(' + this.selectedTextBlock.scale + ')');
transforms.push('translate(' + this.selectedTextBlock.deltaX + 'px,' + this.selectedTextBlock.deltaY + 'px)');
transforms.push('rotate(' + this.selectedTextBlock.rotation + 'deg)');

this.selectedTextElement.style.transform = transforms.join(' ');

Upvotes: 0

Views: 71

Answers (1)

BOZ
BOZ

Reputation: 2020

Since you are set a new X, Y information to transform here, naturally the existing information is distorted. transforms.push('translate(' + this.selectedTextBlock.deltaX + 'px,' + this.selectedTextBlock.deltaY + 'px)');

The most likely solution to this is to process the two pieces of information.

transforms.push('translate(calc(' + this.selectedTextBlock.deltaX + 'px - 50%), calc(' + this.selectedTextBlock.deltaY + 'px - 50%))');

Your new code should be:

const diff = this.startRotation - Math.round(eve.rotation);

this.selectedTextBlock.rotation = this.selectedTextBlock.lastRotation - diff;
this.selectedTextBlock.scale = this.selectedTextBlock.lastScale * eve.scale;
this.selectedTextBlock.deltaX = this.selectedTextBlock.lastDeltaX + (eve.deltaX / this.selectedTextBlock.scale);
this.selectedTextBlock.deltaY = this.selectedTextBlock.lastDeltaY + (eve.deltaY / this.selectedTextBlock.scale);

transforms.push('scale(' + this.selectedTextBlock.scale + ')');
/* edited */ transforms.push('translate(calc(' + this.selectedTextBlock.deltaX + 'px - 50%), calc(' + this.selectedTextBlock.deltaY + 'px - 50%))');
transforms.push('rotate(' + this.selectedTextBlock.rotation + 'deg)');

this.selectedTextElement.style.transform = transforms.join(' ');

Upvotes: 1

Related Questions