橡皮筋画直线c 语言,canvas——橡皮筋式线条绘图应用

什么叫橡皮筋式

指画图时橡皮筋一样伸缩自如。。

例子如下?

思路

思路很简单，只有橡皮筋式绘制功能要注意，以下总结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 橡皮筋式线条绘图应用方法
什么叫橡皮筋式指画图时橡皮筋一样伸缩自如.. 例子如下:point_down: 思路思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的 ...
canvas——橡皮筋式线条绘图应用
什么叫橡皮筋式指画图时橡皮筋一样伸缩自如.. 例子如下? 思路思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路 mousedow ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
Canvas---Canvas版画图，坐标轴绘制，网格绘制，橡皮筋式画直线
使用Canvas实现画图程序. 这个量还是比较大的,请允许我慢慢来. 目前做到了:坐标轴的绘制,网格绘制,橡皮筋式画直线目前的不足:没有应用多个图层将网格,坐标轴与实际绘画区域分离接下要做:为橡皮 ...
HTML怎么在矩形上画直线,【绘制】HTML5 Canvas 绘画画板，实现鼠标画线条，画矩形或选区（图文、示例）...
个人处女做<Canvas系列教程>在个人Github上正在连载更新,但愿能获得您的关注和支持,让我有更多的动力进行创做.html 教程介绍.教程目录等能在README里查阅.git 目录函 ...
html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道canvas是什么,可以看看. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var ...
Silverlight学习笔记三(鼠标点击动态画直线|动态设置Ellipse的Canvas.Top与Canvas.Left|动态设置Stroke属性的方法。)...
我有可能需要把AutoCAD的部分功能搬到浏览器上,先练习一下画直线的方法.如图: MainPage.xaml代码: 大气象 <UserControl x:Class="DrawLin ...
C语言画直线~Bresenham方法
前言由于项目上遇到了棘手的问题,给定坐标需要实现C绘制直线的驱动函数,绘制直线一般都是显示屏的底层函数,本想着找个显示屏的驱动看下drawline源码,但仔细想一想会不会底层用的是汇编尼,于是便放弃 ...
java canvas类画直线_canvas教程(二) 绘制直线
经过 canvas 教程(一) 简介我们知道了 canvas 的一些基本情况而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线但是无论是直线还是曲线,我们都 ...

橡皮筋画直线c 语言,canvas——橡皮筋式线条绘图应用

橡皮筋画直线c 语言,canvas——橡皮筋式线条绘图应用相关推荐

最新文章

热门文章