首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS 实现放大缩小拖拽采坑之旅

    本文首发于政采云前端团队博客:纯 JS 实现放大缩小拖拽采坑之旅 https://www.zoo.team/article/scaling ?...前言 最近团队需要做一个智能客服悬浮窗功能,需要支持拖动、放大缩小等功能,因为这个是全局插件,为了兼容性考虑全部使用原生 JS 实现,不引用任何第三方库或者插件。...三个坑点 拖拽采宝时会导致采宝放大缩小 采宝显示在屏幕边界时被遮挡显示不全 采宝放大缩小后,位置发生变化 (一)拖拽时会导致采宝放大缩小 我们在操作采宝时,不管是鼠标拖动还是点击放大缩小,我们的事件都需要绑定在采宝头部的图标上...这样就会出现在拖动采宝的时候,采宝会放大缩小。 ?...'放大缩小' (三)采宝放大缩小后,位置发生变化 通过上图,我们可以看到,当小采宝处在显示屏边界时,点击放大后再点击缩小,我们发现采宝的位置发生了变化。

    5.8K10

    【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener )

    文章目录 一、使用鼠标滚轮放大缩小 Canvas 画布 - 要点分析 1、鼠标滚轮事件 2、核心代码示例 二、绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放示例 1、代码示例 2、效果展示 一、使用鼠标滚轮放大缩小..., 放大画布 , 画布增加 10% ; 向下滑动时 , 缩小画布 , 画布缩小 10% ; 一旦 scale 缩放比例发生改变 , 立刻 调用 repaint() 函数 重新绘制 Canvas 画布 ,...int notches = e.getWheelRotation(); if (notches < 0) { // 滚轮向上,放大画布...frame.pack(); // 窗口设置可见 frame.setVisible(true); } } 2、效果展示 程序运行后默认效果 : 使用鼠标滚轮缩小画布...: 拖动缩小后的画布到中央位置 :

    2.3K30

    MFC拉框放大缩小功能如何在鼠标移动时绘制透明矩形框

    在OnMouseMove鼠标移动事件中写入代码: void ClmzWorkView::OnMouseMove(UINT nFlags, CPoint point) { if (LButtonDown...定义全局变量:两个CPoint类型的点startPt,endPt,用于保存鼠标按下的点和鼠标松开的点;bool类型变量LButtonDown 用于保存鼠标的状态,值为true时表示鼠标按下,相反表示鼠标松开...,只有当鼠标按下还未松开时才进行矩形框的绘制,否则会一 直调用OnMouseMove事件进行绘制。      ...在OnLButtonDown事件捕获鼠标按下点并设置LButtonDown的值: void ClmzWorkView::OnLButtonDown(UINT nFlags, CPoint point)...在OnLButtonUp事件捕获鼠标松开点并设置LButtonDown的值: void ClmzWorkView::OnLButtonUp(UINT nFlags, CPoint point) {

    2.3K20

    图形编辑器基于Paper.js教程09:鼠标拖动画布,鼠标点为缩放中心进行视图的缩放

    如何使用Paper.js实现画布的缩放与拖动功能 在Web开发中,利用Paper.js库进行图形的绘制和交互操作是一种常见的实践。...Paper.js是一个强大的矢量图形库,可以让开发者通过简洁的API完成复杂的图形操作。在本文中,我们将详细探讨如何使用Paper.js来实现对画布的缩放和拖动功能,提供用户友好的交互体验。...paper.view.viewToProject(mousePosition); paper.view.scale(delta, viewPosition); }); 这段代码中,delta变量决定了缩放的快慢和方向(向上滚动放大...,向下滚动缩小)。...在onMouseDrag事件中,我们计算从上一次事件到当前事件鼠标移动的差值,并相应地调整视图中心,实现拖动效果。最后,在onMouseUp事件中结束拖动。

    13310

    【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 当前鼠标指针位置为缩放中心 示例 )

    一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 该位置为中心 , 滑动鼠标滚轮时进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x...垂直方向的比例 仍然保持不变 , 那就需要移动图片的位置 ; 如果放大图片就需要将图片往左上方移动 ; 如果缩小图片就需要将图片往右下方移动 ; 此时可以分析出 , 如果要实现 鼠标滚轮缩放的中心点设置为当前鼠标中心点...在鼠标滚轮缩放完成后 , 再根据鼠标指针指向的位置和比例 , 结合图片缩放后的尺寸 , 重新计算画布偏移的位置 , 达到鼠标指向的图片元素位置基本保持不变的目的 ; /** * 计算新的比例...+ 鼠标滚轮缩放 + 当前鼠标指针位置为缩放中心 示例 ---- 1、代码示例 import javax.swing.*; import java.awt.*; import java.awt.event.MouseAdapter

    2.8K10

    Figma 的画布缩放功能说明

    zoom 为 2 表示画布放大一倍。zoom 为 0.5 表示画布缩小一倍。 放大画布对应 zoomIn 方法,zoom 值是变大的。...快捷键或按钮缩放画布 通常我们会在 UI 界面上提供画布缩放和放大按钮,点击它们会 画布中心为缩放中心,进行缩放。...鼠标滚轮缩放 Figma 也支持通过滚轮的方式缩放,且会 基于缩放比率 zoomRatio,并以光标位置为缩放中心进行缩放。 按住 Ctrl 或 Command,滚轮向前为放大,向后为缩小。...// 缩放比率 const zoomRatio = 1.23 // 放大画布 zoom * zoomRatio // 缩小画布 zoom / zoomRatio zoomRatio 不是写死的,和 鼠标滚轮灵敏度...图纸第一次打开时,也会进行适应画布的操作,但 zoom 最大为 1,你可以理解为只能缩小(相比初始的 100%),但不能放大

    1.7K10

    【Java AWT 图形界面编程】使用小键盘按键缩放 Canvas 画布中绘制的背景图像 ( 键盘按键监听 + 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 当前鼠标指针位置为缩放中心 示例 )

    + 鼠标滚轮缩放 + 当前鼠标指针位置为缩放中心 示例 ---- 在 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置 JFrame 窗口自动关闭...| 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布 ( 鼠标滚轮事件监听器...MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动时 , 拖动的效果也随之缩放, 如 缩小画布后 , 移动鼠标 , 移动距离对应的缩放效果也随之缩小...; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小 Canvas 画布中绘制的背景图像 ( 鼠标滚轮事件监听器 MouseWheelListener | Canvas 中绘制图像并设置图像大小...) 博客中 , 使用缩放背景图像的方式 , 实现缩放效果 , 并同时福袋鼠标指针拖拽效果 ; 本博客中实现的案例 , 在上面的基础上 , 添加了鼠标滚轮缩放的中心点设置为当前鼠标中心点 ; 1、代码示例

    1.8K20

    实用技巧|AD19快捷键大全

    原理图编辑器与PCB通用的快捷键 快捷键 相关操作 Shift 当自动平移时,加速平移 Y 放置元件时,上下翻转 X 放置元件时,左右翻转 Shift+↑(↓、←、→) 在箭头方向10个栅格为增量移动光标...↑、↓、←、→ 在箭头方向1个栅格为增量移动光标 Esc 退出当前命令 End 刷新屏幕 Home 光标为中心刷新屏幕 PageDown或Ctrl+鼠标滑轮 光标为中心缩小画面 PageUp或Ctrl...+鼠标滑轮 光标为中心放大画面 鼠标滑轮 上下移动画面 Shift+鼠标滑轮 左右移动画面 Ctrl+Z 撤销上一次操作 Ctrl+Y 重复上一次操作 Ctrl+A 选择全部 Ctrl+S 存储当前文件...单位切换 I 打开Component placement菜单 U 打开Un-Route菜单 L 打开Board layer&Colors菜单 F2 打开Insight菜单 Ctrl+PgUp 将工作区放大...400% Ctrl+PgDn 将工作区缩小400% Shift+PgUp 很小的增量放大整张图纸 Shift+PgDn 很小的增量缩小整张图纸

    1.7K20

    GoogleMaps_键盘网站

    在 Google 地球中使用键盘/鼠标导航 首先要明白导航过程中的三个中心,视野中心,相机视角,鼠标锁定位置。...平移 在3D视图和俯视图,点击左键 鼠标锁定位置为中心自由观察 在3D视图和俯视图、地平面视图,点击左键,拖拽 Shift+左键 相机视角为中心自由观察 在3D视图和俯视图、地平面视图,点击左键...,拖拽 Ctrl+左键 拉近/推远 在地平面视图,点击左键上下移动 放大 双击左键 鼠标滚轮中键和键盘放大缩小的区别,鼠标滚轮会当前鼠标左键位置为中心,键盘会屏幕中心中心。...缩放(鼠标锁定位置) 中键滚动 鼠标锁定位置为中心自由观察 按住中键拖动 比左键配合Shift更方便。...放大(视野中心) + + 缩小(视野中心) – – 鼠标右键(无论按住Ctrl,Shift都是以鼠标锁定位置为中心) 旋转 点击右键并向左或向右拖动 缩放 点击右键并向上或向下拖动 缩放

    1.5K20

    HarmonyOS-UIAbitity-枚举说明——【坚果派-红目香薰】

    0xffc0cb Red 0xff0000 White 0xffffff Yellow 0xffff00 Grey 0x808080 ImageFit 名称 描述 Contain 保持宽高比进行缩小或者放大...Cover 保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 Auto 自适应显示 Fill 不保持宽高比进行放大缩小,使得图片充满显示边界。...ImageSize 类型 描述 Cover 默认值,保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。 Contain 保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内。...RightClick 通过鼠标右键触发菜单弹出。 HoverEffect8+ 名称 描述 Auto 使用组件的系统默认悬浮效果。 Scale 放大缩小效果。...Placement8+ 名称 描述 Left 气泡提示位于组件左侧,与组件左侧中心对齐。 Right 气泡提示位于组件右侧,与组件右侧中心对齐。 Top 气泡提示位于组件上侧,与组件上侧中心对齐。

    14810
    领券