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

使用鼠标位置在wxPython中绘制直线

在wxPython中使用鼠标位置绘制直线可以通过以下步骤实现:

  1. 导入wxPython库:
代码语言:txt
复制
import wx
  1. 创建一个继承自wx.Frame的自定义窗口类:
代码语言:txt
复制
class MyFrame(wx.Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.Bind(wx.EVT_PAINT, self.on_paint)
        self.Bind(wx.EVT_LEFT_DOWN, self.on_left_down)
        self.Bind(wx.EVT_LEFT_UP, self.on_left_up)
        self.Bind(wx.EVT_MOTION, self.on_motion)
        self.start_pos = None
        self.end_pos = None

    def on_paint(self, event):
        dc = wx.PaintDC(self)
        if self.start_pos and self.end_pos:
            dc.DrawLine(self.start_pos[0], self.start_pos[1], self.end_pos[0], self.end_pos[1])

    def on_left_down(self, event):
        self.start_pos = event.GetPosition()

    def on_left_up(self, event):
        self.end_pos = event.GetPosition()
        self.Refresh()

    def on_motion(self, event):
        if event.LeftIsDown():
            self.end_pos = event.GetPosition()
            self.Refresh()
  1. 创建一个wx.App对象,并在其中创建自定义窗口类的实例:
代码语言:txt
复制
app = wx.App()
frame = MyFrame(None)
frame.Show()
app.MainLoop()

以上代码实现了在wxPython中绘制直线的功能。具体实现步骤如下:

  • 创建一个自定义窗口类MyFrame,继承自wx.Frame,并在初始化方法中绑定了绘制、鼠标左键按下、鼠标左键释放、鼠标移动等事件。
  • 在绘制事件处理方法on_paint中,使用wx.PaintDC对象绘制直线,起点为self.start_pos,终点为self.end_pos。
  • 在鼠标左键按下事件处理方法on_left_down中,获取鼠标位置并将其赋值给self.start_pos。
  • 在鼠标左键释放事件处理方法on_left_up中,获取鼠标位置并将其赋值给self.end_pos,然后调用self.Refresh()方法触发重绘。
  • 在鼠标移动事件处理方法on_motion中,如果鼠标左键按下,则更新self.end_pos,并调用self.Refresh()方法触发重绘。
  • 创建一个wx.App对象,并在其中创建自定义窗口类的实例,最后调用app.MainLoop()方法进入主事件循环。

这样,当鼠标左键按下并移动时,就会在窗口中绘制直线,直线的起点为鼠标按下的位置,终点为鼠标释放或移动的位置。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mpns
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 元宇宙(Tencent XR):https://cloud.tencent.com/product/xr
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【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.7K10

使用 Pandas Python 绘制数据

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

6.8K20

【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.4K20

问与答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.4K30

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

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

2.2K20

【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.3K20

手写原生代码专题 | 简易手写画板(二)

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.4K20

wxPython打造Python图形界面(上)

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

4.8K40

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

考核内容: 鼠标事件 题发散度: ★ 试题难度: ★ 解题: 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返回鼠标指针相对于目标元素边缘位置的垂直坐标。

1K30

python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析

QPixmap(400, 400) self.pix.fill(Qt.white) def paintEvent(self, event): pp = QPainter(self.pix) # 根据鼠标指针前后两个位置绘制直线...代码分析 在这个例子,实现了简单的绘图功能,按住鼠标左键画板上进行绘制,释放鼠标左键结束绘图 第一组代码:初始化代码         #实例化QPixmap类         self.pix...重构paintEvent()函数         def paintEvent(self, event):         pp = QPainter(self.pix)         # 根据鼠标指针前后两个位置绘制直线...            self.update() 第五组代码:重构mouseReleaseEvent()函数,当鼠标指针移动时获得结束点,并更新绘制,注意,这里的button()函数可以获取鼠标指针移动过程按下的所有按键...,然后用Qt.LeftButton来判断是否按下了左键,mouseMoveEvent()必须使用该函数来判断按下的鼠标按键,最后调用update()函数,会执行paintEvent()函数进行重新绘制

1.3K31

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

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

2.2K40

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

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

1.1K40

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.4K50

【ps练习】0226钢笔工具

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

88530

实现Web端自定义截屏

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

2.3K30

CAD2007操作教程上

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

3.5K30

Word8个隐藏的排版神技巧,个个都实用,一定要收藏!

作者 | 叨叨君 来源 | 办公资源(id:pptziyuan) 使用Word的过程,经常需要对内容进行排版。怎么操作,才能事半功倍,效率更高呢?...快速输入日期:Alt+Shift+D 快速输入时间:Alt+Shift+T 3、快速移动文本位置 选中一段文本,按住鼠标左键不动,然后拖动文本,即可快速将这段文本移动到任意位置。...4、Alt键任意选择 我们知道,Word中选择文字内容时,只能从头选到尾,如果想要任意选取,其实通过Alt键则可以实现任意方形区域选择,按住Alt键然后拖动鼠标进行选择即可。...输入三个"-" 按 enter键 快速绘制直线 输入三个"*" 按 enter键 快速绘制虚线 输入三个"~"按 enter键 快速绘制波浪线 输入三个"="按 enter键 快速绘制直线...输入三个"#"按 enter键 快速绘制中间加粗的三直线 8、快速提取不能复制的网页文字 上网查资料,遇到无法复制的网页文字,不要用手一个个打字录入了,使用OCR文字识别工具【天若OCR文字识别】

1.8K20

实现Web端自定义截屏

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

2.4K20
领券