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

最新推荐文章于 2018-12-25 11:01:01 发布

看世界-Neilson

最新推荐文章于 2018-12-25 11:01:01 发布

阅读量1.2k

点赞数 2

分类专栏： Js 文章标签： web 原笔迹显示

本文链接：https://blog.csdn.net/qinglianluan/article/details/42028831

版权

Js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

利用 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);
		}


		//画出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();
	}
}


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字体缩放大小