原生js手撸拖拽矩形移动与缩放

最新推荐文章于 2024-05-07 11:13:53 发布
最新推荐文章于 2024-05-07 11:13:53 发布
阅读量1.6k 收藏 11
点赞数 2
分类专栏： 好玩的JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33270001/article/details/115349058
版权
一、写在前面

写这个原因很简单，有这么一个需求如下：

编写代码实现以下要求：画一个矩形，拖拽矩形的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置。
要求如下：

  1. 整个矩形的最小大小为 5px * 5px，缩放到最小时不能发生移动；
  2. 鼠标快速移动时移动和缩放效果要保持流畅。
    在这里插入图片描述
二、直接上代码

还是按照步骤一步一步的来吧。首先是要创建一个矩形，然后再写逻辑，下面一个矩形就画好了。。。
但是似乎屏幕上啥也没有。。 是的没宽高，所以就看不到了。别着急，继续画。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现拖拽缩放元素</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #app-warpper {
            position: absolute;
            cursor: move;
        }
    </style>
</head>

<body>
    <div id="app-warpper"></div>
</body>
<script>
  //todo
</script>
</html>

这里开始写逻辑了，我们选择用类的形式来创建一个可以拖拽编辑的矩形。下面就是代码部分.若想看逻辑的可以一步一步的看代码注释,大概的思路就是,你需要计算你当前按下鼠标的位置,然后在移动的时候获取的鼠标位置与刚刚鼠标按下的位置进行一个计算.有个差值,这个差值就是需要移动的距离.

矩形缩放的时候就稍微要复杂一点了,大概思路如下:

  • 左上角缩放: 计算 left坐标,top的坐标,以及宽高;
  • 右上角缩放: 计算top坐标 和 宽高即可.
  • 右下角缩放: 计算宽高即可.
  • 左下角缩放: 计算left,top 和宽高.

