作者: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;
});