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

浏览数：25 / 时间：2015年06月09日

利用 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="point.js"></script>
</head>

<body>
	广场的正<span style="padding: 1px;border-bottom: 1px solid gainsboro;" class="blank_canvas"><img src="file:///C:/Users/dell/Desktop/umeditor1_2_2-utf8-php/themes/default/images/_03.png" /></span>飘扬着鲜艳的五星红旗！
	<span style="padding: 1px;border-bottom: 1px solid gainsboro;" class="blank_canvas"><img src="file:///C:/Users/dell/Desktop/umeditor1_2_2-utf8-php/themes/default/images/_03.png" /></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;
		}


		
		function draw(_point, offset, _h, _w,_scale)
		{
			var _c=$(".blank_canvas")[offset];
			$(_c).html('<canvas class="myCanvas" height="' + _h + 'px" width="' + _w + 'px"></canvas>');
			var c = document.getElementsByClassName("myCanvas")[offset];
			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);
				}

				//画出word
				for (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();		
			}
		}
		_scale = 0.05;
		draw(l30, 0, 18, 900, _scale);


	</script>
</body>
</html>

方法：