橡皮筋画直线c 语言,canvas 橡皮筋式线条绘图应用方法
什么叫橡皮筋式
指画图时橡皮筋一样伸缩自如。。
例子如下:point_down:
思路
思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路
mousedown:记录start位置,drag(记录是否处于拖动状态)设置为true,getImageData( 橡皮筋效果关键1 )
mousemove:获取拖动时的位置pos,putImageData( 对应getImageData,橡皮筋效果关键2 ),根据pos与start画直线
mouseup:drag恢复为false
关键 就在于putImageData()与getImageData()这两个canvas的方法,putImageData()记录了鼠标点下时的图像,getImageData()对应还原。如果没有执行这两个方法就会出现以下的效果
putImageData()相当于把“扫描”出来的线都擦掉
代码
let canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect()获取元素位置
canvasTop = canvas.getBoundingClientRect().top;
let imageData; //记录图像数据
let start = new Map([['x',null],['y',null]]);
let drag = false;//记录是否处于拖动状态
canvas.onmousedown = function (e) {
let pos = positionInCanvas(e, canvasLeft, canvasTop);
start.set('x', pos.x);
start.set('y', pos.y);
drag = true;
//记录imageData
imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
}
canvas.onmousemove = function (e) {
if(drag === true){
let pos = positionInCanvas(e, canvasLeft, canvasTop);
//相当于把扫描出来的线都擦掉,重新画
ctx.putImageData(imageData, 0, 0);
ctx.beginPath();
ctx.moveTo(start.get('x'), start.get('y'));
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}
}
canvas.onmouseup = function (e) {
drag = false;
}
function positionInCanvas (e, canvasLeft, canvasTop) {//获取canvas中鼠标点击位置
return {
x:e.clientX - canvasLeft,
y:e.clientY - canvasTop
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
橡皮筋画直线c 语言,canvas 橡皮筋式线条绘图应用方法相关推荐
- 橡皮筋画直线c 语言,canvas——橡皮筋式线条绘图应用
什么叫橡皮筋式 指画图时橡皮筋一样伸缩自如.. 例子如下? 思路 思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路 mousedow ...
- canvas——橡皮筋式线条绘图应用
什么叫橡皮筋式 指画图时橡皮筋一样伸缩自如.. 例子如下? 思路 思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路 mousedow ...
- html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
- 高版本CAD画直线时,点击F8正交卡死解决方法
在菜单中找到 工具,工具选项下选择自定义,自定义中选择界面即可 在这个页面中,首先需要选择"所有自定义文件",并找到"键盘快捷键"选项,点击 点开"+ ...
- matlab画点阵图,利用matplotlib+numpy绘制多种绘图的方法实例
前言 matplotlib 是Python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.本文将以例子的形式分析matplot中支持的,分析中常用的几种图.其中 ...
- C语言画直线~Bresenham方法
前言 由于项目上遇到了棘手的问题,给定坐标需要实现C绘制直线的驱动函数,绘制直线一般都是显示屏的底层函数,本想着找个显示屏的驱动看下drawline源码,但仔细想一想会不会底层用的是汇编尼,于是便放弃 ...
- Canvas---Canvas版画图,坐标轴绘制,网格绘制,橡皮筋式画直线
使用Canvas实现画图程序. 这个量还是比较大的,请允许我慢慢来. 目前做到了:坐标轴的绘制,网格绘制,橡皮筋式画直线 目前的不足:没有应用多个图层将网格,坐标轴与实际绘画区域分离 接下要做:为橡皮 ...
- HTML怎么在矩形上画直线,【绘制】HTML5 Canvas 绘画画板,实现鼠标画线条,画矩形或选区(图文、示例)...
个人处女做<Canvas系列教程>在个人Github上正在连载更新,但愿能获得您的关注和支持,让我有更多的动力进行创做.html 教程介绍.教程目录等能在README里查阅.git 目录函 ...
- html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道canvas是什么,可以看看. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var ...
最新文章
- 服务化部署框架Paddle Serving
- alpine linux docker容器时区修改
- pipfile和pipfile.lock、virtualenv、pipenv、pip
- 剑指Offer——斐波那契数列
- AAAIT学院JDK15新特性历史
- 【报告分享】2019-2020年企业调薪参考手册.pdf(附下载链接)
- Gartner的企业信息管理EIM模型
- 70 个数据分析常用网址!
- 基于Hololens开发---本地化空间锚点
- 延禧攻略邀您领取66
- 一万多字的windows历史
- 加盟代理小程序为创业者带来另一条出路
- 移动App专项性能测试(Android and iOS)
- 梳理STM32F429之通信传输部分---NO.8 硬件SPI
- Mutex与Semaphore 第一部分:Semephore
- EFR32MG裸机工程-4-UART
- ALBRECHT铣刀夹头BT50 20-32
- 计算机教学在语文中应用,计算机在语文教学中的应用.doc
- 动态路由协议BGP介绍
- 计算机短路计算基本原理,短路计算的计算机方法ppt课件
热门文章
- IP网络地址子网划分
- 回款到底该由谁负责?
- gradle瘦身/删除没有用的文件
- 多线程与多进程的优缺点
- exchange系列(三)exchange邮件服务器的邮件传输管理
- 我的世界服务器显示unknown,我的世界攻略_我的世界显示unknown host怎么办?|玩法丰富_游戏手机游戏-中关村在线...
- 装饰者设计模式(结构型设计模式)
- CSS:CSS Modules
- 玩火线精英显示服务器链接失败,火线精英为什么进不去 为什么不能玩
- 【转载】iPhone开发之NSNotificationCenter(通知)的使用方法