首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我做了一个在线白板(二)

给大家介绍了一下矩形绘制、选中、拖动、旋转、伸缩,以及放大缩小、网格模式、导出图片等功能,本文继续为各位介绍一下箭头绘制、自由书写、文字绘制,以及如何按比例缩放文字图片等这些需要固定长宽比例图形...根据矩形中心点计算鼠标拖动对角点坐标,比如我们拖动矩形右下角,那么对角点就是左上角; 2.根据鼠标拖动实时位置结合对角点坐标,计算出新矩形中心点坐标; 3.获取鼠标实时坐标经新中心点反向旋转原始矩形旋转角度后坐标...图片 黑色为原始矩形,绿色鼠标按住右下角实时拖动矩形,这个是没有保持原宽高比拖动到这个位置如果要保持宽高比应该为红色所示矩形。...根据之前逻辑,我们是可以计算出绿色矩形未旋转前位置和宽高,那么新比例也可以计算出来,再根据原始矩形宽高比例,我们可以计算出红色矩形未旋转前位置和宽高: 图片 如图所示,我们先计算出实时拖动绿色矩形未旋转位置和宽高...: 图片 到这一步,你是不是会发现好像似曾相识,没错,忽略绿色矩形,想象我们鼠标拖动到了红色矩形右下角位置,那么只要再从头进行一下最开始提到4个步骤就可以计算出红色矩形未旋转前位置和宽高

1.4K30

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

