开场白 虽然在实际的开发中我们很少去绘制流程图 就算需要,我们也会通过第3方插件去实现 下面我们来简单实现流程图中很小的一部分 手动绘制矩形 绘制一个矩形的思路 我们这里绘制矩形 会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形 x:矩形起点的 x 轴坐标。 y:
虽然在实际的开发中我们很少去绘制流程图
就算需要,我们也会通过第3方插件去实现
下面我们来简单实现流程图中很小的一部分
手动绘制矩形
我们这里绘制矩形
会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形
x:矩形起点的 x 轴坐标。
y:矩形起点的 y 轴坐标。
width:矩形的宽度。正值在右边,负值在左边。
height:矩形的高度。正值下降,负值上升。
注意一下w,h这两个参数的正直和负值。
如果w,h是负数,会出现了2个斜着对称的矩形
Document
通过上面我们实现了静态绘制矩形。
如果我们想要手动画一个矩形,需要实现以下几个步骤
1.给canvas注册鼠标按下事件,在按下的时候记录矩形的起始坐标(x,y)
与此同时,还需要在按下时注册鼠标移动事件和抬起事件。
2.在鼠标移动的时候,通过计算得到矩形的宽和高。
计算矩形的宽度和高度时,我们要使用绝对值进行计算。
计算后立即绘制矩形
3.在鼠标抬起时,移除之前注册的鼠标移动事件和抬起事件
通过上面这张图片,我们虽然绘制手动绘制出了矩形。
但是出现了重复的路径。
我们先分析一下出现重复路径的原因。
我们在每次移动的过程中,都会绘制矩形。
只要我们在绘制前,清空矩形是不是就可以解决这个问题
我们来尝试一下
function drawRect(x1,y1,x2,y2){
// 在计算矩形的宽高时,我们需要使用绝对值来进行计算
// 此时此刻移动的坐标减去最初按下的坐标就是矩形的宽和高
let rectWidth = Math.abs(x2-x1)
let rectHeight = Math.abs(y2-y1)
// 存储矩形的坐标信息
rectArr = [x1,y1,rectWidth,rectHeight]
// 在绘制矩形前,我们将矩形清空,然后在绘制,就不会出现多余的路径了
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
// 重新绘制矩形
ctx.strokeRect(...rectArr)
}
有些机智的小伙伴发现:
如果我起始点是右下角,终点是左上角。
即:用户从(900, 1000)拖动到(50, 50)这种情况
按照这样的方向绘制矩形,是不是会出现问题呢?
确实会出现问题。
此时绘制的矩形不会随着我们的方向进行绘制。请看下面的图
如何处理这个问题呢?
canvas.rect(x,y,w,h)该方法创建一个矩形路径
x:矩形起点的 x 轴坐标。
y:矩形起点的 y 轴坐标。
width:矩形的宽度。正值在右边,负值在左边。
height:矩形的高度。正值下降,负值上升。
这个方法是创建一个矩形路径,创建的路径并不会直接绘制在画布上。
需要调用stroke()或fill()才能显示在画布上。
function drawRect(x1,y1,x2,y2){
let rectWidth = Math.abs(x2-x1)
let rectHeight = Math.abs(y2-y1)
// 绘制之前先清空之前实时移动产生的多余的矩形路径
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
// 开始画线
ctx.beginPath();
// 绘制路径矩形
ctx.rect(Math.min(x1, x2), Math.min(y1, y2), rectWidth, rectHeight);
// 绘制形状的轮廓。
ctx.stroke();
}
区别1功能性: canvas.strokeRect:绘制的是边框。canvas.rect创建矩形的路径(不绘立即绘制在矩形上)
区别2即时性: canvas.strokeRect是立即绘制。canvas.rect不是立即绘制,需要调用stroke()或fill()才能绘制
相同点:
1.都是绘制矩形
2.接受的参数相同
3.都是通过strokeStyle(颜色)和lineWidth(线的粗细)等来设置样式
function drawRect(x1,y1,x2,y2){
let rectWidth = Math.abs(x2-x1)
let rectHeight = Math.abs(y2-y1)
let endX = Math.min(x1, x2)
let endY = Math.min(y1, y2)
// 绘制之前先清空之前实时移动产生的多余的矩形路径
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
// 绘制之前那些存储在 beforeRectArr 数组中的矩形
allRectInfoArr = [endX, endY, rectWidth, rectHeight]
ctx.clearRect(0,0, canvasEle.width, canvasEle.height)
beforeRectArr.forEach(element => {
ctx.beginPath();
ctx.strokeRect(...element)
ctx.stroke();
});
// 开始本次路径
ctx.beginPath();
// 绘制本次的矩形路径
ctx.rect(...allRectInfoArr);
// 开始填充矩形
ctx.stroke();
}
// 当我们鼠标抬起的时候要移除之前注册移动事件和抬起事件
function canvasMouseUpHandler(){
savaBeforeRect()
canvasEle.removeEventListener('mousemove', canvasMoveHandler)
canvasEle.removeEventListener('mouseup', canvasMouseUpHandler)
}
function savaBeforeRect(){
beforeRectArr.push(allRectInfoArr)
}
Document
如果小伙伴觉得我写的不错的话
可以给我点个赞吗?感谢了。
后面会继续写:
如何选中矩形,更改矩形大小。
如何在矩形上添加文字。
如何绘制圆,箭头符号等
魅影app 官方正版 4.59 63.28 MB
下载
湘ICP备2022002427号-10湘公网安备:43070202000427号
© 2013~2019 haote.com 好特网