vue3项目将图片正时针、逆时针旋转

点击按钮，让某个图片正时针或者逆时针旋转，我使用的是css3中transform 和transition 属性，动态给图片添加样式，当触发正时针或者逆时针旋转按钮的时候，给该图片的属性进行赋值即可，来看下具体是如何实现的吧

<template>//要旋转的图片，我这个是接口循环输出的<img:style="{...styleImg,width: `${w}px`,height: `${h}px`,}":src="item.img"alt=""ref="imagePig"class="imge"/><img src="../assets/u200.png" alt="" @click="rotate_left" />//逆时针旋转按钮<img src="../assets/u180.png" alt="" @click="rotates_right" />//顺时针旋转按钮
</template><script setup>// 旋转const styleImg = reactive({transform: "",transition: "",});// 逆时针旋转const deg = ref(0);const rotate_left = () => {if (degs.value != 0) {degs.value -= 90;styleImg.transform = `rotateZ(${degs.value}deg) scale(1.2)`;styleImg.transition = "0.5s";} else if (degs.value == 0) {deg.value += 90;styleImg.transform = `rotateZ(${-deg.value}deg) scale(1.2)`;styleImg.transition = "0.5s";}};// 正时针旋转const degs = ref(0);const rotates_right = () =>{if (deg.value != 0) {deg.value -= 90;styleImg.transform = `rotateZ(${-deg.value}deg) scale(1.2)`;styleImg.transition = "0.5s";} else if (deg.value == 0) {degs.value += 90;styleImg.transform = `rotateZ(${degs.value}deg) scale(1.2)`;styleImg.transition = "0.5s";}};
</script>

vue3项目将图片正时针、逆时针旋转相关推荐

ios 图片逆时针旋转_iphone-IOS 竖直拍照被旋转，image-orientation 让图片自动旋转
本文目录结构 IOS 垂直拍照的时候会遇到,PC 端读取的时候,逆时针旋转了 90 度的问题: 安卓.PS 处理的,相册选择截图等不会出现这个问题: 场景说明: 这个图片在浏览器里,如果您单独打开的时 ...
iOS开发中UIImageView逆时针旋转,并得到旋转后的图片
很多小伙伴会用系统的动画旋转,但都是顺时针的,但是开发中有些场景需要用到逆时针旋转效果更好,比方说tableView的展开/收起指示箭头方向的变换,如果是顺时针复位,就会显得特别别扭.以下一段代码 ...
java web图片旋转_修正web项目中图片旋转方向
# 使用 imagemagick 旋转查看照片 EXIF 信息,Exif 中的图片旋转信息储存在``Orientation``中. ``` identify -verbose xxx.jpg ``` ...
图片镜像水平翻转,垂直翻转以及顺时针,逆时针旋转
let image = board.image! //水平翻转let flipImageOrientation = (image.imageOrientation.rawValue + 4) % 8l ...
vue3 项目修改打包后的引用路径，调整图片压缩成base64的门槛
vue3 项目修改打包后的引用路径,调整图片压缩成base64的门槛前言解决完事前言最近的项目中需要在程序中显示一个H5页面,所以按照官方VUE CLI的教程创建了一个项目开始整.整到最后打 ...
旋转角度如何知道是顺时针还是逆时针旋转？（仅供参考，更靠谱的是旋转轴到z轴正半轴上）
a和b向量在x-y平面内要确定向量的旋转方向(顺时针或逆时针),可以使用右手定则. 在三维空间中,假设您的右手放在绕旋转轴旋转的向量上.如果您的大拇指指向旋转轴的正方向,那么旋转方向是逆时针:如果您 ...
nowcoder-顺时针打印矩阵-模拟魔方逆时针旋转
题目顺时针打印矩阵输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出 ...
借助numpy.rot90实现图片顺时针旋转90°，旋转后图片没有黑边
返回numpy 类型图片, numpy 通道是 "BGR" import cv2 import glob import numpy as np from PIL import Im ...
图片上传被旋转，golang Exif 判断.jepg图片原始信息Orientation方向，并旋转，
jepg图片上传后,换取的url在web的image标签上显示被旋转. 实例:iphone6ps竖拍图片原图上传显示看图软件打开: 图片为正: 上传后,在image标签内显示为逆时针旋转90度. 此 ...

vue3项目将图片正时针、逆时针旋转

vue3项目将图片正时针、逆时针旋转相关推荐

最新文章

热门文章