ITman彪叔 - 博客园

canvas绘制图像轮廓效果

摘要：在2d图形可视化开发中，经常要绘制对象的选中效果。一般来说，表达对象选中可以使用边框，轮廓或者发光的效果。发光的效果，可以使用canvas的阴影功能，比较容易实现，此处不在赘述。绘制边框绘制边框是最容易实现的效果，比如下面的图片要绘制边框，只需要使用strokeRect的方式即可。效果如下阅读全文

posted @ 2021-03-31 15:23 ITman彪叔阅读(820) 评论(0) 推荐(0) 编辑

三维场景中常用的路径动画

摘要：三维场景中常用的路径动画前言在三维场景中，除了用逼近真实的模型代表现实中的设备、标识物外，通常还会使用一些动画来表示模型在现实中一些行为和作用。常见的动画比如路径动画、旋转动画、发光动画、流动动画等。本文将为大家介绍几种常用的路径动画。首先，最简单的自然是直线路径动画。直线路径动画比如以下场阅读全文

posted @ 2021-02-22 12:16 ITman彪叔阅读(690) 评论(0) 推荐(2) 编辑

三维组态部件动画解决方案

摘要：三维组态部件动画解决方案前言最近做了一个制冷系统的三维组态监控系统。大致的效果如下图所示：其中涉及到的设备有冷却塔、水泵、螺杆机、离心机、分水器（集水器）、阀门，以及管路。其中冷却塔，水泵，螺杆机，离心机都有停机/开机状态，开机状态下要有叶轮转动效果。因此我们需要给这几种模型，在开机状态阅读全文

posted @ 2021-01-25 11:10 ITman彪叔阅读(416) 评论(0) 推荐(0) 编辑

canvas多重阴影发光效果

摘要： canvas多重阴影发光效果前言在一个项目中，客户提了一个发光的效果，效果图如下：阴影有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。比如 ctx.shadowColor 阅读全文

posted @ 2021-01-18 18:19 ITman彪叔阅读(807) 评论(0) 推荐(0) 编辑

智慧园区可视化设计思路

摘要：智慧园区可视化设计思路前言随着物联网技术的不断发展，推动了园区的智能化管理与服务不断升级。科技的进步激发市场诉求，智能化园区的市场规模也越来越大。在经济快速发展和政府政策的推动下，伴随着国内智慧城市建设步伐的加快，园区规划建设整体性越来越强，更加注重各种基础配套设施，以更好的服务促进高新产业的阅读全文

posted @ 2021-01-09 13:59 ITman彪叔阅读(444) 评论(0) 推荐(0) 编辑

webgl智慧楼宇发光系列之线性采样下高斯模糊

摘要： webgl智慧楼宇发光系列之线性采样下高斯模糊前面一篇文章 <webgl智慧楼宇发光效果算法系列之高斯模糊>, 我们知道了高斯模糊的本质原理，就是对每个像素，按照正态分布的权重去获取周边像素的值进行平均，是一种卷积操作。同时我们可以指定周边像素的数量，比如可以是3X3，或者5X5，通用的表达就阅读全文

posted @ 2020-12-28 16:14 ITman彪叔阅读(179) 评论(0) 推荐(0) 编辑

canvas可视化效果之内阴影效果

摘要： canvas可视化效果之内阴影效果楔子在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。可以参考之前的一篇文章《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》效果图中的轨道，就同时存在外发光和内发光效果的效果。外发光效果我们知道外发光效果是很容易实现的，直接通过设阅读全文

posted @ 2020-12-22 10:13 ITman彪叔阅读(909) 评论(1) 推荐(0) 编辑

事件代理功能点分享

摘要：事件代理功能点分享看过前面几篇文章的读者相信也应该有所了解了，我们借助于团队内部开发的编辑器实现了很多成功的项目案例，已经多次看到我们点击一个文本、一个按钮等等...去弹出一个表格之类的交互，有些同学难免有些好奇我们是如何实现在 canvas 图形对象上实现事件派发和监听的，接下来听我娓娓道来。阅读全文

posted @ 2020-12-18 14:54 ITman彪叔阅读(265) 评论(0) 推荐(1) 编辑

图表绘制之RepeatNode的妙用

摘要：图表绘制之RepeatNode的妙用前言最近接到许多大屏项目，其中有一个智慧大楼的项目，大致是由3d场景+数据图表组成，需要能监控实时数据、安防监控、出入统计以及消防安全等功能如下图但是在开发项目的时候碰到一个难题，设计稿中有一个图表类的模块，如下图。是一个由多个递增的矩形拼接而成的类似柱状阅读全文

posted @ 2020-12-18 14:46 ITman彪叔阅读(123) 评论(0) 推荐(0) 编辑

利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

摘要：利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果前言近日公司接到一个轨道系统的需求，需要将地铁线路及列车实时位置展示在大屏上。既然是大屏项目，那视觉效果当然是第一重点，咱们可以先来看看项目完成后的效果图。可以看到中间线路里轨道的效果是非常炫酷的，那么本文的主要内容就是讲解如何在can 阅读全文

posted @ 2020-12-05 17:54 ITman彪叔阅读(736) 评论(0) 推荐(0) 编辑