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),//回调canvastransparent: true}),

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

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

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

三、效果显示

1.LED电子广告牌字幕左右移动特效

2.LED电子广告牌字幕变化