没有合适的资源?快使用搜索试试~ 我知道了~
最近在写一个类似截图里的简易画图的小工具,画线,画矩形,画圆,可以选择颜色,就像这样 写的过程中遇到了一些坑,还好爬出来了,也得到几位大佬的指点,稍微接触了一下zrender,在这里记录一下。 坑1,绘制过程的预览 用canvas画线没什么问题,moveTo和lineTo就好了,来一段代码凑字数(:joy:) 鼠标按下,开始绘制,记录初始鼠标的位置 startPaint = (e)=>{ this.startPaintFlag = true; this.paintstartX = e.clientX; this.paintstartY = e.clientY; }
资源推荐
资源详情
资源评论
原生原生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
我有过一个思路是,只擦除这个图形内部的形状,比如上面这一堆同心圆,我只擦除最后绘制的那个圆内部的内容,可惜还是
不行,一方面内部可能有别的线事先绘制了,一方面图形可以拖动放大,也可以拖动缩小,那么怎么办呢?
在叹了一口大气,喝了一杯水,凝视了一下窗外之后,想出了一个办法,我在画布上再叠一个画布不就好了,我在叠上去的这
个画布上就可以为所欲为了不是咩。
来个示意图,黑色框框是我们展示用的画布,黑色形状表示已经绘制上去的内容,红色框框是我们在画有预览效果的图形时所
资源评论
weixin_38537315
- 粉丝: 6
- 资源: 876
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- mmexport1714832730470.jpg
- 第8次课作业.md
- 过客软件园_1.1.apk
- boboav_night.apk
- 235486247769308自带键盘安卓海贼.apk
- 672536945416276wap.stuzn.com_1000_1137350andme_signed.apk
- 737836185360652wap.stuzn.com_1000_1642030hzw_n73d.apk
- JavaWeb阶段综合项目的接口文档
- 003 登录rsa+token 登录rsa+token(需改善 私钥不应该硬编码在类中、密码应该存储为哈希值)
- 992475461755466幼稚园春游功能版.apk
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功