IT_NQR
IT_年轻人
采纳率100%
2019-01-09 19:17

canvas与webSocket在移动端做电子签名时滑动太快,pc端同步展示时出现断点或者虚线?

40
已采纳

用canvas 与 webSocket 做一个在移动端签名并在pc端实时展示签名轨迹的功能
功能实现后发现,如果在签名时滑动太快,触发事件则无法全部响应,导致在pc端展示时出现断点, 虚线等情况。(图片一会上传)。
功能大概的实现方式就是:当touchmove 执行时 获取 x轴与y轴的数值,通过 webSocket的send() 方法传值给后台,后台接到数据以后在返回到 jsp。
滑动代码:
canvas.addEventListener("touchmove", function(e){// 触摸移动中

e.preventDefault(); //阻止屏幕滚动
var x = e.changedTouches[0].clientX - e.target.offsetLeft;
var y = e.changedTouches[0].clientY - e.target.offsetTop;

cxt.lineTo(x,y); //定义线条结束坐标
cxt.strokeStyle=color; //线条颜色
cxt.fillStyle = color; //填充颜色
var fromName = self;
var toName = $("#userlist").val(); //发给谁
var type = "coord";
var content = x+'_'+y;
var msg = fromName + "," + toName + "," + content + "," + type;
ws.send(msg);//传值给后台

cxt.stroke();//画出线条方法。
}, false)
展示图片代码
ws.onmessage = function(evt) {
var data = evt.data;
var o = eval('(' + data + ')');//将字符串转换成JSON
var oGC = oC.getContext('2d');
var coordArry = o.data.split("_");//接后台传的值

var x = coordArry[0];//通过 x轴与 y轴 出现签名笔记

var y = coordArry[1];
oGC.moveTo(x-1,y-1);
oGC.lineTo(x,y);
oGC.lineWidth = 1;

oGC.stroke();
};
移动端展示(移动端滑动快慢都不会出现断点)
图片说明

滑动太快时PC端展示效果

图片说明

    本人 H5 与 JS 都是菜鸟一枚,希望各位大神回帖的时候能详细的说一下。尽量给予直接的代码帮助。如果觉得40C币,有点少我在加40C也可以。
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • yanzhi_2016 yanzhi_2016 2年前

    刚好前两天写了一个这样的demo,出现虚线的原因是touchmove事件的触发不是连续的。

      class Pad {
        constructor (el) {
          let cvs = document.getElementById(el);
          this.ctx = cvs.getContext('2d');
          this.clientX = 0;
          this.clientY = 0;
          cvs.addEventListener('touchstart', e => {
            let x = e.changedTouches[0].clientX - e.target.offsetLeft;
            let y = e.changedTouches[0].clientY - e.target.offsetTop;
            // 记下落笔时的的坐标
            this.clientX = x;
            this.clientY = y;
          })
          cvs.addEventListener('touchmove', e => {
            let x = e.changedTouches[0].clientX - e.target.offsetLeft;
            let y = e.changedTouches[0].clientY - e.target.offsetTop;
            // 绘制路径
            this.stroke(x, y);
            // 记下移动轨迹的坐标
            this.clientX = x;
            this.clientY = y;
          })
        }
        stroke(startX, startY) {
          /**
           * touchmove不是连续触发的,所以想要画出连续的线,只要将上一次touchmove触发时的坐标和当前touchmove触发时的的坐标连成线就可以了
           * */
          this.ctx.beginPath();
          this.ctx.lineWidth = 5;
          this.ctx.moveTo(startX, startY);
          this.ctx.lineTo(this.clientX, this.clientY);
          this.ctx.stroke();
          this.ctx.closePath();
        }
      }
      new Pad('myCanvas');
    
    点赞 评论 复制链接分享
  • esrfrtg esrfrtg 2年前

    其一是要想获取触控的属性(坐标),首先要获取触控的对象,移动端多个指针,PC端只有一个指针,所以要取所有手指e.touches[x]; 其二是触摸时浏览器有个默认的事件,这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();否则怪异现象层出不穷。 其三是手机端可以addEventListener事件绑定,PC用ontouchmove,ontouchstart,ontouchend。

    点赞 1 评论 复制链接分享
  • devmiao devmiao 2年前