永中dcs是一款在线预览各种办公文件的网络产品,我们可以只用一个浏览器就可以实现对word,ppt和excel等文件的在线浏览,在其中有一个在线手绘功能很有特色,让我们来探一探它的实现原理吧。

第一,简单的光标滑动中究竟发生了什么

当你啪的一声在屏幕上按下鼠标光标或者更直接的用手指头按住触摸屏,浏览器就会产生对应的触摸事件,输出类似于下面所示的信息

event = {

clientX:xxx,

clientY:yyy,

timeStamp:tttt,

...

}

每划过一段距离和一段时间,浏览器就会产生一个触碰或者光标事件,事件里面记录了点位的位置坐标,产生时间,相对位置,甚至通过一些手段,你可以从事件的深层信息里找到触碰的压力信息。

有了这些点了,我们想到把他们连起来,不就是现成的笔画了吗,但是在虚空中一划可是不会产生任何线条的,你需要一个载体把你的笔画记录下来,我们这边就使用canvas画布用来当我们的背景板。好,开始绘制,

ctx.beginPath();

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.stroke();

从记录下的第一个点开始,移动到下一个点,然后连线,一道笔迹就这样完成了。

二、从初步实现到看起来像

但是说实在,这样子画出来的东西真的有人会觉得是可以拿来代替手写的签名笔迹嘛,我的笔锋呢,我的粗细变化呢,我的笔划转折曲线呢,有人可能会把字写成粗细从头到尾全一样,没有曲线只有各种突变的直线首尾相连的样式吗? 用电脑绘制来模拟笔迹最大的问题,线条缺乏转折过度和粗细变化,尖锐的折角和完全一样粗细的线条肯定不是我们最终追求的。

在纸上,我们控制线条的粗细无非就是减轻我们下笔的力道和提高运笔的速度,那么在浏览器屏幕上我们也是同样的操作。每个点位都记录下了轨迹的产生时间,两个点之间的时间差和距离差拿到手,我们就知道这一道笔划究竟是重运笔还是轻轻划过。具体的笔划粗细可以由自己的需求出发设定,总得原则就是快的细,慢的粗,当然,如果再讲究一点,每段线条之间的粗细还存在过渡效果,你可以保存一下上一段线条的粗细,然后按照比例添加到下一段线条的线宽中。

var distance = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1))

var time = timeStamp2 - timeStamp1

var width = lastWidth*1/3 + maxWidth*distance/time*2/3

线条的转折变化就不是前后两点能搞定的了,得引入再前面一个点,三个点的位置变化计算出笔迹的转折曲度,这里我们使用二阶贝塞尔曲线进行轨迹拟合,你要再愿意,再引入一个记录点用三阶贝塞尔曲线拟合也可以,但是大部分人在浏览器屏幕上的书写没有精细到这种程度,不需要做这么复杂的操作。

这里我分享一下我个人操作的一个小技巧,在笔迹的初始点和第二点绘制的时候,由于没有前一个点做曲线拟合,这一段可以用粗细不变的练线代替,可以歪打正着的产生一种书写顿笔的效果。

三、使用场景结合

在永中dcs这个产品中,我们可以直接在线预览各种word、ppt之类的办公文件,省去了我们还要特意安装各种办公软件的困扰,一个浏览器,就能比较完美的在线预览我们的办公文件,这个时候,如果还能写写画画,给我们的文档在线添加一些手绘笔记就太好了。

不需要安装其他复杂的程序插件,直接在我们的转换预览页面里添加一个透明的书写板,然后就可以写出效果很好的手写笔记了,真是简单又方便,写完的笔迹可以当一张很简单的图片插入到在线预览的原文档里,又省去了用户安装专业办公软件的麻烦。

