原生canvas制作画图小工具的踩坑和爬坑


Posted in HTML / CSS onJune 09, 2020

最近在写一个类似截图里的简易画图的小工具,画线,画矩形,画圆,可以选择颜色,就像这样

原生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;
    }
}

但是画矩形和圆就出事了,因为截图工具画矩形和圆的时候,是有预览效果的,就是我一边画,我一边能看到我画出的形状是多大,如果按照画线的思路来,会得到这样的一串图形

原生canvas制作画图小工具的踩坑和爬坑

很好理解,因为mousemove的时候一直在改变位置和距离。那么如果我一开始就记录下位置,在画矩形和圆的时候不改变初始位置呢,那么会得到以下图形

原生canvas制作画图小工具的踩坑和爬坑

也很好理解,因为没有擦除,每次绘制的图形都在画布上。那擦除不就好了?不好,因为在画布上画的不是只有一个图形,如果我先画线,再画圆,那么一擦除,之前画的线就没了,令人纠结QAQ

我有过一个思路是,只擦除这个图形内部的形状,比如上面这一堆同心圆,我只擦除最后绘制的那个圆内部的内容,可惜还是不行,一方面内部可能有别的线事先绘制了,一方面图形可以拖动放大,也可以拖动缩小,那么怎么办呢?

在叹了一口大气,喝了一杯水,凝视了一下窗外之后,想出了一个办法,我在画布上再叠一个画布不就好了,我在叠上去的这个画布上就可以为所欲为了不是咩。

来个示意图,黑色框框是我们展示用的画布,黑色形状表示已经绘制上去的内容,红色框框是我们在画有预览效果的图形时所使用的临时画布,红色形状表示我们鼠标拖动过程中绘制的预览内容,每次需要绘制预览内容我们就生成一个临时画布,放在顶层,随心所欲的绘制,绘制完毕(鼠标抬起)将临时画布销毁,在展示用的画布(黑色框框)上绘制最终的图形

原生canvas制作画图小工具的踩坑和爬坑

来一段代码帮助理解

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的宽高改变的话,内容是会清除的,那么就面临两种选择:

  1. 用变量将绘制的每一个坐标记录下来,宽高变更后重新绘制;
  2. 将画布的内容直接作为图像(这个形容不准确,理解意思就行)保存下来

第一种我没试过,不过可想而知如果画的内容多了,应该会闪烁一下,第二种,就我所知有两种形式

第一种,用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画图小工具内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 #HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 #HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 #HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 #HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 #HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 #HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 #HTML / CSS
You might like
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php分页代码学习示例分享
2014/02/20 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
使用Python监控文件内容变化代码实例
2018/06/04 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
校友回访母校寄语
2015/02/26 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
我的收音机情缘
2022/04/05 无线电