可能描述有点抽象,但是动手写一遍的时候就知道大概是咋回事了.

  	/**
     * 创建一个可拖拽的矩形
     */
    function CreateDragRect(elm, options = {}) {
        if (!elm) throw new Error('el 必须是一个document对象');
        this.rect = elm;
        this.isLeftMove = true;
        this.isTopMove = true;
        this.rectDefaultPosition = options.position || 'fixed';
        this.rectDefaultLeft = options.x || 0;
        this.rectDefaultTop = options.y || 0;
        this.rectWidth = options.width || 100;
        this.rectHeight = options.height || 100;
        this.rectMinWidth = options.rectMinWidth || 5;  //最小宽度(超过之后不允许再缩放)
        this.rectMinHeight = options.rectMinHeight || 5;  //最小高度(超过之后不允许再缩放)
        this.rectBackgroundColor = options.background || '#ccc';
        this.dragIconSize = options.dragIconSize || '4px';
        this.dragIconColor = options.dragIconColor || '#f00';
        //主矩形是否可以移动
        this.isMove = false;
        this.initStyle();
        this.bindDragEvent(this.rect);
    }

    /**
     * 主矩形绑定move事件
     */
    CreateDragRect.prototype.bindDragEvent = function (dom, position) {
        const _this = this;
        dom.onmousedown = function (event) {
            event.stopPropagation();
            //按下矩形的时候可以移动，否则不可移动
            _this.isMove = !position;
            // 获取鼠标在wrapper中的位置
            let boxX = event.clientX - dom.offsetLeft;
            let boxY = event.clientY - dom.offsetTop;
            //鼠标移动事件(如果计算太高,有拖影)
            document.onmousemove = _this.throttle(function (moveEv) {
                let ev = moveEv || window.event;
                ev.stopPropagation();
                let moveX = ev.clientX - boxX;
                let moveY = ev.clientY - boxY;
                switch (position) {
                    case 'top-left':    //左上: 需计算top left width
                        _this.nwRectSize(moveX, moveY);
                        break;
                    case 'top-right':   //右上 计算top 和 height
                        _this.neRectSize(moveX, moveY);
                        break;
                    case 'right-bottom':  //只需计算当前鼠标位置
                        _this.seRectSize(moveX, moveY);
                        break;
                    case 'left-bottom': //计算left偏移量，计算w
                        _this.swRectSize(moveX, moveY);
                        break;
                    default:    //拖拽矩形
                        if (!_this.isMove) return null;
                        _this.moveRect(ev.clientX - boxX, ev.clientY - boxY);
                }
            }, 15);

            //鼠标松开，移除事件
            document.onmouseup = function (event) {
                document.onmousemove = null;
                document.onmouseup = null;
                // 存储当前的rect的宽高
                _this.rectWidth = _this.rect.offsetWidth;
                _this.rectHeight = _this.rect.offsetHeight;
                // 获得当前矩形的offsetLeft 和 offsetTop
                _this.rectOffsetLeft = _this.rect.offsetLeft;
                _this.rectOffsetTop = _this.rect.offsetTop;
            }
        }
    }

    /**
     * 初始化样式
     */
    CreateDragRect.prototype.initStyle = function () {
        this.rect.style.position = this.rectDefaultPosition;
        this.rect.style.width = this.rectWidth + 'px';
        this.rect.style.height = this.rectHeight + 'px';
        this.rect.style.left = this.rectDefaultLeft + 'px';
        this.rect.style.top = this.rectDefaultTop + 'px';
        this.rect.style.background = this.rectBackgroundColor;
        //依次为上 右 下 左
        let dragIcons = [
            {
                cursor: 'nw-resize',
                x: 'top',
                y: 'left'
            },
            {
                cursor: 'ne-resize',
                x: 'top',
                y: 'right'
            },
            {
                cursor: 'se-resize',
                x: 'right',
                y: 'bottom'
            },
            {
                cursor: 'sw-resize',
                x: 'left',
                y: 'bottom'
            }
        ];
        for (let i = 0, l = dragIcons.length; i < l; i++) {
            let icon = document.createElement('i');
            icon.id = Math.random().toString(36).substring(7);
            icon.style.display = 'inline-block';
            icon.style.width = this.dragIconSize;
            icon.style.height = this.dragIconSize;
            icon.style.position = 'absolute';
            icon.style.zIndex = 10;
            icon.style.cursor = dragIcons[i].cursor;
            icon.style.backgroundColor = this.dragIconColor;
            icon.style[dragIcons[i].x] = -parseInt(icon.style.width) / 2 + 'px';
            icon.style[dragIcons[i].y] = -parseInt(icon.style.height) / 2 + 'px';
            //绑定四个角的拖拽事件
            this.bindDragEvent(icon, `${dragIcons[i].x}-${dragIcons[i].y}`);
            //插入到矩形
            this.rect.appendChild(icon);
        }
    };

    /**
     * 移动主矩形
     */
    CreateDragRect.prototype.moveRect = function (x, y) {
        if (this.isTopMove && this.isLeftMove) {
            this.rect.style.left = x + 'px';
            this.rect.style.top = y + 'px';
        }
    };

    /**
     * 移动主矩形缩放 - 左上
     */
    CreateDragRect.prototype.nwRectSize = function (x, y) {
        //计算是否是最小宽度
        const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, this.rectHeight - y);
        if (isTopMove) {
            this.rect.style.top = this.rectOffsetTop + y + 'px';
            this.rect.style.height = height + 'px';
        }
        if (isLeftMove) {
            this.rect.style.left = this.rectOffsetLeft + x + 'px';
            this.rect.style.width = width + 'px';
        }
    };

    /**
     * 移动主矩形缩放 - 左下
     */
    CreateDragRect.prototype.swRectSize = function (x, y) {
        //计算是否是最小宽度
        const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, y);
        if (isLeftMove) {
            this.rect.style.left = this.rectOffsetLeft + x + 'px';
            this.rect.style.width = width + 'px';
        }
        if (isTopMove) {
            this.rect.style.height = height + 'px';
        }
    };

    /**
     * 移动主矩形缩放 - 右上
     */
    CreateDragRect.prototype.neRectSize = function (x, y) {
        //计算是否是最小宽度
        const { width, height, isTopMove, isLeftMove } = this.getMinSize(x, this.rectHeight - y);
        if (isTopMove) {
            this.rect.style.height = height + 'px';
            this.rect.style.top = this.rectOffsetTop + y + 'px';
        }
        if (isLeftMove) {
            this.rect.style.width = width + 'px';
        }
    };

    /**
     * 移动主矩形缩放 - 右下
     */
    CreateDragRect.prototype.seRectSize = function (x, y) {
        //计算是否是最小宽度
        const { width, height } = this.getMinSize(x, y);
        this.rect.style.width = width + 'px';
        this.rect.style.height = height + 'px';
    };

    /**
    * 节流函数
    * @param {*} fn 
    * @param {*} delay 
    */
    CreateDragRect.prototype.throttle = function (fn, delay) {
        let last = 0;
        return function () {
            let curr = Date.now();
            if (curr - last > delay) {
                fn.apply(this, arguments);
                last = curr;
            }
        }
    }

    /**
     * 获取宽高
     * @param {*} w 
     * @param {*} h 
     * @return { Object }
     */
    CreateDragRect.prototype.getMinSize = function (w, h) {
        let rectMinWidth = this.rectMinWidth;
        let rectMinHeight = this.rectMinHeight;
        //x拖拽
        this.isLeftMove = w >= this.rectMinWidth;
        //y拖拽
        this.isTopMove = h >= this.rectMinHeight;
        if (this.isLeftMove) rectMinWidth = w;
        if (this.isTopMove) rectMinHeight = h;
        return { width: rectMinWidth, height: rectMinHeight, isLeftMove: this.isLeftMove, isTopMove: this.isTopMove };
    }