图形大小,位置信息由全局变量pStart和pEnd控制,pStart和pEnd分别为用户在窗口内拖动鼠标起点坐标和终点坐标。...,以及鼠标左键抬起OnLButtonUp消息映射,以实现拖动鼠标绘图功能。...2.2.2 直线 从直线起以下图形绘制均为根据外接矩形绘制内部图形。绘制图形,当点击鼠标左键获取矩形起点,按住不放拖动鼠标直至放开左键,放开鼠标左键位置记录为矩形终点。...直线绘制则根据矩形起始点使用MoveTo()和LineTo()函数绘制。 2.2.3 等腰和直角三角形 在使用鼠标拉取矩形中选取点位置并用画线函数连接点实现。三角形包括3个顶点。...根据五角星在矩形绘制对应比例,5个顶点坐标为: P1(pStart.x+pEnd.x)/2),pStart.y); P2(pStart.x+RX*(sin(72*pi/180)cos(54*pi/

2.3K40
您找到你想要的搜索结果了吗?
是的
没有找到

Matplotlib 中文用户指南 7.1 交互式导航

单击工具栏按钮激活平移和缩放,然后将鼠标放在轴域某个地方。 按住鼠标左键并将其拖动到新位置来平移图形。 当你释放它,你按下点处数据将移动到你释放点。...按鼠标右键并将其拖动到新位置来进行缩放。 向右移动使x轴比例放大,或者向左移动比例缩小。 y轴和上/下移动同上。 开始缩放鼠标点会保持静止,你可以缩放图形中其它任意点。...使用极坐标绘图,平移和缩放功能行为不同。 可以使用鼠标左键拖动半径轴标签。 可以使用鼠标右键放大和缩小半径刻度。...Zoom-to-rectangle(缩放到矩形)按钮 单击此工具栏按钮以激活此模式。 将鼠标放在轴域某处,然后按鼠标左键。 在按住按钮同时拖动鼠标到新位置并释放。...+ w 将平移/缩放限制于x轴 使用鼠标平移/缩放按住x 将平移/缩放限制于y轴 使用鼠标平移/缩放按住y 保留宽高比 使用鼠标平移/缩放按住CONTROL 切换网格 鼠标在轴域上按下g 切换

2K20

3-Ps基础(工具栏)

复制图层(Alt+鼠标) 移动复制,按Alt键,鼠标变成双箭头 跨文件复制,按住鼠标左键不放,拖动到另外选项卡上,需要向下拽后,鼠标变“+”加号,松开即可。...(松开之前可以按Shift键,可以放在另一个文档相同位置) 2- 选区工具(M) 处理已有图像,经常要进行局部>操作,通过选择指定区域,可以对这个区域进行编辑,并保持没有选择区域不会被改动。...显示额外内容.png 取消选区(Ctrl+D) 3- 矩形选区工具组(M) 绘制矩形与圆矩形选区:按Shift键 从中心绘制矩形或正圆选区:Alt+Shift键 绘制指定大小选区:点击样式(正常、...固定比例、固定大小) 单行与单列选区工具 视图里面的显示额外内容矩形选区工具绘制矩形与正圆形选区,使用shift工具从中心绘制正方或正圆选区,使用Alt+shift工具绘制指定大小选区,在选择矩形或椭圆工具情况下...套索工具.png 功能 可以创建不规则选区 (直接拖动鼠标不放到开始位置即可) 2、多边形套索工具 可以按退格键或者删除键来删除所谓“点” 多个套索可以通过Shift工具持续画区

1.3K10

解锁前端难题:亲手实现一个图片标注工具

这意味着,如果你将缩放比例设置为 2,那么在这个缩放坐标系统中,绘制一个宽度为 50 像素矩形,实际上会在画布上产生一个宽度为 100 像素矩形。...在移动视口,我们需要更新图片位置,并重新绘制图像以反映新视口位置。...,效果如下所示: 添加标注 为了在图片上添加标注,我们需要实现鼠标按下、移动和抬起事件处理,以便在用户拖动鼠标动态地绘制一个矩形标注。...这需要跟踪当前被拖拽标注,并在鼠标移动更新其位置。...鼠标事件处理,点击、拖拽、滚轮缩放等。 几何计算,点是否在矩形内、旋转角度计算等。 希望这个实例能够为你提供一些启发和帮助,让你在实现自己图片标注工具时有一个参考和借鉴。

21710

# 如何使用 ArcGIS Engine10.2 + C# VS2012 开发环境,实现鹰眼功能。

表示如果按下鼠标左键,并且指针落在鹰眼地图矩形框中,就标记为可移动,并记录点击坐标,用于后续拖动操作。...如果按下鼠标右键,就在鹰眼地图上绘制一个新矩形框,并将其范围和中心点应用到主地图上,用于改变主地图视图范围。...如果鼠标移动到矩形框中,并且没有按下右键,就将鼠标指针换成小手,表示可以拖动矩形框。如果鼠标移动到矩形框中,并且按下了右键,就将鼠标指针换成默认样式,表示不能拖动矩形框。...如果鼠标移动到矩形框外,就将鼠标指针换成默认样式。如果之前已经标记为可移动,并且按下了左键,就计算鼠标移动距离,并根据偏移量改变矩形位置,同时也改变主地图视图范围。...处理了鹰眼地图上鼠标事件,OnMouseDown、OnMouseMove、OnMouseUp等,用于移动或改变矩形位置和大小,并相应地改变主地图视图范围。

1.9K10

Adobe Photoshop使用,选框工具进行选择教程

4.对于矩形选框工具或椭圆选框工具,请在选项栏中选取一种样式: 正常:通过拖动确定选框比例。 固定比例:设置高宽比。输入长宽比值(十进制值有效)。...例如,若要绘制一个宽是高两倍选框,请输入宽度 2 和高度 1。 固定大小:为选框高度和宽度指定固定值。输入整数像素值。...按住 Shift 键拖动可将选框限制为方形或圆形(要使选区形状受到约束,请先释放鼠标按钮再释放 Shift 键)。...若要从选框中心拖动它,请在开始拖动之后按住 Alt 简 (Windows) 或 Option 简 (Mac OS)。 对于单行或单列选框工具,在要选择区域旁边单击,然后将选框拖动到确切位置。...如果看不见选框,则增加图像视图放大倍数。 注意: 要重新放置矩形或椭圆选框,请首先拖动以创建选区边框,在此过程中要一直按住鼠标按钮。然后按住空格键并继续拖动

2.5K30

Canvas鼠标滚轮缩放以及画布拖动(图文并茂版)

Canvas鼠标滚轮缩放以及画布拖动 本文会带大家认识Canvas中常用坐标变换方法 translate 和 scale,并结合这两个方法,实现鼠标滚轮缩放以及画布拖动功能。...例如,如果比例因子为0.5,则单位大小为0.5像素;因此,形状绘制大小为正常大小一半。类似地,比例因子为2会增加单位大小,使一个单位变为两个像素;从而以正常大小两倍绘制形状。...事件坐标系 在构造函数中添加对 Canvas mousedown 事件监听,记录点击鼠标相对屏幕位置 x 和 y。...画布整体偏移量记录在 offset.x 和 offset.y,鼠标触发 mousedown 事件,记录当前鼠标点击位置相对于屏幕坐标 x, 和 y,并且开始监听鼠标的 mousemove 和 mouseup...缩放原理图 鼠标停留在 A 点对蓝色矩形进行放大,放大系数为 n,蓝色矩形起点左上角和坐标原点重合,宽度和高度分别是 x 和 y,因此,A点坐标为 (x, y)。

1.8K10

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

一、鼠标滚轮缩放中心点设置为当前鼠标中心点 - 要点分析 ---- 鼠标指针指向界面中 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮进行缩放...; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制图片尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放 , 鼠标指针指向一个位置 , 该位置对应着一个当前 Canvas 画布中 x..., y 坐标 , 同时可以计算出当前位置对应图片中 水平方向比例 和 垂直方向比例 ; 在缩放后图片中 , 只要保证鼠标指针指向相同 x, y 坐标 , 该位置对应 水平方向比例 和..., 并设置图片位置 ; 这样图片缩放 , 始终可以保证鼠标指向部位保持位置不变 ; 1、保存当前鼠标指针指向位置 首先 , 在类中定义如下成员字段 , pointer_x 和 pointer_y...在鼠标滚轮缩放完成后 , 再根据鼠标指针指向位置比例 , 结合图片缩放后尺寸 , 重新计算画布偏移位置 , 以达到鼠标指向图片元素位置基本保持不变目的 ; /** * 计算新比例

2.7K10

Qt官方示例-拖放机器人

(当鼠标拖动项目释放鼠标按钮)。 我们将其重置dragOver为false,分配机器人部件新颜色,然后调用update()。   ...因为我们希望旋转中心为项目的底部中心,所以我们选择了一个以(-15,-50)开始并延伸到30个单位宽和50个单位高边界矩形。旋转头部,"颈部"将保持静止,同时头部顶部从一侧向另一侧倾斜。...该实现分为两个部分:如果将图像放置在头部上,则绘制图像,否则将绘制带有简单矢量图形圆形矩形机器人头部。   ...此实现提供了最重要逻辑CircleItem启动和管理拖动代码。   该实现首先检查鼠标是否已被拖动足够远以消除鼠标抖动噪声。我们仅想在鼠标拖动距离大于应用程序开始拖动距离开始拖动。   ...像素图也被辅助为拖动对象像素图。这将确保您可以在鼠标光标下看到被拖动为像素图图像。

4.7K41

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

scale = e.getKeyCode() - 96; // 基于鼠标位置比例, 计算最新偏移...+ 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 ---- 在 【Java AWT 图形界面编程】Canvas 中绘制超大图片 ( 使用鼠标拖动查看全图 | 设置...JFrame 窗口自动关闭 | 获取并绘制图片 | 鼠标拖动计算位移 | 画布偏移 ) 博客中 , 绘制了超大图像 , 可以使用鼠标拖动 ; 在 【Java AWT 图形界面编程】使用鼠标滚轮放大缩小...Canvas 画布 ( 鼠标滚轮事件监听器 MouseWheelListener ) 博客中 , 新增鼠标滚轮缩放画布示例 , 但是使用鼠标拖动 , 拖动效果也随之缩放, 缩小画布后 , 移动鼠标...= e.getY(); // 保存当前鼠标位置比例 save(e.getX(), e.getY()); }

1.8K20

CAD常用基本操作

,移动或比例缩放(应注意夹点中比例缩放是多重缩放,同一图形可在选中夹点连续进行多次不同比例缩放) 16 三维绘图中旋转:按住Shift并按住鼠标中键拖动 17 . dxf文件:表示在储存之后可以在其它三维软件中打开文件...1 直线命令:line(L) A绝对坐标法:直接输入点坐标 B相对坐标法:@ X,Y(其中@表示相对于上一点位置不变,在绘制同心圆也可输入@控制圆心不变) C 角度直线(极轴法):第一点:X,Y;第二点...矩形命令:rectang(REC) A 指定另一个角点:@X,Y(直接输入下一个角点相对坐标) B 尺寸(D):依次输入矩形长宽,并需要移动鼠标指定矩形所在象限 C 面积(A):先指定矩形面积,再依次指定长宽...(DIV) 小提示:a 修改等分点格式:ddptype命令或点击格式→点样式 b 等分角可随意绘制以角顶点为圆心任意弧,再将此弧定数等分 18 定距等分:mesure(ME) 定距等分剩余部分位置取决于鼠标选取方向...“全部”选项也按照指定总角度设置选定圆弧包含角。 D 动态(DY):打开动态拖动模式。通过拖动选定对象端点之一来改变其长度。其他端点保持不变 43 特性匹配 matchprop(MA)

5.4K50

PS基础操作及常用快捷键

图层内容不需要再调整,再合并 :下面的一幅画,上面的图层会把下面的图层覆盖住 ? 图层顺序 ?...把不同图片放到同一个图层下:选中移动工具箭头,鼠标按住图像拖动到要放图层或背景下 : ? 新建图层:右下角点击如下 ? 4....再按alt键和shift键 绘制选框过程中平移选框:按空格后,再按住绘制图形移动 Del : 删除选中区域 选框一次性拖拽到位,松手之后很难继续拖拽选框 移动选框:在选中选框工具情况下,属性栏中新选区被选中...,鼠标移动到选框范围内,按住左键拖动 精确选框绘制:在属性栏中——样式“固定大小”,输入具体尺寸,在画布中单击鼠标 固定比例:可以让选框始终按照一个比例进行绘制 案例1:把下图设置望远镜视角...首先新建图层,在填充前景色为黑色,再用选图工具 注意:画好一个圆形图形,del掉,再鼠标直接拖动蚂蚁线同时按住shift键移动,这样两个圆形就会处在同一水平线上。 ?

1.8K10

数据可视化工具d3_前端3d可视化

在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖对象。...绘制矩形 绘制一个横向柱形图。只绘制矩形,不绘制文字和坐标轴。在 SVG 中,矩形元素标签是 rect。...为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组: var dataset = [ 250 , 210 , 170 , 130 , 90 ]; 绘图,直接使用 250 给矩形宽度赋值,即矩形宽度就是...其起始状态是在 y 轴等于 0 位置(但要注意,不能在起始状态直接返回 0,要应用比例尺计算画布中位置)。终止状态是目标值。...例如,拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等。用户用于交互工具一般有三种:鼠标、键盘、触屏。

12.7K40

浅谈基于QT截图工具设计与实现

在本例中,我们操作行为是按下鼠标开始截取区域,移动过程中界面绘制开始点和当前鼠标构成矩形,松开鼠标完成区域截取。很明显,我们会利用到鼠标事件。...让我们来演示上面代码问题: 很明显可以看到,当我们将鼠标向右下拖动时候,矩形很正常在动态显示,而向左上角拖动时候,就出现了问题。...原因在于,QTdrawRect等API绘制矩形时候,位置参数总是矩形左上角位置,而我们总是将鼠标按下位置作为左上角位置。然而,鼠标按下位置就应该是矩形左上角吗?不总是。...当我们拖动鼠标向右下角移动时候,左上角start位置确实是可以作为矩形xy坐标。...但一旦我们将鼠标移动到左上角,位于起始位置左边和上边时候,就应该用当前鼠标位置作为矩形左上角了: 于是,我们需要适当修改以下paintEvent中代码: void paintEvent(

30620

labelme:图像数据标注

在想要进行标注区域,点击鼠标开始绘制,在移动鼠标的过程中,会同步显示矩形边框,绘制完毕,再点击鼠标即可。...3d状态下:创建长方体,通过在任意视角图片点击即可开始该视角下矩形绘制,再次点击鼠标该视角下矩形框即绘制完毕,这时在其他视角,可以通过右键聚焦视角,并进行图片切换,当其他视角下有最开始创建矩形...,移动鼠标即可进行其他视角下矩形绘制绘制完毕再次点击鼠标即可,长方体绘制完毕后,按下回车键,键入标注文字,即可添加标注。...在想要标注区域,点击鼠标开始绘制,在想要绘制多边形顶点处再次点击鼠标,继续绘制绘制完毕后,按下回车键。...当标注脱离悬浮状态(unhovered)或者未选中状态(unselected),内部会显示不填充。对选中标注形状即可进行一系列操作,拖动标注形状,删除,更改等动作。

1.7K20

labelme:图像数据标注

在想要进行标注区域,点击鼠标开始绘制,在移动鼠标的过程中,会同步显示矩形边框,绘制完毕,再点击鼠标即可。...3d状态下:创建长方体,通过在任意视角图片点击即可开始该视角下矩形绘制,再次点击鼠标该视角下矩形框即绘制完毕,这时在其他视角,可以通过右键聚焦视角,并进行图片切换,当其他视角下有最开始创建矩形...,移动鼠标即可进行其他视角下矩形绘制绘制完毕再次点击鼠标即可,长方体绘制完毕后,按下回车键,键入标注文字,即可添加标注。...默认为圆形画刷,可以改变画刷大小(注,画刷大小是以当前图片宽度为比例) Create Rectangle : Create Circle:创建圆形,操作与创建矩形类似,请参考创建矩形。...当标注脱离悬浮状态(unhovered)或者未选中状态(unselected),内部会显示不填充。对选中标注形状即可进行一系列操作,拖动标注形状,删除,更改等动作。

4.4K30

CAD2007操作教程上

3.直接在命令中输入快捷键L(在命令行内输入命令快捷键,回车或空格或鼠标右键确定) 直线输入方法1.从命令行内输入直线命令快捷建L确定,2.用鼠标左键在屏幕中点击直线一端点,拖动鼠标,确定直线方向...放弃(u)回车,取消最近一点绘制。 三点或三点以上想让第一点和最后一点闭合并结束直线绘制,可在命令栏中输入 (C)回车。...二、矩形命令(REC) 绘制矩形步骤 方法:在命令行内输入命令快捷键为Rec,确定,用鼠标在键在操作窗口中指定第一角点,并拖动鼠标,在命令行内输入@X,Y  确定 X为矩形在水平方向上距离 Y指矩形在垂直方向上距离...继承特性“图案类型,角度和比例完全一致复制,在另一填充区域内 关联状态下填充是指填充图形中有障碍图形,当删除障碍图形,障碍图形内空白位置被填充图案自动修复 在“角度和比例”选项组中,可以设置用户定义类型图案填充角度和比例等参数...块是一个或多个对象组成对象集合,常用于绘制复杂、重复图形。一旦一组对象组合成块,就可以根据作图需要将这组对象插入到图中任意指定位置,而且还可以按不同比例和旋转角度插入。

3.6K30
领券