js css3 固定点拖拽旋转
一、直接上效果图：
然后是代码：
一共两种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.box {
width: 200px;
height:100px;
background: #cccccc;
position: absolute;
top: 30%;
left: 40%;
transform-origin: 50% 50% 0;
}
</style>
</head>
<body>
<div id="box" class="box"></div> <script> // 第一种
var isMove = false;
$('#box').mousedown(function (event) {
const element = event.target;
const rect = element.getBoundingClientRect();
element.dataset.centerX = rect.left + rect.width / 2;
element.dataset.centerY = rect.top + rect.height / 2;
element.dataset.angle = getDragAngle(event);
isMove = true;
}); $('#box').mousemove(function (event) {
if (isMove) {
var angle = getDragAngle(event);
event.target.style.transform = 'rotate(' + angle + 'rad)';
}
}); $('#box').mouseup(function (event) {
isMove = false;
event.target.dataset.angle = getDragAngle(event);
}); function getDragAngle(event) {
var element = event.target;
var startAngle = parseFloat(element.dataset.angle) || 0;
var center = {
x: parseFloat(element.dataset.centerX) || 0,
y: parseFloat(element.dataset.centerY) || 0,
};
var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);
return angle - startAngle;
}
// 第二种
// $(document).on('mousemove',function(e){
// var x = e.clientX;
// var y = e.clientY;
// var origin = {x:950,y:190} // 先手动指定当前中心点，也可以根据当前元素的left+width/2 的到x top+height/2 得到y值 // // 计算出当前鼠标相对于元素中心点的坐标
// x = x - origin.x; // 因为x大于origin.x 是在y轴右边，直接减就行了
// y = origin.y - y;// 但是y如果要在x轴上方，它是比origin.y要小的，所以这里就需要反过来 // // 然后计算就可以了
// var ele = document.getElementById('box')
// var deg = Math.atan2(y, x) / Math.PI * 180;
// ele.style.transform = 'rotate('+ -deg +'deg)'
// }); </script> </body>
</html>
二、固定4个顶点
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
* {
user-select: none;
}
.box {
width: 200px;
height:100px;
background: #cccccc;
position: relative;
top: 30%;
left: 40%;
transform-origin: 50% 50% 0;
margin-top: 15%;
} .dot {
position: absolute;
width: 20px;
height: 20px;
background-color: #f60;
} .dot1 {
top: -10px;
left: -10px;
} .dot2 {
top: -10px;
right: -10px;
} .dot3 {
bottom: -10px;
right: -10px;
} .dot4 {
bottom: -10px;
left: -10px;
}
</style>
</head>
<body>
<div id="box" class="box">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
</div> <script> // 第一种
var isMove = false;
$('.dot').mousedown(function (event) {
const element = $('#box')[0]
const rect = element.getBoundingClientRect();
element.dataset.centerX = rect.left + rect.width / 2;
element.dataset.centerY = rect.top + rect.height / 2;
element.dataset.angle = getDragAngle(event);
isMove = true;
}); $(document).mousemove(function (event) {
if (isMove) {
var angle = getDragAngle(event);
$('#box')[0].style.transform = 'rotate(' + angle + 'rad)';
}
}); $(document).mouseup(function (event) {
if (isMove) {
isMove = false;
$('#box')[0].dataset.angle = getDragAngle(event);
}
}); function getDragAngle(event) {
var element = $('#box')[0];
var startAngle = parseFloat(element.dataset.angle) || 0;
var center = {
x: parseFloat(element.dataset.centerX) || 0,
y: parseFloat(element.dataset.centerY) || 0,
};
var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);
return angle - startAngle;
}
</script> </body>
</html>
js css3 固定点拖拽旋转的更多相关文章
- canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...
- canvas 图片拖拽旋转之一——坐标转换translate
引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- js实现可拖拽的div
前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...
- 纯JS实现可拖拽表单
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...
- C# 图片盖章功能实现，支持拖拽-旋转-放缩-保存
实现图片盖章功能,在图片上点击,增加“图章”小图片,可以拖拽“图章”到任意位置,也可以点击图章右下角园框,令图片跟着鼠标旋转和放缩. 操作方法:1.点击增加“图章”2.选中移动图标3.点中右下角放缩旋 ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
随机推荐
- python pymysql 连接 mysql数据库进行操作
1.数据库的连接操作 import pymysql conn = pymysql.connect(host=', db='oldboydb') # host表示ip地址,user表示用户名,passw ...
- 移动App双周版本迭代策略
对于移动互联网产品来说,迭代的速度就是生命.我创业时做移动App时是一周一版,而现在是2周1版.相比起小公司,大公司迭代时间虽长,却更为不易,因为大公司流程更多,参与人数更多,需求更多,实现这样的快速 ...
- pytest.fixture和普通函数调用
普通函数嗲用def one(): a="aaaaaaaaaaa" return a def test_one(): s=one() print (s) test_one() pyt ...
- 网络通信框架之okHttpUtils
okHttpUtils封装库志支持: 一般的get请求 一般的post请求 基于Http的文件上传 文件下载 上传下载的进度回调 加载图片 支持请求回调,直接返回对象.对象集合 支持session的保 ...
- 六十三：CSRF攻击与防御之系统准备之登录与转账功能
登录功能 在forms里面添加验证 class LoginForm(Form): email = StringField(validators=[Email(message='邮箱格式错误')]) p ...
- spring Ioc/DI的理解
学习spring的童鞋都知道,spring中有两个非常重要的点,Ioc(控制反转)与DI(依赖注入),对于初级玩家来说,这两个概念可能有点模棱两可的感觉,今天就谈下自己的一点理解,不足请多多指教!!! ...
- Java学习之==>Java8 新特性详解
一.简介 Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级.Java 8是 Java 自 Java 5(发布于2004年)之后的最重要的版本.这个版本包含语言.编译器.库. ...
- C基础知识(1)：基本数据类型
C的基本数据类型包括整型和浮点型,长度及精度信息如下: #include <stdio.h> #include <limits.h> #include <float.h& ...
- ubuntu安装成功之后需要做些什么？
1.安装VMtool 1.1打开虚拟机之后-> 安装VMtool 1.2 点击之后,桌面就会出现一个VMtool光驱文件,如果提示光驱被占用就先用root登录 1.3在命令行挂载 sudo mo ...
- 【MM系列】SAP技巧之更改布局
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP技巧之更改布局 前言部分 ...