原生canvas制作画图小工具的踩坑和爬坑
最近在写一个类似截图里的简易画图的小工具,画线,画矩形,画圆,可以选择颜色,就像这样
写的过程中遇到了一些坑,还好爬出来了,也得到几位大佬的指点,稍微接触了一下zrender,在这里记录一下。
坑1,绘制过程的预览
用canvas画线没什么问题,moveto和lineto就好了,来一段代码凑字数(:joy:)
鼠标按下,开始绘制,记录初始鼠标的位置 startpaint = (e)=>{ this.startpaintflag = true; this.paintstartx = e.clientx; this.paintstarty = e.clienty; } 鼠标抬起,停止绘制 stoppaint = (e)=>{ this.startpaintflag = false; } painting = (e)=>{ const {activecolor, activeshape} = this.state; 绘制过程中 if(this.startpaintflag){ const ctx = this.canvas.getcontext("2d"); ctx.strokestyle = activecolor; ctx.linewidth = 2; ctx.beginpath(); if(activeshape === 'pen'){ ctx.moveto(this.paintstartx, this.paintstarty); ctx.lineto(e.clientx, e.clienty); } if(activeshape === 'circle'){ const r = math.sqrt(math.pow(e.clientx - this.paintstartx, 2) + math.pow(e.clienty - this.paintstarty, 2)); ctx.arc(this.paintstartx, this.paintstarty, r, 0, 2*math.pi) } if(activeshape === 'rect'){ ctx.rect(this.paintstartx, this.paintstarty, e.clientx - this.paintstartx, e.clienty - this.paintstarty); } ctx.stroke(); 记录此次移动的最后位置,供下一次绘制使用 this.paintstartx = e.clientx; this.paintstarty = e.clienty; } }
但是画矩形和圆就出事了,因为截图工具画矩形和圆的时候,是有预览效果的,就是我一边画,我一边能看到我画出的形状是多大,如果按照画线的思路来,会得到这样的一串图形
很好理解,因为mousemove的时候一直在改变位置和距离。那么如果我一开始就记录下位置,在画矩形和圆的时候不改变初始位置呢,那么会得到以下图形
也很好理解,因为没有擦除,每次绘制的图形都在画布上。那擦除不就好了?不好,因为在画布上画的不是只有一个图形,如果我先画线,再画圆,那么一擦除,之前画的线就没了,令人纠结qaq
我有过一个思路是,只擦除这个图形内部的形状,比如上面这一堆同心圆,我只擦除最后绘制的那个圆内部的内容,可惜还是不行,一方面内部可能有别的线事先绘制了,一方面图形可以拖动放大,也可以拖动缩小,那么怎么办呢?
在叹了一口大气,喝了一杯水,凝视了一下窗外之后,想出了一个办法,我在画布上再叠一个画布不就好了,我在叠上去的这个画布上就可以为所欲为了不是咩。
来个示意图,黑色框框是我们展示用的画布,黑色形状表示已经绘制上去的内容,红色框框是我们在画有预览效果的图形时所使用的临时画布,红色形状表示我们鼠标拖动过程中绘制的预览内容,每次需要绘制预览内容我们就生成一个临时画布,放在顶层,随心所欲的绘制,绘制完毕(鼠标抬起)将临时画布销毁,在展示用的画布(黑色框框)上绘制最终的图形
来一段代码帮助理解
startpaint = (e) => { this.startpaintflag = true; this.paintstartx = e.clientx; this.paintstarty = e.clienty; 画矩形和圆形时临时生成一个canvas if (this.state.activeshape !== "pen") { this.tempcanvas = document.createelement("canvas"); this.tempcanvas.width = this.canvas.width; this.tempcanvas.height = this.canvas.height; 设置一些定位样式 this.tempcanvas.style.csstext = "position: absolute; top: 0; left: 0; z-index: 0;"; append到需要的容器元素里 document.queryselector(".contain").appendchild(this.tempcanvas); } }; stoppaint = (e) => { this.startpaintflag = false; const { activeshape, activecolor } = this.state; if (activeshape !== "pen") { 从容器元素里删除临时画布 document.queryselector(".contain").removechild(this.tempcanvas); this.tempcanvas = null; 将lastdrawdata记录的绘制数据,绘制到展示用的画布上 const ctx = this.canvas.getcontext("2d"); ctx.strokestyle = activecolor; ctx.linewidth = 2; ctx.beginpath(); if (activeshape === "circle") { const { x, y, r } = this.lastdrawdata; ctx.arc(x, y, r, 0, 2 * math.pi); } else { const { x, y, width, height } = this.lastdrawdata; ctx.rect(x, y, width, height); } ctx.stroke(); this.lastdrawdata = null; } }; painting = (e) => { const { activecolor, activeshape } = this.state; if (this.startpaintflag) { const ctx = this.canvas.getcontext("2d"); ctx.strokestyle = activecolor; ctx.linewidth = 2; 画线的逻辑不动 if (activeshape === "pen") { ctx.beginpath(); ctx.moveto(this.paintstartx, this.paintstarty); ctx.lineto(e.clientx, e.clienty); ctx.stroke(); this.paintstartx = e.clientx; this.paintstarty = e.clienty; } else { 有预览的图形绘制在临时画布上 const tempctx = this.tempcanvas.getcontext("2d"); tempctx.strokestyle = activecolor; tempctx.linewidth = 2; 每次绘制前清除画布 tempctx.clearrect(0, 0, this.canvas.width, this.canvas.height); tempctx.beginpath(); if (activeshape === "circle") { const r = math.sqrt( math.pow(e.clientx - this.paintstartx, 2) + math.pow(e.clienty - this.paintstarty, 2) ); tempctx.arc(this.paintstartx, this.paintstarty, r, 0, 2 * math.pi); 绘制的数据记录在一个变量里 this.lastdrawdata = { x: this.paintstartx, y: this.paintstarty, r, }; } else { tempctx.rect( this.paintstartx, this.paintstarty, e.clientx - this.paintstartx, e.clienty - this.paintstarty ); this.lastdrawdata = { x: this.paintstartx, y: this.paintstarty, width: e.clientx - this.paintstartx, height: e.clienty - this.paintstarty, }; } tempctx.stroke(); } } };
坑2,窗口大小变更
如果画着画着,突然用户将窗口大小变了,你说我是保持画布大小不变呢,还是让画布大小随着窗口改变而改变,如果窗口缩小,那么保持画布大小不变是没什么大问题的,但是窗口如果变大,画布区域又是自适应的,那么就不得不跟随改变了,但是canvas的宽高改变的话,内容是会清除的,那么就面临两种选择:
- 用变量将绘制的每一个坐标记录下来,宽高变更后重新绘制;
- 将画布的内容直接作为图像(这个形容不准确,理解意思就行)保存下来
第一种我没试过,不过可想而知如果画的内容多了,应该会闪烁一下,第二种,就我所知有两种形式
第一种,用getimagedata保存图像,改变大小后,用putimagedata绘制,putimagedata只能裁剪图像,不能拉伸 const imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height); canvas.width = newwidth; canvas.height = newheight; ctx.putimagedata(imgdata, 0, 0); 第二种,还是创建一个临时画布,将图形绘制下来,改变大小后,用drawimage绘制,drawimage是可以拉伸图像的 const newcanvas = document.createelement("canvas"); newcanvas.width = canvas.width; newcanvas.height = canvas.height; newcanvas.getcontext("2d").drawimage(canvas, 0, 0); canvas.width = newwidth; canvas.height = newheight; ctx.drawimage(newcanvas, 0, 0);
开始我选的是drawimage,窗口如果不是等比缩放(一般不可能等比),图像可以拉伸,但是拉伸一两次图形就变得很模糊,所以可能还不如不改变图像的比例为好,具体还是看场景
到此这篇关于原生canvas制作画图小工具的踩坑和爬坑的文章就介绍到这了,更多相关canvas画图小工具内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
上一篇: 利用vue+elementUI实现部分引入组件的方法详解
下一篇: 解析Vue 2.5的Diff算法