永中dcs实现浏览器上面的手绘效果的更多相关文章

  1. 永中DCS文档转换服务其它产品对比

    一.利用DCOM配置直接操作Office文件 作用:读取文件内容,导出Html文件 优势:免费 劣势:1.服务器上必须安装Office软件 2.配置麻烦,正如微软所说,读取Office不是这么干的. ...

  2. 永中DCS再添喜讯:顺利签约海信集团

    近日,永中DCS与海信集团一起携手,共创文档在线预览新篇章.出于对永中DCS文档在线预览产品的品质与服务的信赖,海信集团选择永中DCS为其提供文档在线预览技术支持,助力移动化办公(EHR系统)发展,提 ...

  3. Python——图像手绘效果

    1.图像的RGB色彩模式 PIL PIL, Python Image Library PIL库是一个具有强大图像处理能力的第三方库 在命令行下的安装方法: pip install pillow fro ...

  4. 使用numpy和PIL实现图像的手绘效果

    输入 输出 代码如下 图像的手绘效果的实现 from PIL import Image import numpy as np a = np.array(Image.open("index.j ...

  5. 在Eclipse中设置Java类上面的注释(包含作者、日期等)

    希望在Eclipse中,让Java类上面的注释像下面这样,改如何设置呢? 在Eclipse中,点击菜单中的Window-->Preferences,打开如下窗口:

  6. Html设置问题(设置浏览器上面的图标,移动设备上面页面保存为图标)

    最近开发了一个新的项目,项目完成之后:要求把页面在移动设备上面保存为图标,通过图标直接进入系统入口(这样看着就想APP一样):刚开始通过百度直接设置了,发现有两个问题,第一.图标直接是页面的截图:第二 ...

  7. python中如何给散点图上面的特定点做标记

    今天想在散点图的某些特定的点外面画圆圈标记,从下面的文章找到一些灵感,只要在原来的散点图上面给指点添加相应的标志,设置其透明度就可以实现该想法. 顺便复习下散点图的用法. 大家平时为了直观地显示数据的 ...

  8. eclipse上修改js后,浏览器上还是出现原来效果的解决方法

    废话不多说,直接上方法: 1.最简单的是清除浏览器缓存.2.换个浏览器试试.3.修改js文件名,换成别的名称,再引用.4.重启eclipse.5.重启电脑.

  9. Python中使用cutecharts实现简单的手绘风格的图表

    场景 效果 cutecharts的Github: https://github.com/chenjiandongx/cutecharts 注: 博客: https://blog.csdn.net/ba ...

随机推荐

  1. MySQL深层理解,执行流程

    MySQL是一个关系型数据库,关联的数据保存在不同的表中,增加了数据操作的灵活性. 执行流程 MySQL是一个单进程服务,每一个请求用线程来响应, 流程: 1,客户请求,服务器开辟一个线程响应用户. ...

  2. 汇编LED实验

    汇编语言点亮LED 拿到一款全新的芯片,第一个要做的事情的就是驱动其 GPIO,控制其 GPIO 输出高低电平. GPIO口是IO口的一个功能之一. 一.接下来的步骤离不开芯片手册: 1.使能所有时钟 ...

  3. spring整合mybatis — 更新完毕

    1.准备工作 -- 导入依赖 <dependency> <groupId>org.springframework</groupId> <artifactId& ...

  4. HDFS初探之旅(二)

    6.HDFS API详解 Hadoop中关于文件操作类疾病上全部在"org.apache.hadoop.fs"包中,这些API能够支持的操作包含:打开文件.读写文件.删除文件等. ...

  5. mysql 5.7 压缩包安装教程

    前言 :  避免之前装的MySQL影响 首先进入dos窗口执行 sc delete mysql      删除已有的mysql服务 (一) 下载MySQL5.7 版本压缩包 网址 https://de ...

  6. mybatis-插件开发

    在Executor.StatementHandler.parameterHandler.resultSetHandler创建的时候都有一步这样的操作xxxHandler=interceptorChai ...

  7. 【Java多线程】线程池-ThreadPoolExecutor

    ThreadPoolExecutor提供了四个构造方法: 我们以最后一个构造方法(参数最多的那个),对其参数进行解释: public ThreadPoolExecutor(int corePoolSi ...

  8. 使用Lock接口来解决线程安全的问题

    package cn.itcast.demo16.Demo09.Lock;import java.util.concurrent.locks.Lock;import java.util.concurr ...

  9. java配置文件的使用 —— 设置一个类为单例模式

    阅读本文章前建议先阅读:java通过JDBC访问sqlserver数据库 一.使用原因:通过JDBC连接数据库时有时会需要连接不同的数据库,而jar包.连接url.用户名和密码等都是写定在程序中,不便 ...

  10. 【Matlab】find函数用法

    find(A):返回向量中非零元素的位置 注意返回的是位置的脚标 //类似python,还是很好用的 如果是二维矩阵,是先横行后列的 b=find(a),a是一个矩阵,查询非零元素的位置 如果X是一个 ...