永中dcs实现浏览器上面的手绘效果
永中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实现浏览器上面的手绘效果的更多相关文章
- 永中DCS文档转换服务其它产品对比
一.利用DCOM配置直接操作Office文件 作用:读取文件内容,导出Html文件 优势:免费 劣势:1.服务器上必须安装Office软件 2.配置麻烦,正如微软所说,读取Office不是这么干的. ...
- 永中DCS再添喜讯:顺利签约海信集团
近日,永中DCS与海信集团一起携手,共创文档在线预览新篇章.出于对永中DCS文档在线预览产品的品质与服务的信赖,海信集团选择永中DCS为其提供文档在线预览技术支持,助力移动化办公(EHR系统)发展,提 ...
- Python——图像手绘效果
1.图像的RGB色彩模式 PIL PIL, Python Image Library PIL库是一个具有强大图像处理能力的第三方库 在命令行下的安装方法: pip install pillow fro ...
- 使用numpy和PIL实现图像的手绘效果
输入 输出 代码如下 图像的手绘效果的实现 from PIL import Image import numpy as np a = np.array(Image.open("index.j ...
- 在Eclipse中设置Java类上面的注释(包含作者、日期等)
希望在Eclipse中,让Java类上面的注释像下面这样,改如何设置呢? 在Eclipse中,点击菜单中的Window-->Preferences,打开如下窗口:
- Html设置问题(设置浏览器上面的图标,移动设备上面页面保存为图标)
最近开发了一个新的项目,项目完成之后:要求把页面在移动设备上面保存为图标,通过图标直接进入系统入口(这样看着就想APP一样):刚开始通过百度直接设置了,发现有两个问题,第一.图标直接是页面的截图:第二 ...
- python中如何给散点图上面的特定点做标记
今天想在散点图的某些特定的点外面画圆圈标记,从下面的文章找到一些灵感,只要在原来的散点图上面给指点添加相应的标志,设置其透明度就可以实现该想法. 顺便复习下散点图的用法. 大家平时为了直观地显示数据的 ...
- eclipse上修改js后,浏览器上还是出现原来效果的解决方法
废话不多说,直接上方法: 1.最简单的是清除浏览器缓存.2.换个浏览器试试.3.修改js文件名,换成别的名称,再引用.4.重启eclipse.5.重启电脑.
- Python中使用cutecharts实现简单的手绘风格的图表
场景 效果 cutecharts的Github: https://github.com/chenjiandongx/cutecharts 注: 博客: https://blog.csdn.net/ba ...
随机推荐
- JAVA中null,"",equals,==相互之间使用详解
"equals" 与 "==" "equals"只是比较值是否相同 而"=="则是比较两个变量是不是同一个变量,也应时是 ...
- php代码审计入门前必看
首先先介绍什么是代码审计? 代码审计:是指针对源代码进行检查,寻找代码中的bug,这是一项需要多方面技能的技术 包括:对编程的掌握,漏洞形成原理的理解,系统和中间件等的熟悉 2.为什么要进行代码审计, ...
- 日常Java 2021/11/6
Java多线程编程 Java给多线程编程提供了内置的支持.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个钱程,每条线程并行执行不同的任务.多线程是多任务的一种特别的形式,但多线程使用 ...
- Redis6 新特性
Redis6新特性 ACL安全策略 ACL(access control list): 访问控制列表,可以设置多个用户,并且给每个用户单独设置命令权限和数据权限 default用户和使用require ...
- React 16.13.1触发两次render
一段很普通的代码,出发了两次render import React, { useState, useEffect } from 'react' const MouseTracker: React.FC ...
- 零基础学习java------30---------wordCount案例(涉及到第三种多线程callable)
知识补充:多线程的第三种方式 来源:http://www.threadworld.cn/archives/39.html 创建线程的两种方式,一种是直接继承Thread,另外一种就是实现Runnabl ...
- IDEA 超实用使用技巧分享
前言 工欲善其事 必先利其器 最近受部门的邀请,给入职新人统一培训IDEA,发现有很多新人虽然日常开发使用的是IDEA,但是还是很多好用的技巧没有用到,只是用到一些基本的功能,蛮浪费IDEA这个优 ...
- Java设计模式—Proxy动态代理模式
代理:设计模式 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委托类预处理消息,过滤消息并转发消息,以及进行消息被委托类执行后的后续处理. 图 1. 代 ...
- js 时间戳转换为年月日时分秒的格式
<script type="text/javascript"> var strDate = ''; $(function(){ // 获取时间戳 var nowDate ...
- Ajax请求($.ajax()为例)中data属性传参数的形式
首先定义一个form表单: <form id="login" > <input name="user" type="text&quo ...