SuperMap iClient3D for WebGL Canvas二彩球动画
前言
一、下载动画模板
下载动画模板后,会得到一个html文件和附带的脚本文件和样式文件,直接运行,html页面就会出现动画了
二、WebGL对接
1.在项目里创建div,并创建画布对象
<div id="toolbar" class="param-container tool-bar">
//创建画布对象
<canvas id="myCanvas"></canvas>
</div>
2.将执行动画的其它代码拷贝到标签中,运行页面,效果如下:
3.通过entity创建实体面对象,先不给材质,因为后续会将canvas动画作为材质
var colorBall = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
116.38589023755107, 39.99395534891072, 20,
116.3870772324375, 39.99398849759101, 20,
116.38703644447938, 39.99482961445326, 20,
116.38589703087074, 39.994816365544665, 20
]),//拾取的面节点位置
perPositionHeight: true, //使用每个位置的高度
},
});
4.创建函数,将canvas运行动画代码全部拷贝到函数体中进行封装
//灯的参数
var linghter = {
x: 400,
y: 270,
r: 50,
vx: 5,
vy: 4
};
//封装运行函数
function writeBallOnCanvas() {
var cns = document.createElement('canvas'); //创建canvas标签
var cxt = cns.getContext("2d");
cns.width = 500;
cns.height = 500;
//定义一个灯
// 清除画布
cxt.clearRect(0, 0, 500, 500);
//当前位置填充黑色的矩形框
cxt.fillStyle = "rgba(255, 255, 0, 0)";
cxt.fillRect(0, 0, 500, 500);
//存储状态
cxt.save();
//绘制一个圆
cxt.beginPath();
cxt.arc(linghter.x, linghter.y, linghter.r, 0, Math.PI * 2);
cxt.fillStyle = 'yellow';
cxt.fill();
cxt.closePath();
//剪切 --画布中在该区域的数据才会被显示
cxt.clip();
//恢复
cxt.restore();
linghter.x = linghter.vx;
linghter.y = linghter.vy;
//判断临界点
if (linghter.x < linghter.r || linghter.x > (500 - linghter.r)) {
linghter.vx *= -1;
}
//y方向
if (linghter.y < linghter.r || linghter.y > (500 - linghter.r)) {
//反向
linghter.vy *= -1;
}
return cns
}
5.为实体面创建材质,并通过Callback监听函数变化,上一步每次函数变化,都会返回一个新的canvas对象,对应新的图片,将新的图片赋予实体面
material: new Cesium.ImageMaterialProperty({
image: new Cesium.CallbackProperty(writeBallOnCanvas, false),//回调canvas
transparent: true
}),
了解原理后,就可以做更炫酷的效果了
完整demo地址:
链接:https://pan.百度.com/s/1UIdFvVxx_9KL3LYLR4qFDw
提取码:6655
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhheifkc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22