三、完整代码

只想用代码功能的,只需要复制到你的html文件中就可以直接使用了.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现拖拽缩放元素</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #app-warpper {
            position: absolute;
            cursor: move;
        }
    </style>
</head>

<body>
    <div id="app-warpper"></div>
</body>
<script>
		/**
		 * 创建一个可拖拽的矩形
		 */
		function CreateDragRect(elm, options = {}) {
			if (!elm) throw new Error('el 必须是一个document对象');
			this.rect = elm;
			this.isLeftMove = true;
			this.isTopMove = true;
			this.rectDefaultPosition = options.position || 'fixed';
			this.rectDefaultLeft = options.x || 0;
			this.rectDefaultTop = options.y || 0;
			this.rectWidth = options.width || 100;
			this.rectHeight = options.height || 100;
			this.rectMinWidth = options.rectMinWidth || 5;  //最小宽度(超过之后不允许再缩放)
			this.rectMinHeight = options.rectMinHeight || 5;  //最小高度(超过之后不允许再缩放)
			this.rectBackgroundColor = options.background || '#ccc';
			this.dragIconSize = options.dragIconSize || '4px';
			this.dragIconColor = options.dragIconColor || '#f00';
			//主矩形是否可以移动
			this.isMove = false;
			this.initStyle();
			this.bindDragEvent(this.rect);
		}

		/**
		 * 主矩形绑定move事件
		 */
		CreateDragRect.prototype.bindDragEvent = function (dom, position) {
			const _this = this;
			dom.onmousedown = function (event) {
				event.stopPropagation();
				//按下矩形的时候可以移动，否则不可移动
				_this.isMove = !position;
				// 获取鼠标在wrapper中的位置
				let boxX = event.clientX - dom.offsetLeft;
				let boxY = event.clientY - dom.offsetTop;
				//鼠标移动事件(如果计算太高,有拖影)
				document.onmousemove = _this.throttle(function (moveEv) {
					let ev = moveEv || window.event;
					ev.stopPropagation();
					let moveX = ev.clientX - boxX;
					let moveY = ev.clientY - boxY;
					switch (position) {
						case 'top-left':    //左上: 需计算top left width
							_this.nwRectSize(moveX, moveY);
							break;
						case 'top-right':   //右上 计算top 和 height
							_this.neRectSize(moveX, moveY);
							break;
						case 'right-bottom':  //只需计算当前鼠标位置
							_this.seRectSize(moveX, moveY);
							break;
						case 'left-bottom': //计算left偏移量，计算w
							_this.swRectSize(moveX, moveY);
							break;
						default:    //拖拽矩形
							if (!_this.isMove) return null;
							_this.moveRect(ev.clientX - boxX, ev.clientY - boxY);
					}
				}, 15);

				//鼠标松开，移除事件
				document.onmouseup = function (event) {
					document.onmousemove = null;
					document.onmouseup = null;
					// 存储当前的rect的宽高
					_this.rectWidth = _this.rect.offsetWidth;
					_this.rectHeight = _this.rect.offsetHeight;
					// 获得当前矩形的offsetLeft 和 offsetTop
					_this.rectOffsetLeft = _this.rect.offsetLeft;
					_this.rectOffsetTop = _this.rect.offsetTop;
				}
			}
		}

		/**
		 * 初始化样式
		 */
		CreateDragRect.prototype.initStyle = function () {
			this.rect.style.position = this.rectDefaultPosition;
			this.rect.style.width = this.rectWidth + 'px';
			this.rect.style.height = this.rectHeight + 'px';
			this.rect.style.left = this.rectDefaultLeft + 'px';
			this.rect.style.top = this.rectDefaultTop + 'px';
			this.rect.style.background = this.rectBackgroundColor;
			//依次为上 右 下 左
			let dragIcons = [
				{
					cursor: 'nw-resize',
					x: 'top',
					y: 'left'
				},
				{
					cursor: 'ne-resize',
					x: 'top',
					y: 'right'
				},
				{
					cursor: 'se-resize',
					x: 'right',
					y: 'bottom'
				},
				{
					cursor: 'sw-resize',
					x: 'left',
					y: 'bottom'
				}
			];
			for (let i = 0, l = dragIcons.length; i < l; i++) {
				let icon = document.createElement('i');
				icon.id = Math.random().toString(36).substring(7);
				icon.style.display = 'inline-block';
				icon.style.width = this.dragIconSize;
				icon.style.height = this.dragIconSize;
				icon.style.position = 'absolute';
				icon.style.zIndex = 10;
				icon.style.cursor = dragIcons[i].cursor;
				icon.style.backgroundColor = this.dragIconColor;
				icon.style[dragIcons[i].x] = -parseInt(icon.style.width) / 2 + 'px';
				icon.style[dragIcons[i].y] = -parseInt(icon.style.height) / 2 + 'px';
				//绑定四个角的拖拽事件
				this.bindDragEvent(icon, `${dragIcons[i].x}-${dragIcons[i].y}`);
				//插入到矩形
				this.rect.appendChild(icon);
			}
		};

		/**
		 * 移动主矩形
		 */
		CreateDragRect.prototype.moveRect = function (x, y) {
			if (this.isTopMove && this.isLeftMove) {
				this.rect.style.left = x + 'px';
				this.rect.style.top = y + 'px';
			}
		};

		/**
		 * 移动主矩形缩放 - 左上
		 */
		CreateDragRect.prototype.nwRectSize = function (x, y) {
			//计算是否是最小宽度
			const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, this.rectHeight - y);
			if (isTopMove) {
				this.rect.style.top = this.rectOffsetTop + y + 'px';
				this.rect.style.height = height + 'px';
			}
			if (isLeftMove) {
				this.rect.style.left = this.rectOffsetLeft + x + 'px';
				this.rect.style.width = width + 'px';
			}
		};

		/**
		 * 移动主矩形缩放 - 左下
		 */
		CreateDragRect.prototype.swRectSize = function (x, y) {
			//计算是否是最小宽度
			const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, y);
			if (isLeftMove) {
				this.rect.style.left = this.rectOffsetLeft + x + 'px';
				this.rect.style.width = width + 'px';
			}
			if (isTopMove) {
				this.rect.style.height = height + 'px';
			}
		};

		/**
		 * 移动主矩形缩放 - 右上
		 */
		CreateDragRect.prototype.neRectSize = function (x, y) {
			//计算是否是最小宽度
			const { width, height, isTopMove, isLeftMove } = this.getMinSize(x, this.rectHeight - y);
			if (isTopMove) {
				this.rect.style.height = height + 'px';
				this.rect.style.top = this.rectOffsetTop + y + 'px';
			}
			if (isLeftMove) {
				this.rect.style.width = width + 'px';
			}
		};

		/**
		 * 移动主矩形缩放 - 右下
		 */
		CreateDragRect.prototype.seRectSize = function (x, y) {
			//计算是否是最小宽度
			const { width, height } = this.getMinSize(x, y);
			this.rect.style.width = width + 'px';
			this.rect.style.height = height + 'px';
		};

		/**
		* 节流函数
		* @param {*} fn 
		* @param {*} delay 
		*/
		CreateDragRect.prototype.throttle = function (fn, delay) {
			let last = 0;
			return function () {
				let curr = Date.now();
				if (curr - last > delay) {
					fn.apply(this, arguments);
					last = curr;
				}
			}
		}

		/**
		 * 获取宽高
		 * @param {*} w 
		 * @param {*} h 
		 * @return { Object }
		 */
		CreateDragRect.prototype.getMinSize = function (w, h) {
			let rectMinWidth = this.rectMinWidth;
			let rectMinHeight = this.rectMinHeight;
			//x拖拽
			this.isLeftMove = w >= this.rectMinWidth;
			//y拖拽
			this.isTopMove = h >= this.rectMinHeight;
			if (this.isLeftMove) rectMinWidth = w;
			if (this.isTopMove) rectMinHeight = h;
			return { width: rectMinWidth, height: rectMinHeight, isLeftMove: this.isLeftMove, isTopMove: this.isTopMove };
		}
		const dr = new CreateDragRect(document.getElementById('app-warpper'), {
			x: 500,
			y: 300,
			width: 300,
			height: 300,
		});
