项目场景：

vue-cropper git:https://github.com/xyxiao001/vue-cropper

问题描述

在使用vue-cropper旋转功能时，内部方法默认每次旋转±1 同步到css也就是90°
无法做出自定义任意角度旋转

<Button size="mini" type="danger" plain @click="rotateLeft">旋转</Button>
rotateLeft () {this.$refs.cropper.rotateLeft()
}
// 内部方法 向左边旋转
rotateLeft() {this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;
},ctx.rotate((rotate * 90 * Math.PI) / 180);

解决方案：

想要自定义角度旋转，就不能直接使用内部方法进行操作，而是直接修改this.rotate的值，因为this.rotate的值每增加1就是旋转90度，旋转任意角度就是 任意角度/90

<Button size="mini" type="danger" plain @click="rotateLeft">旋转</Button>
rotateLeft () {//this.$refs.cropper.rotateLeft()//旋转100度this.$refs.cropper.rotate=this.$refs.cropper.rotate+100/90;//每次递增旋转9度this.$refs.cropper.rotate=this.$refs.cropper.rotate+9/90;}
// 内部方法 向左边旋转
rotateLeft() {this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;
},ctx.rotate((rotate * 90 * Math.PI) / 180);

vue-cropper 自定义旋转任意角度相关推荐

JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句收藏我要投稿引入下方的jquery.rotate.js文件,然后通过 ...
PDF任意页旋转任意角度
使用软件:Adobe Acrobat Pro DC.Enfocus PitStop Pro插件 1.打开PDF文件 2.在左侧选中右键可以旋转固定角度 3.如果要旋转任意角度,Alt+Ctrl+G ...
JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
利用Matlab将任意曲线旋转任意角度
利用Matlab将任意曲线旋转任意角度公式计算数据 matlab代码结果公式计算对于如上图所示的任意曲线,需要绕固定点O旋转某一角度,取曲线上任意一点A计算旋转后的坐标值. 设OA的长度为L ...
opencv图片旋转关于中心旋转任意角度与坐标转换
如下例子,实现图片关于中心旋转任意角度,及坐标变换 import os import os.path import cv2 import numpy as np from math import co ...
c++实现图像旋转任意角度
图形图像处理-之-任意角度的高质量的快速的图像旋转上篇纯软件的任意角度的快速旋转 HouSisong@GMail.com 200 ...
matlab控制三角形绕原点旋转任意角度
项目中遇到一个问题,需要把正三角形绕原点旋转任意角度,平时操作图片的时候,顺便旋转,感觉好像很简单,但是自己去做的时候还是有些困难. 我觉得旋转的难点在于由原始点计算新的目标点上,因为你需要考虑点位于 ...
C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字
这篇文章是 GDI+ 总结系列的第三篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求需求是要实现给图片添加任意角度旋转的文字,文字的旋 ...
Qt QPixmap旋转任意角度
效果使用 QPixmap pix2 = rotateImageWithTransform(pix1, 30); 源码 // 旋转图片任意角度 QPixmap rotateImageWithTrans ...
c/c++实现图像旋转任意角度
旋转原理和旋转公式: 文章出处 https://blog.csdn.net/wonengguwozai/article/details/52049092 推导旋转公式: 旋转示意图有: tg(b)= ...

vue-cropper 自定义旋转任意角度

项目场景：

问题描述

解决方案：

vue-cropper 自定义旋转任意角度相关推荐

最新文章

热门文章