描点原笔迹 web 解析显示技术

来源：互联网发布：淘宝代运营诈骗怎么办编辑：程序博客网时间：2024/05/20 18:16

利用 html5 的canvas能实现文本上显示原笔迹首先原笔迹必须是一系列的描点，

这些点的特征的结构是， N个点组成笔划吗N个笔划组成一个字例如

point.js文件

var point = [  [        [            "175.625:57.632813",            "175.625:60.87802",            "175.625:65.93036",            "175.625:75.62009",            "175.625:90.73721",            "174.68073:109.36893",            "172.44385:129.04236",            "169.52151:150.65607",            "166.54193:171.35876",            "164.75934:190.54639",            "163.53656:206.51831",            "162.58234:223.50244",            "162.11154:239.67389",            "161.5625:253.94531",            "161.25:265.54364",            "161.06082:276.44476",            "160.9375:286.49054",            "160.9375:295.25464",            "161.92334:301.2641",            "162.65527:304.79657",            "164.6875:308.1211",            "164.6875:308.1211"        ]    ],    [        [            "211.5625:104.50781",            "213.39026:100.660614",            "222.39087:93.247894",            "236.27014:86.43512",            "254.64633:82.34967",            "276.48703:81.54175",            "295.65634:83.87268",            "312.76923:88.45096",            "324.68903:95.496826",            "333.32703:105.38547",            "336.25:119.960175",            "332.37775:141.42047",            "319.29712:169.13025",            "302.69257:197.17572",            "284.8603:222.12512",            "267.18628:243.98682",            "253.20853:259.35828",            "241.8558:270.7683",            "235.25412:276.95227",            "232.24524:280.02155",            "232.68735:281.3437",            "237.26474:281.0901",            "251.44858:276.30164",            "272.3015:267.76147",            "296.75482:256.9486",            "322.9429:245.78064",            "345.88837:236.81409",            "363.77072:229.77716",            "376.38977:225.4638",            "384.45917:223.17517",            "389.21875:222.86719",            "389.21875:222.86719"        ]    ]]

之后利用canvas的缩放及横移技术将每个字画上去

<html><head><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="l30.js"></script><script type="text/javascript" src="liangpai.js"></script><script type="text/javascript" src="point.js"></script></head><body>//广场的正（中央）飘扬着鲜艳的（五星红旗）！广场的正<span class="blank_canvas"><img src="这是一个显示下划线的图片" /></span>飘扬着鲜艳的<span class="blank_canvas"><img src="这是一个显示下划线的图片" /></span><script type="text/javascript">//横向function getLateralOffset(prevWordPoint){var prevWordXPoints = getWordXPoints(prevWordPoint);var lOffset = parseInt(prevWordXPoints[prevWordXPoints.length - 1])return lOffset;}//获取一个字的所有横向坐标function getWordXPoints(wordPoint){var wordXPoints = [];for(var i = 0; i < wordPoint.length; i++){for (var j = 0; j < wordPoint[i].length; j++){wordXPoints.push(wordPoint[i][j].split(":")[0]);}}wordXPoints.sort();return wordXPoints;}/** _point 所有的字的苗描点的集合* offset 当前第canvas容器的顺序* _h 高度* _w 宽度* _scale 缩放比例*/function draw(_c, _point, _scale){var ctx = _c.getContext("2d");ctx.scale(_scale,_scale);ctx.beginPath();var point = {};var _loffset = 0;for (var k = 0; k < _point.length; k++){//横向移动 应该是从上一个字的横坐标最大位置开始 //获取上个字的横向最大坐标if (k > 0){_loffset = getLateralOffset(_point[k-1]) - getLateralOffset(_point[k-1]) * _scale;ctx.translate(_loffset, 0);}//画出wordfor (var i = 0; i < _point[k].length; i++){for (var m = 0; m < _point[k][i].length; m++){point = _point[k][i][m].split(":");if (m == 0){ctx.moveTo(point[0], point[1]);}else{ctx.lineTo(point[0], point[1]);}} }ctx.strokeStyle="black";ctx.lineWidth = 10;ctx.stroke();}}function _getCtx(_h, _w, offset){var _c=$(".blank_canvas")[offset];$(_c).attr("style", "padding: 1px;border-bottom: 1px solid black;");$(_c).html('<canvas class="myCanvas" height="' + _h + 'px" width="' + _w + 'px"></canvas>');var c = document.getElementsByClassName("myCanvas")[offset];return c;}var _scale = 0.05;var _c = _getCtx(18, 900, 0);draw(_c, l30, _scale);</script></body></html>

参数说明: _point:所有字的描点的集合 offset当前第几个画布, _h画布高度, _w画布宽度, _scale字体缩放大小

1 0

描点 原笔迹 web 解析 显示 技术

描点原笔迹 web 解析显示技术