手机端写字板、画板vue组件

mengera88 发布于2019-08-26 13:27 / 3511人阅读

摘要：一个简单的写字板画板组件由于项目需求目前只提供清空功能代码及使用引入组件使用组件，可以放在一个自定义样式的中屏兼容画布大小放大倍数，笔触颜色笔触宽度，笔触阴影大小，清空自定义清空按钮，调用组件方法清空画布开发笔记需要兼容屏一倍图模糊

一个简单的canvas写字板、画板vue组件,由于项目需求目前只提供清空功能
代码及demo

使用

1.引入组件

import draw from "./inDraw/index"

  components: {
    draw,
  },

2.使用组件，可以放在一个自定义样式的div中

                        
        
        清空

3.自定义清空按钮，调用组件方法inDeleteCanvas清空画布

  methods: {
      drawDelete(){
        this.$refs["in-draw"].inDeleteCanvas()
      },
  }

开发笔记

1.需要兼容retina屏一倍图模糊的问题，将画布大小设置为canvas元素的2或3倍

  //this.inRatio=3;
  let canvasDom=this.$refs["in-draw-canvas"];
  this.inCanvasBound = canvasDom.getBoundingClientRect();
  canvasDom.width=this.inCanvasBound.width*this.inRatio;
  canvasDom.height=this.inCanvasBound.height*this.inRatio;

  this.inCtx.lineWidth=10*this.inRatio;

2.笔触锯齿问题，设置阴影

   this.inCtx.shadowBlur = 5;
   this.inCtx.shadowColor = "#000";

3.适应需求在不同位置的画布，笔触实际位置为当前坐标减去画布位置

   let x=(e.changedTouches[0].pageX - this.inCanvasBound.left + 0.5)*this.inRatio;
   let y=(e.changedTouches[0].pageY- this.inCanvasBound.top + 0.5)*this.inRatio;

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108847.html

Canvas画板---手机上也可以用的画板

摘要：方法可以获取到上下文二制作画板画板功能可以绘制不同颜色和粗细的线条，画板上有橡皮擦功能，一键清除功能，下载功能。我们可以用来监听三种状态。学习制作画板之前，我们先来了解一下canvas标签一.canvas标签 1.canvas标签与img标签相似，但是canvas标签是一个闭合标签，并且没有src alt属性2.canvas标签有两个属性，width，height。我们在页面上用c...

oogh 2019-08-22 13:51 评论0 收藏0
Canvas画板---手机上也可以用的画板

摘要：方法可以获取到上下文二制作画板画板功能可以绘制不同颜色和粗细的线条，画板上有橡皮擦功能，一键清除功能，下载功能。我们可以用来监听三种状态。学习制作画板之前，我们先来了解一下canvas标签一.canvas标签 1.canvas标签与img标签相似，但是canvas标签是一个闭合标签，并且没有src alt属性2.canvas标签有两个属性，width，height。我们在页面上用c...

ernest.wang 2019-08-29 14:14 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

luffyZh 2019-08-02 16:11 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

daydream 2019-08-23 16:46 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

FleyX 2019-08-29 18:32 评论0 收藏0