WebGL实现LED电子广告牌字幕上下左右移动特效

作者：nannan

前言

现实中LED电子广告牌的作用是可以动态显示一些促销活动等，不用浪费打印费用。那些纸质的广告牌需要更换，而电子屏电脑端修改就行了。咱们再来看看项目中构建的实体场景，有很多放置广告牌的地方，比如公交站台、高速公路LED显示屏、或者建筑上的显示屏等。模型建模贴纹理最终生成缓存发布服务，这些都是静态的，达不到动态效果。如果想更换里面广告牌的字幕内容，换模型材质这种方法工作量较大，不推荐。下面我为大家详细介绍用代码怎么实现LED电子广告牌字幕上下左右移动特效。

一、实现思路

1.获取广告牌的面节点坐标，构建实体面；
2.Canvas绘制图片和文本，文字可动态移动；
3.Canvas传入面中作为面材质展示信息。

二、实现代码

1.获取广告牌的面节点坐标，构建实体面

通过范例http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#pickPosition拾取当前场景LED电子广告牌的面节点坐标，构建实体面。

var PicPolygon = viewer.entities.add({
    
    
	polygon: {
    
    
		hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
		        116.38052888784802, 39.98764626341058, 121.1667,
				116.38052948390695, 39.98764629006779, 140.9782,
				116.3808956730464, 39.987657145520835, 140.9782,
				116.3808964575248, 39.98765711359566, 121.2360
			]),//拾取的面节点位置
		material: //先为空，后面介绍
		perPositionHeight: true,//使用每个位置的高度
		}
    });

2.Canvas绘制图片和文本，文字可动态移动

创建canvas标签，设置canvas的画布大小，设置文本字体样式大小以及颜色，将图片和文字放置在画布上。下面代码中tx表示字体位置横坐标，ty表示纵坐标。tx随着每次回调数值增大实现左右移动。
—fillText(text,x,y) - 在 canvas 上绘制实心的文本
—strokeText(text,x,y) - 在 canvas 上绘制空心的文本

function drawCanvas() {
    
    
	var canvas = document.createElement('canvas'); //创建canvas标签
	var ctx = canvas.getContext('2d');
	canvas.width = 440;
	canvas.height = 440;
	ctx.font = "80px Arial"; //设置或返回文本内容的当前字体属性
	ctx.fillStyle = "rgb(255,1,1)";

	var image = new Image();
	image.src = './images/a.jpg';
	ctx.drawImage(image, 10, 10);
	if (tx < 400) {
    
    
		ctx.fillText(text, tx, ty);
		tx = tx + 1;
	} else {
    
    
		tx = 0;
	}
	return canvas;
}

实现字幕上下移动只需要tx保持不变，随着每次回调改变ty变量的值即可，这里代码不做赘述。

3.Canvas传入面中作为面材质展示信息

主要用ImageMaterialProperty方法来将Canvas作为image材质传入面中，CallbackProperty一直循环调用Canvas，实现动态效果。

new Cesium.ImageMaterialProperty({
    
    
		image: new Cesium.CallbackProperty(drawCanvas, false),//回调canvas
		transparent: true
	}),

4.替换LED电子广告牌字幕

替换字幕只需要更换canvas对象里的文本即可

$("#search").click(function() {
    
    
	text = document.getElementById('labeltext').value;
});