Spin rectangular image within boundary using angular 6

Question

Spin rectangular image within boundary using angular 6

I am trying to achieve a rotating effect on a rectangular image within a frame of the same dimensions, as shown below:

<div style="border:1px solid #d3d3d3;width:208px;height:250px">
 <img style="width:208px;height:250px" src="https://www.webslake.com/w_img/t_i/lpw.png" [style.transform]="styles"> </div>

   <button type="button" class="btn btn-undo btn-lg" (click)="rotateImage('left')">

Here is the function that controls the rotation:

rotateImage(direction) {    
    if (direction === 'left') {
      this.rotationAmount = this.rotationAmount + -90;
    } else if(direction === 'right') {
      this.rotationAmount = this.rotationAmount + 90;
    }
    this.styles =  'rotate(' + this.rotationAmount + 'deg)';

  }

I am looking for a way to rotate the image inside the frame without altering its width and height. I want to maintain the same dimensions throughout the rotation process, where the new width corresponds to the old height and vice versa.

html css angular

Answer 1

Answer №1

Incorporated new logic to compute the top and left positions for styling purposes:

rotateImage(direction: string) {

 if (direction === 'left') {
   let temp = this.width;
   this.width = this.height;
   this.height = temp;
   this.rotationAmount = this.rotationAmount + -90;
   if (this.rotationAmount == -360) {
    this.rotationAmount = 0;
   }
  console.log(this.rotationAmount);
   if (this.rotationAmount === -180 || this.rotationAmount === 0) {
     this.top = 0;
     this.left = 0;
   } else {
     this.top = (this.width-this.height)/2 * (-1); 
     this.left = (this.width-this.height)/2;
     console.log(this.top, this.left)
   }
} 

 else if(direction === 'right') {
   this.rotationAmount = this.rotationAmount + 90;
 }
 this.styles =  'rotate(' + this.rotationAmount + 'deg)';
}

Here is the link to the working code on stackblitz https://stackblitz.com/edit/angular-gz9zqs?embed=1&file=src/app/app.component.ts

Answer 2

Incorporated new logic to compute the top and left positions for styling purposes:

rotateImage(direction: string) {

 if (direction === 'left') {
   let temp = this.width;
   this.width = this.height;
   this.height = temp;
   this.rotationAmount = this.rotationAmount + -90;
   if (this.rotationAmount == -360) {
    this.rotationAmount = 0;
   }
  console.log(this.rotationAmount);
   if (this.rotationAmount === -180 || this.rotationAmount === 0) {
     this.top = 0;
     this.left = 0;
   } else {
     this.top = (this.width-this.height)/2 * (-1); 
     this.left = (this.width-this.height)/2;
     console.log(this.top, this.left)
   }
} 

 else if(direction === 'right') {
   this.rotationAmount = this.rotationAmount + 90;
 }
 this.styles =  'rotate(' + this.rotationAmount + 'deg)';
}

Here is the link to the working code on stackblitz https://stackblitz.com/edit/angular-gz9zqs?embed=1&file=src/app/app.component.ts

Answer 3

Answer №2

Rotate images in Angular using Renderer2 instead of manual code.

   <button type="button" class="btn btn-undo btn-lg imagepreview" (click)="rotateImage('left')">
   <button type="button" class="btn btn-undo btn-lg imagepreview" (click)="rotateImage('right')">

Include Renderer2 in your TS file:

import {Renderer2} from '@angular/core';

Add the renderer to your constructor:

private renderer: Renderer2

Implement the rotateImage method:

rotateImage(direction) {
    this.angle += direction == 'left' ? -90 : 90;
    this.renderer.setStyle(document.querySelector('.imagepreview'), 'transform', `rotate(${this.angle}deg)`);
  }

Answer 4

Rotate images in Angular using Renderer2 instead of manual code.

   <button type="button" class="btn btn-undo btn-lg imagepreview" (click)="rotateImage('left')">
   <button type="button" class="btn btn-undo btn-lg imagepreview" (click)="rotateImage('right')">

Include Renderer2 in your TS file:

import {Renderer2} from '@angular/core';

Add the renderer to your constructor:

private renderer: Renderer2

Implement the rotateImage method:

rotateImage(direction) {
    this.angle += direction == 'left' ? -90 : 90;
    this.renderer.setStyle(document.querySelector('.imagepreview'), 'transform', `rotate(${this.angle}deg)`);
  }

Spin rectangular image within boundary using angular 6

Answer №1

Answer №2

Similar questions

Change the WordPress Divi Builder nav bar to switch from transparent to white when scrolling or upon reaching a specific point on the page

Tips for expanding a text input field vertically, not horizontally like in Facebook, while typing or by holding down the Shift key and pressing Enter

Creating a three-row CSS layout where the middle row aligns to the right side

Managing varied PHP submissions using a single 'isset' declaration

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

Is there a way to transform time into a percentage with the help of the moment

I found myself pondering the method to achieve the slightly blue tinted box that sits behind the image

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Looking for assistance with my website's navigation bar and logo

Error with Angular PWA: A fatal error has occurred as the module '@schematics/angular/utility' cannot be located

Ionic Troubleshoot: Issue with Reading Property

Looping through color transitions upon hover using CSS

Clicking on an Angular routerLink that points to the current route does not function unless the page is re

Is there a method for PHP to detect changes in front-end routing (specifically with Angular)?

Styling with CSS: Enhancing list items with separators

CSS styling is not being applied to buttons within Ionic 2

What is the best way to reset the values in react-multiple-datepicker?

What's the best way to make sure my table fits perfectly within its container's width?

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

Prevent the ability to add options dynamically to a drop-down select list