文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS实现获取鼠标在画布中的位置

JS实现获取鼠标在画布中的位置 效果展示 概述 本文讲解如何实现我们平时用的画布软件中，怎么获取的我们鼠标时刻在画布中的位置。...// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) /.../ 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置 就是这么实现的 var box = document.querySelector...// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) /.../ 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置 就是这么实现的 var box = document.querySelector

6300

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

一、鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中的 x..., 并设置图片位置 ; 这样图片缩放时 , 始终可以保证鼠标指向的部位保持位置不变 ; 1、保存当前鼠标指针指向的位置 首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...记录的是鼠标指针指向的界面中 Camvas 画布中的坐标位置 ; pointer_ratio_x 和 pointer_ratio_y 记录的是 鼠标指针指向位置对应图片中坐标位置的比例 ; public..., 保存当前的鼠标位置及比例 ; 在鼠标滚轮事件 MouseWheelEvent 中 , 可以直接通过调用 e.getX(), e.getY() 获取到当前 鼠标指针 在 Canvas 画布的坐标 ;

2.8K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    使用 Pandas 在 Python 中绘制数据

    在有关基于 Python 的绘图库的系列文章中，我们将对使用 Pandas 这个非常流行的 Python 数据操作库进行绘图进行概念性的研究。...这非常方便，你已将数据存储在 Pandas DataFrame 中，那么为什么不使用相同的库进行绘制呢？ 在本系列中，我们将在每个库中制作相同的多条形柱状图，以便我们可以比较它们的工作方式。...我们使用的数据是 1966 年至 2020 年的英国大选结果： image.png 自行绘制的数据 在继续之前，请注意你可能需要调整 Python 环境来运行此代码，包括： 运行最新版本的 Python...在本系列文章中，我们已经看到了一些令人印象深刻的简单 API，但是 Pandas 一定能夺冠。...) 只有四行，这绝对是我们在本系列中创建的最棒的多条形柱状图。

    6.9K20

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

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

    1.8K20

    【Java AWT 图形界面编程】在 Canvas 画布中绘制箭头图形 ( 数据准备 | 几个关键的计算公式 | 绘制箭头直线和尾翼 )

    文章目录 一、在 Canvas 画布中绘制箭头图形 - 要点分析 1、数据准备 2、绘制直线 3、绘制箭头尾翼 二、代码示例 一、在 Canvas 画布中绘制箭头图形 - 要点分析 ---- 1、数据准备...绘制箭头时 , 先设置一条直线的起始点和终止点 , 箭头绘制在该线段上 ; /** * 起始点 X, Y 坐标 * 终止点 X, Y 坐标 */ private...先把箭头附着的直线 , 绘制出来 ; // 绘制直线 g.drawLine(startX, startY, endX, endY); 3、绘制箭头尾翼 首先 , 确定起始点和终止点...最终计算的角度是 该直线 与 x 轴夹角 ; // 计算 直线的角度 double angle = Math.atan2(deltaY, deltaX); 再后 , 使用勾股定理计算直线的长度..., 箭头的位置 ; 尾翼的起始点 arrowEndX, arrowEndY , 终止点需要根据角度计算出来 ; // 绘制箭头 尾翼 线段 , 直线的角度 增减 45 度 , 即可获得尾翼的角度

    1.6K20

    问与答60： 怎样使用矩阵数据在工作表中绘制线条？

    学习Excel技术，关注微信公众号： excelperfect 本文来源于wellsr.com的Q&A栏目，个人觉得很有意思，对于想要在工作表中使用形状来绘制图形的需求比较具有借鉴意义，特辑录于此，代码稍有修改...Q：如下图1所示，左侧是一个4行4列的数值矩阵，要使用VBA根据这些数值绘制右侧的图形。 ?...在连接的过程中，遇到0不连接，如果两个要连接的数值之间有其他数，则从这些数值上直接跨过。如图1所示，连接的顺序是1-2-3-4-5-6-7-8-9-10-11-12-13。...A：VBA代码如下： '在Excel中使用VBA连接单元格中的整数 '输入: 根据实际修改rangeIN和rangeOUT变量 ' rangeIN - 包括数字矩阵的单元格区域 '...DeleteArrows ReDim arrRange(0) '在一维数组中存储单元格区域中所有大于0的整数 For Each cell In rangeIN

    2.5K30

    结构建模设计——Solidworks软件之草图绘制基础图形工具总结（绘制直线、矩形、圆、槽、圆弧、圆角等）

    ，设计树区域弹出草图属性，可以添加几何关系 ——选中垂直则直线垂直放置（此时可以看到垂直标志，直线颜色也会由蓝色转为黑色） ——此时不能再点击水平了（二者属性本身就是对立的，若选上了，可以在设计树中删除...——在草图绘制区域，左键点击确定第一个端点，此时移动鼠标，点击确定第二个端点，矩形就画出来了 ——添加尺寸，在草图选项卡中选择智能尺寸按钮，或者按住鼠标右键，向上滑动即可选择该智能尺寸标注功能 ——添加矩形的长和高...——鼠标左键点击第一点确定圆心位置，第二点确定边线，此时一个圆就绘制出来了，ESC退出绘制 ——再选择一个周边圆进行绘制，该圆是三点确定一个圆 ——使用尺寸工具设置圆的大小和位置约束，通过点击边线设置圆的直径...，通过点击圆心位置完成约束 1.4 绘制槽 ——草图绘制工具，选择直槽口（鼠标放在该工具上方时，会有简单的使用方法提示） ——草图上，鼠标左键点击第一个点确定第一个圆心，然后鼠标可以水平或垂直移动，此时槽口方向会自定义为水平或垂直...1.6 绘制圆角及倒角 ——草图绘制工具，选择圆角，点击刚刚绘制的矩形一个端点，鼠标移至端点时可以看到黄色预览 ——点击端点，在左侧属性中可以设置圆角参数，点击确定生效 ——同样，可以选择绘制倒角，参数通用可以设置

    2.5K20

    【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置 JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 )

    一、Canvas 中绘制超大图片要点 ---- 1、设置 JFrame 窗口自动关闭 创建 JFrame 窗口后 , 通过调用 JFrame#setDefaultCloseOperation 可以设置窗口自动关闭...在 AWT 中 , 使用 Toolkit.getDefaultToolkit().getImage 函数 , 获取 Image 图片对象 ; // 获取图片 Image...鼠标按下时 , 记录按下的位置 , 保存到 startX 和 startY 变量中 , 这两个变量每次鼠标按下都会更新 ; // 为组件设置鼠标监听事件 addMouseListener..., 记录 移动后的位置 与 当前 ( startX , startY ) 位置 的差值 , 将 该差值累加到 ( startX , startY ) 坐标中 ; 计算一个 Canvas 的画布偏移量...startX += dx; startY += dy; } }); 4、画布偏移 初始时 , 画布偏移为 0 , 但是 在鼠标不断拖动的过程中

    1.4K20

    手写原生代码专题 | 简易手写画板（二）

    1.1 创建画布 在 Html 文档中创建一个的画布，然后使用document.getElementById('canvas') 方法获取画布...1.2 画直线 画一条直线，首先调用 beginPath() 绘制路径的起始点，使用 moveTo() 移动画笔，然后再使用 lineTo() 连接子路径的终点到x，y坐标，最后调用 ctx.stroke...x,y 变量 然后我们定义画圆形、画直线的相关方法：drawCircle(x,y)、drawLine(x1,y1,x2,y2) 接着在画布上定义监听 mousedown 的方法，初始化鼠标位置的X,Y的值...x,y值，先以线条的宽度绘制圆形，然后以鼠标按下时的 x,y 的值为直线的起点，鼠标移动时获取鼠标的 x,y 值为终点绘制直线。...绘制完成后更改x,y的值为当前鼠标的位置（不断更新直线的起点），这样就可以一直拖动鼠标绘制直线。

    1.5K20

    用wxPython打造Python图形界面（上）

    现在可以使用pip安装wxPython 4，这在wxPython的旧版本中是不可能的。...当用户在应用程序处于焦点时键入内容，或者当用户使用鼠标按下按钮或其他小部件时，就会发生事件。 在幕后，GUI工具包正在运行一个无限循环，称为事件循环。...请使用python框架构建运行，并且只在登录到Mac主屏幕时运行。如果你看到这条消息，而不是在virtualenv中运行，那么你需要使用pythonw而不是python运行应用程序。...在本例中，你希望文本控件和按钮位于面板顶部，因此它是你指定的父控件。 你还需要告诉wxPython将小部件放置在何处，这可以通过pos参数传入一个位置来实现。...在wxPython中，原点位置是(0,0)，即父节点的左上角。因此，对于文本控件，你告诉wxPython要将其左上角距左侧(x) 5个像素和距顶部(y) 5个像素定位。

    4.9K40

    前端测试题:(解析)如果要获取鼠标在当前文档中的位置，可以使用下面哪些属性?

    考核内容: 鼠标事件 题发散度: ★ 试题难度: ★ 解题: JS在触发事件时，会自动生成event对象传入到事件函数中。...可以通过传参或直接使用关键字. element.onmouseover=function(e){ console.log(event===e) } 常用api或属性 target: 表示事件目标本身...event.target; currentTarget：当前冒泡标签; event.currentTarget clientX&clientY: 触发事件时，鼠标相对于浏览器的X,Y的坐标位置(不包含滚动条...) event.clientX; event.clientY; pageX&pageY:触发事件时，鼠标相对于网页的X,Y的坐标位置(包含滚动条) event.pageX; event.pageY...offsetX返回鼠标指针相对于目标元素边缘位置的水平坐标, offsetY返回鼠标指针相对于目标元素边缘位置的垂直坐标。

    1.1K30

    大学课程 | 计算机图形学，基于MFC和二维变换的画图软件

    其中，在鼠标左键按下并移动时，使用橡皮筋技术，即移动过程中选用画笔颜色取反模式（SetROP2(R2_NOT)），即可消除移动过程中不断绘制的图形，在鼠标左键抬起时，设置画笔为颜色覆盖模式（SETROP2...2.2.2 直线 从直线起的以下图形的绘制均为根据外接矩形绘制内部图形。绘制图形时，当点击鼠标左键时获取矩形起点，按住不放拖动鼠标直至放开左键，放开鼠标左键的位置记录为矩形的终点。...直线的绘制则根据矩形起始点使用MoveTo()和LineTo()函数绘制。 2.2.3 等腰和直角三角形 在使用鼠标拉取的矩形中选取点位置并用画线函数连接点实现。三角形包括3个顶点。...2.2.5 圆形和填充圆 在使用鼠标拉取的矩形中获取了起始点后。将两点间的距离作为要画圆的半径r。...2.2.6 自由画笔 在鼠标左键按下，并且移动的过程中，通过不断触发OnMouseMove消息映射，在移动中的点的位置和上一个位置间连线，即可实现自由画笔功能。

    2.5K40

    CAD常用基本操作

    （对象捕捉开关：F3） B 在极轴选择上可以更改极轴角度和极轴模式（绝对还是相对上一段线） 4 工具栏位置的变化：A锁定：右下角小锁；工具栏右键 B 锁定情况下的移动：Ctrl +鼠标移动 5 清楚屏幕...：窗围 B 从右下向左上：窗交 9 鼠标中键的使用：A双击，范围缩放，在绘图区域最大化显示图形 B 按住中键不放可以移动图形 10 鼠标右键的使用：A常用命令的调用 B 绘图中Ctrl + 右键调出捕捉快捷菜单和其它快速命令...） A两条直线卡一条直线，绘制一个边直线后，通过平移获取另一边直线 B 在圆中绘制相应长度的弦，现在圆心处绘制相同长度的直线，再通过平移获得 22 自定义工具栏命令 CUI或输入Toolbar 其中命令特性宏中的...CAD窗口 基本操作和常用命令 1 直线命令：line（L） A绝对坐标法：直接输入点的坐标 B相对坐标法：@ X,Y（其中@表示相对于上一点位置不变，在绘制同心圆时也可输入@控制圆心不变） C 角度直线...（DIV） 小提示：a 修改等分点格式：ddptype命令或点击格式→点样式 b 等分角可随意绘制以角顶点为圆心的任意弧，再将此弧定数等分 18 定距等分：mesure（ME） 定距等分剩余部分的位置取决于鼠标选取的方向

    5.5K50

    【从零学习OpenCV 4】鼠标响应

    最后一个参数是传递给回调函数的可选参数，一般情况下使用默认值0即可。 接下来将介绍MouseCallback类型的回调函数，该类型函数的原型在代码清单3-57中给出。...函数第一个参数是鼠标响应事件标志，参数为EVENT_*形式，具体可选参数及含义在表3-9给出。第二个和第三个参数分别是鼠标当前位置在图像坐标系中的x坐标和y坐标。...为了了解鼠标响应的使用方法，在代码清单3-58中给出了绘制鼠标移动轨迹的示例程序。...程序中如果鼠标右键被按下，则会提示“点击鼠标左键才可以绘制轨迹”，点击左键会输出当前鼠标的坐标，并将该点坐标定义为某段轨迹的起始位置。之后按住左键移动鼠标，会进入到第三个逻辑判断，绘制鼠标的移动轨迹。...第二种绘制轨迹的方式是在前一时刻和当前时刻鼠标位置间绘制直线，这种方式可以避免因鼠标移动过快而带来的轨迹出现断点的问题。程序运行结果在图3-35给出。

    1.2K40

    实现Web端自定义截屏

    前言 当客户在使用我们的产品过程中，遇到问题需要向我们反馈时，如果用纯文字的形式描述，我们很难懂客户的意思，要是能配上问题截图，这样我们就能很清楚的知道客户的问题了。...琢磨了一阵后，想明白了，这块还是需要使用div进行布局的，在裁剪框绘制完毕后，根据裁剪框的位置信息计算出截图工具栏的位置，改变其位置即可。...工具栏中每个图形的绘制都需要鼠标按下、移动、抬起这三个事件的配合下完成，为了防止鼠标在移动时图形重复绘制，这里我们采用"历史记录"模式来解决这个问题，我们先来看下重复绘制时的场景，如下所示： 接下来，...实现画笔绘制 画笔的绘制我们需要通过lineTo来实现，不过在绘制时需要注意：在鼠标按下时需要通过beginPath来清空一条路径，并移动画笔笔触到鼠标按下时的位置，否则鼠标的起始位置始终是0，bug如下所示...(mouseX, mouseY); } 随后，在鼠标位置时根据坐标信息绘制线条即可，代码如下： /** * 画笔绘制 * @param context * @param mouseX * @

    2.5K30

    【ps练习】0226钢笔工具

    一、钢笔工具（快捷键p） 1.钢笔工具： ①绘制直线的方法：在起始点位置点击定点，连续点击，按住shift键，可以绘制成角度的直线 ②绘制曲线的方法：在起始点位置点击定点，在下一点处点击并拖拽鼠标，...拉出弧线，会出现控制手柄，再一次绘制时，需要按住alt键取消一侧手柄 ③自动添加删除：可以直接在路径上点击添加锚点或者点击锚点删除锚点 ④临时切换：按住ctrl键可以临时切换到小白工具进行锚点移动（...2.自由钢笔工具：点击拖拽鼠标可以画出流畅的线条路径。...右击路径，选择画笔勾选模拟压力（需先设置好画笔大小、硬度等） 3.转换点工具：点击曲线位置的点，可以将其变成直线。...点击直线位置的点，选中并拖拽，可以出现控制手柄，调节弧度 二、路径面板 1.路径面板可以实现选区与路径的互相转换 2.储存为jpg,psd时，路径面板可以储存路径，类似图层，便于抠图便于工作

    1.1K30

    CAD2007操作教程上

    对象捕捉F3：在绘制图形时可随时捕捉己绘图形上的关键点。 右击，单击设置，在对象捕捉选项卡中勾选捕捉点的类型。 对象追踪F11：配合对象捕捉使用，在鼠标指针下方显示捕捉点的提示（长度，角度）。...3.直接在命令中输入快捷键L（在命令行内输入命令快捷键，回车或空格或鼠标右键确定） 直线的输入的方法1.从命令行内输入直线命令的快捷建L确定,2.用鼠标左键在屏幕中点击直线一端点,拖动鼠标,确定直线方向...此命令为辅助作图使用。 绘制方式：1.在绘图菜单下单击射线命令 2.直接在命令中输入快捷键Ray 课后练习：掌握绘制直线的几种方法和构造线及射线的功能，并利用所学内容完成简单施工图。...在“类型和图案”选项组中，可以设置图案填充的类型和图案， 拾取点：是指以鼠标左键点击，位置为准向四周扩散，遇到线形就停，所有显示虚线的图形是填充的区域，一般填充的是封闭的图形。...使用AR（阵列）命令，环形阵列中间的直线，中心点为直线最上方端点，填充角度为35°，数量为16 4、修剪线段，并使用MI（镜像）命令，镜像线段，就画出了花瓣了，结果如下图 　　在AUTOCAD中

    3.7K30

    实现Web端自定义截屏

    前言 当客户在使用我们的产品过程中，遇到问题需要向我们反馈时，如果用纯文字的形式描述，我们很难懂客户的意思，要是能配上问题截图，这样我们就能很清楚的知道客户的问题了。...获取当前可视区域内容 当点击截图按钮后，我们需要获取整个可视区域的内容，后续所有的操作都是在获取的内容上进行的，在web端我们可以使用canvas来实现这些操作。...琢磨了一阵后，想明白了，这块还是需要使用div进行布局的，在裁剪框绘制完毕后，根据裁剪框的位置信息计算出截图工具栏的位置，改变其位置即可。...工具栏中每个图形的绘制都需要鼠标按下、移动、抬起这三个事件的配合下完成，为了防止鼠标在移动时图形重复绘制，这里我们采用"历史记录"模式来解决这个问题，我们先来看下重复绘制时的场景，如下所示： 绘制 画笔的绘制我们需要通过lineTo来实现，不过在绘制时需要注意：在鼠标按下时需要通过beginPath来清空一条路径，并移动画笔笔触到鼠标按下时的位置，否则鼠标的起始位置始终是0，bug如下所示

    2.5K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券