</script>

</html>

四、写在后面

上面就是原生js创建一个可拖拽缩放矩形功能的全部内容了，加油，快动手试试吧。

若学习,只需要看懂代码核心部分即可,可以忽略无关紧要的部分,有问题请留言或者@博主,谢谢支持o(￣︶￣)o~

感谢您的阅读,如果此文章或项目对您有帮助，请给个一键三连吧,GitHub有开源项目,需要的小伙伴可以顺手star一下！

GitHub: https://github.com/langyuxiansheng

更多信息请关注公众号: “笔优站长”

笔优站长

扫码关注“笔优站长”，支持站长
狼丶宇先森
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
纯 JS 实现放大缩小拖拽功能(完整代码)
yandaxia6666的博客
11-25 1507
前言 最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交流一下。 注：下文出现的“采宝”二字，为这个功能的产品名。 先看效果 看这个效果，相信大部分开发都会觉得实现起来比较容易。在实际开发中，笔者总结了三个主要的坑点，及其解决...
原生js基于canvas实现一个简单的前端截图工具代码实例
12-07
在本文中，我们将探讨如何使用原生JavaScript和HTML5的Canvas API来实现一个简单的前端截图工具。这个工具允许用户在...这是一个基本的实现，实际应用中可能需要考虑更多细节，如处理多图、拖动缩放、预览等功能。
原生js拖拽效果（图形的伸缩）
小柒的前端之旅
03-25 1664
点击矩形的四个角和四个边实现不同的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
js可拖动改变div大小,可拖动改变div位置
rongyi2233的博客
04-22 833
核心代码 拖动改变方块位置 $(".resizeBox").on({ 'mousedown':function(e){ var pageX=e.pageX; var pageY=e.pageY; $(".resizeBox").on('mousemove',function(e){ var newPageX=e.pageX; var newPageY=e.pageY; var moveX=newPageX-pageX; var moveY=newPageY-pageY.
JS-拖拽元素放大缩小
最新发布
weixin_44384273的博客
05-07 324
拖拽元素 放大缩小
【JS】原生实现矩形框的绘制/拖动/缩放/截图及导出功能
qq_39404437的博客
11-21 3437
原生js实现矩形框的绘制/拖动/缩放/截图及导出功能 1.1、矩形框的绘制 1.2、矩形框的缩放 1.3、矩形框的拖动 1.4、矩形框的键盘移动方向 1.5、矩形框的截图及导出图片
原生js实现的一个可拖动和可缩放的矩形
qq_29912733的博客
08-07 958
# drag-and-zoom-rectangle 原生js实现的一个可拖动和可缩放的矩形: 1. 演示 https://zhangluzhanglu.github.io/code/index.html 2. github地址：https://github.com/zhangluzhanglu/drag-and-zoom-rectangle（欢迎start） ## 思路 1. **拖动原理**：先把box进行定位，然后通过移动鼠标时同步修改定位即可 2. **缩放原理**：鼠标点在四个角上时，..
简单HTML5 SVG移动和调整大小工具
04-11
上面的代码实现了当用户按下鼠标并拖动时，矩形会跟随鼠标移动。同样，我们可以通过添加额外的事件监听器和计算逻辑来实现元素的缩放。例如，当用户按住右键或同时按下Ctrl键时，可以改变元素的宽度和高度： ```...
graphic-editor:图形编辑器，将Vanilla Javascript与HTML Canvas结合使用
05-25
《图形编辑器：Vanilla Javascript与HTML Canvas的完美融合》 在现代网页开发中，图形编辑器已经成为一种不可或缺的工具，它们为用户提供了在浏览器环境中创建、编辑和展示图形的能力。本文将深入探讨一个名为...
小程序头像裁剪（原生）
11-13
3. **手势操作**：用户可以通过拖动、缩放裁剪框来调整选区，实现自由裁剪。 4. **预览和确认**：在裁剪后，用户可以预览裁剪结果，满意后确认并保存。 5. **数据处理**：组件会将裁剪后的图像数据处理成适合上传...
自定义相机实现矩形方框内的拍摄
12-14
2. 触摸事件：监听矩形框的触摸事件，如拖动和缩放，更新矩形框的坐标和大小。 3. 预览裁剪：使用`ImageCapture.Builder`的`setTargetAspectRatio()`和`setTargetResolution()`方法，设置拍摄时的目标比例和分辨率，...
Raphael 制作可拖动和能放大缩小的矩形
txp1993的专栏
08-22 3670
其原理是在大矩形的右下角画一个小矩形 ，当拖动小矩形时改变大矩形的宽度和高度 ，同时对小矩形予以重新定位。
js设置div x坐标_纯 JS 实现放大缩小拖拽踩坑之旅
weixin_36358383的博客
01-31 1060
点击上方“前端公虾米”，选择“置顶或者星标”你的关注意义重大！前言最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交流一下。“注：下文出现的“采宝”二字，为这个功能的产品名。先看效果看这个效果，相信大部分开发都会觉得实现起来比较容...
js封装在固定区域创建DIV并拖动
qq_32021429的博客
04-01 536
需求：在给定的区域(DOM)内实现鼠标按下拖动选中区域，并且选中的区域可以拖动 实现效果 鼠标按住选中区可滑动 JS版本 class createCanvas { constructor(options) { options = Object.assign( { container: document.body, // 父容器DOM， 默认是body lineColor: "black", // canvas中画的线的颜色 re.
原生JavaScript实现矩形块大小任意缩放
bqiuer的博客
08-23 739
最近写了一个原生JavaScript实现矩形块大小任意缩放的案例,感觉里面的东西比较的绕,这里分享源码给大家,一起学习一下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生Ja
js实现鼠标滚轮放大缩小页面指定区域(css3 scale)
m0_66722601的博客
01-16 1803
js实现鼠标滚轮放大缩小页面指定区域(css3 scale)
【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
Honiler的博客
11-09 5445
如果你对于canvas接触的比较少，在需要处理canvas绘制图表或图片的拖动、缩放等问题时可作参考。支持手势或鼠标滚轮定点缩放，可从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变。
js之pc端网页特效
学习记录
03-31 287
目录： 元素偏移量offset系列 元素可视区client系列 元素滚动scroll系列 动画函数封装 常见网页特效案例 一、元素偏移量offset系列 1.1 offset概述 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 offset系列常用属性： offset系列属性 作用 element.offsetParent 返回作为
原生 js 实现鼠标拖拽绘制矩形区域
丁晓东go
08-21 2109
业务开发中遇到一个场景，视频监控播放的时候，需要在视频区域画一个矩形，然后将这个矩形包括的范围放大的功能。所以首先就需要一个可以在 video 标签上绘制矩形的方法。 思路： 鼠标按下，记录鼠标按下的位置，及绘制矩形的起点。 鼠标移动的时候，以起点为原点建立直角坐标系，然后分别讨论移动之后的鼠标点在四个坐标象限的情况。 鼠标弹起，清空鼠标移动个鼠标弹起事件，调用矩形绘制方法的回调函数。 在鼠标移动的过程中还要考虑到鼠标越界的情况。 代码如下： <!DOCTYPE html> <html

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狼丶宇先森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值