【绘制】HTML5 Canvas 绘画画板,实现鼠标画线条,画矩形或选区(图文、示例) | 您所在的位置:网站首页 › 鼠标画直线歪歪扭扭 › 【绘制】HTML5 Canvas 绘画画板,实现鼠标画线条,画矩形或选区(图文、示例) |
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门:https://github.com/827652549/CanvasStudy 目录
介绍 思路 画直线 画矩形选区 其他事项 项目演示 画直线 画矩形选区 代码解读 拖拽时发生的事情 选取框在将来的用途 介绍我们可以参考Window最经典的画图工具中的“画直线”“画矩形”,或是ps中的“shift+‘画笔工具’”或“矩形选框工具”。现在,我们用Canvas来实现这两个“画线条”和”画矩形选区“的功能。 偷偷告诉你,教程的后面,会实现整个画板的功能,敬请期待。 其他的名字: 画直线:橡皮筋线条 画矩形选框:橡皮筋矩形选取框 你可以理解“橡皮筋”为“用画笔来画”的意思,因为它可以自由伸缩,鼠标也可以拽长拽短,老外翻译过来的,先记着。 思路 画直线 获取到鼠标按下时的初始点坐标鼠标移动时保持不断绘制最新点和初始点的连线鼠标松开时绘制最新点和初始点的连线 画矩形选区一条直线可以作为一个矩形的对角线来决定一个矩形 获取到鼠标按下时的初始点坐标鼠标移动时保持记下最新点的坐标,根据新坐标和初始坐标判断矩形的位置和宽高,并不断绘制鼠标松开时,更新并留下最新的矩形的绘制 其他事项注意:不断的绘制,意味着要不断地清除“上次鼠标移动”的连线,用getImageData()和putImageData()实现。 为了页面效果,我也使用了网格线背景和辅助线,其中辅助线你可以选择取消显示。 项目演示在线演示 详细代码 画直线 添加辅助线时画直线,此时鼠标正在辅助线十字交叉口 画矩形选区矩形的左上角是鼠标按下的初始点,辅助线十字交叉口是当前位置。 此时,我并没有将直线(对角线)拿掉,因为我觉得这样看起来更加直观。 另外,在ps中,真正的选区时虚线表示的,这里我们用的实线表示,虚线的教程在下一节,如有需要,可自行添加。 代码解读关于代码的逻辑,我在代码注释中都标示了解释,应该很容易能看懂。这里我再说点其他的。 拖拽时发生的事情当用户拖拽鼠标时,程序会维护一个叫做rubberbandRect的矩形对象中的属性,标示线条的矩形外框线,也即是所谓的矩形框。 针对用户在拖拽鼠标时发生的每个鼠标事件,程序都要做三件事: 恢复绘制表面更新rubberbandRect从按下鼠标的位置向鼠标的当前位置画一条线应用程序的onmousedown事件处理器会将绘制表面保存期阿里,这样在onmousemove事件处理器中进行恢复操作,就等于线段的擦除了。 选取框在将来的用途应用程序代码,在拖拽时维护了一个代表橡皮筋选取框变量中的属性。绘制橡皮筋的函数,叫做drawRubberbandShape()。由于程序维护了一个矩形选取框,我们可以修改这个函数,让它支持所有能容纳在矩形范围内的形状,例如圆形或多边形。 实际上,我们在后面就要开始重新实现drawRubber-bandShape()方法了。 |
CopyRight 2018-2019 实验室设备网 版权所有 |