前端专栏
关注
分享
扫一扫
文章平均质量分 68
前端专栏，Nodejs，各种前端框架，javascript进阶，webgl，大数据可视化。
netcy
这个作者很懒，什么都没留下…
展开
-
【无标题】
在开发数字孪生应用程序的时候，除了三维场景展示之外，也需要开发丰富和酷炫的2D页面。使用UE4的UMG开发图表显得比较笨拙。而通过Web插件允许开发者创建丰富的基于Web HTML5的用户界面，它由内置在UE4中的web浏览器提供支持，包括对Windows、Mac、Linux、Android和iOS的支持。基于这种插件技术，普通的前端开发人员也可以开发UE4界面上丰富的2d页面效果。下面分享我们UE4做的数字孪生的几个案例，其中的2d页面是通过Vue结合html5技术和echart图表插件进行开发的：数据已原创 2022-12-05 16:36:40 · 736 阅读 · 0 评论 -
UE导入FBX、GLTF模型
本文主要介绍了UE如何导入FBX模型的两种方式，不足之处还多见谅。如果你有好的经验，也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。原创 2022-08-27 18:26:29 · 7312 阅读 · 0 评论 -
使用SVG做模型贴图的思路
大多数情况下，三维模型使用PNG，JPG作为模型的贴图，当然为了性能优化，有时候也会使用压缩贴图来提高渲染效率和较少GPU压力。今天提供一种新的思路，使用SVG作为模型的贴图，可以达到动态调整图片精度的效果。使用svg作为贴图的思路，有两种。#直接作为贴图直接使用贴图，其实和png jpeg的图片没有多少差别，加载的贴图效果，最终也会比 较模糊。 大致代码如下： var cube2 = new mono.Cube(105 * 10,1094 * 10,1);原创 2021-11-20 14:49:43 · 3637 阅读 · 0 评论 -
智能制造芯片车间生产线可视化
前言随着《中国制造2025》的提出，制造业迎来了全新的发展机遇。更多的企业将制造业信息化技术进行广泛的应用，如 MES 系统、数字孪生以及生产管理可视化等技术的研究应用，已经成为社会各界共同关注的热点。21世纪是光电子的时代，全球性的市场增长为光电子的发展提供了巨大的空间，“武汉·中国光谷”的建设又为各个高新企业的发展提供了良好的外部环境，使得高新产业蓬勃发展。本文将以芯片生产流水线车间为例，介绍TWaver丰富的 2D、3D 组态进行可视化数字孪生，搭建出一个芯片生产线可视化系统。打造集智能原创 2021-06-25 21:14:22 · 299 阅读 · 1 评论 -
EasyBPM打印模板的缓存问题
业务平台EasyBPM（易实管理软件）有一个功能是模板打印的功能。就是可以使用一个docx格式的模板，输出一个docx格式的单据的文档。打印的逻辑是先从服务端获取模板，如果没有对应的模板，就提示先上传模板：遇到的问题是，按照提示上传模板之后，再次打印依然会报没有模板。缓存的问题通过思考发现，可能的原因是因为使用了缓存。 后端使用Node + Express进行静态资源的发布。 通过Express发布的资源，默认会开启缓存。所以当第一次去获取模板资源的时候，由于此时没有对应的模板，此时会跳转到原创 2021-05-23 12:23:13 · 181 阅读 · 0 评论 -
canvas绘制折线路径动画
最近有读者加我微信咨询这个问题：其中的效果是一个折线路径动画效果，如下图所示：要实现以上路径动画，一般可以使用svg的动画功能。或者使用canvas绘制，结合路径数学计算来实现。如果用canvas来绘制，其中的难点在于：需要计算子路径，这块计算比较复杂。（当然是可以实现的）渐变的计算， 从图中可以看出，动画的子路径是有渐变效果的，如果要分段计算渐变也很复杂。本文介绍一种思路，使用clip方法，动态移动clip的区域，来达到近似的效果。具体怎么做。绘制灰色路径绘制路径的代码比较简单，此原创 2021-05-09 10:57:39 · 1616 阅读 · 1 评论 -
canvas绘制虚线图表
最近有读者加我微信咨询这个问题，如下图所示：要实现的效果如下：其实难度不大，但是考虑一些人员对于canvas不熟悉，还是简单的介绍下。其实该图表，就是一个圆圈外面在套一个圆弧的效果， 主要的难点在于不知道怎么绘制圆圈的虚线效果。 其实canvas本身已经支持了虚线的绘制，就是一个api调用的事情，api是setLineDash。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charse原创 2021-05-08 15:26:41 · 451 阅读 · 0 评论 -
BootstrapTable 行内编辑解决方案：bootstrap-table-editor
最近开发的一个业务平台，是一个低代码业务平台。其中用到的了bootstrap-table组件。但是bootstrap-table自身不带编辑功能。通过搜索发现，网上大部分的解决方案都是使用x-editable, x-editable是一个通用的编辑能力组件，可以给任何元素都加上编辑能力，功能强大，可以编辑文本，数字，选项，时间等等各种类型的数据。但是x-editable有一个比较不好的地方，x-editable的编辑模式是弹框的形式，如下图所示：我希望的是直接在单元格进行编辑的行内编辑，所以感觉x-原创 2021-05-07 11:31:58 · 3669 阅读 · 6 评论 -
canvas绘制图像轮廓效果
在2d图形可视化开发中，经常要绘制对象的选中效果。 一般来说，表达对象选中可以使用边框，轮廓或者发光的效果。 发光的效果，可以使用canvas的阴影功能，比较容易实现，此处不在赘述。绘制边框绘制边框是最容易实现的效果，比如下面的图片要绘制边框，只需要使用strokeRect的方式即可。效果如下图所示：这个代码也很简单，如下所示： ctx1.strokeStyle = "red"; ctx1.lineWidth = 2; ctx1.drawImage(im原创 2021-03-31 15:22:26 · 1745 阅读 · 3 评论 -
三维场景中常用的路径动画
三维场景中常用的路径动画前言在三维场景中，除了用逼近真实的模型代表现实中的设备、标识物外，通常还会使用一些动画来表示模型在现实中一些行为和作用。常见的动画比如路径动画、旋转动画、发光动画、流动动画等。本文将为大家介绍几种常用的路径动画。首先，最简单的自然是直线路径动画。直线路径动画比如以下场景，地铁需要从上一站A驶入当前站B，在此过程中，我们将AB组合成一条路径(假设路径为直线)，使用动画，不停的设置地铁(模型)的在路径上的位置，就可以实现地铁从A站-B站的动画过程。const points =原创 2021-02-22 12:14:39 · 663 阅读 · 0 评论 -
三维组态部件动画解决方案
前言最近做了一个制冷系统的三维组态监控系统。大致的效果如下图所示：其中涉及到的设备有冷却塔、水泵、螺杆机、离心机 、分水器（集水器）、阀门，以及管路。其中冷却塔，水泵，螺杆机，离心机都有停机/开机状态，开机状态下要有叶轮转动效果。因此我们需要给这几种模型，在开机状态下做叶轮转动的动画。分离模型发方案我们知道一般模型的动画主要是模型的位置，旋转角度等发生变化。位置旋转角度的变化是比较容易实现的一种动画。直接调用模型的setPosition方法和setRotation方法即可。因此要做叶轮的旋转原创 2021-01-25 11:08:51 · 1102 阅读 · 0 评论 -
canvas多重阴影发光效果
canvas多重阴影发光效果前言在一个项目中，客户提了一个发光的效果，效果图如下：阴影有的人可能会说，这个用阴影其实就可以实现。但是从图中可以看出，是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。比如ctx.shadowColor = 'rgba(255,0,0,1)'; ctx.shadowBlur =10; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10; ctx.fil原创 2021-01-18 18:18:16 · 3325 阅读 · 0 评论 -
webgl智慧楼宇发光系列之线性采样下高斯模糊
webgl智慧楼宇发光系列之线性采样下高斯模糊前面一篇文章 <webgl智慧楼宇发光效果算法系列之高斯模糊>, 我们知道了 高斯模糊的本质原理，就是对每个像素，按照正态分布的权重去获取周边像素的值进行平均，是一种卷积操作。同时我们可以指定周边像素的数量，比如可以是3X3，或者5X5，通用的表达就是N X N， 数字N通常称之为模糊半径，这在之前的文章的代码中有体现（uRadius）：uniform float uRadius;float gaussianPdf(in float x,原创 2020-12-28 16:13:00 · 329 阅读 · 0 评论 -
canvas可视化效果之内阴影效果
canvas可视化效果之内阴影效果楔子在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。 可以参考 之前的一篇文章 《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》效果图中的轨道，就同时存在外发光和内发光效果的效果。外发光效果我们知道外发光效果是很容易实现的，直接通过设置阴影效果即可达到。比如我们随便绘制一条线段，加上阴影效果，看起来就是外发光的效果： ctx.clearRect(0,0,canvas.width,canvas.height); ctx原创 2020-12-22 10:09:53 · 1966 阅读 · 2 评论 -
事件代理功能点分享
事件代理功能点分享看过前面几篇文章的读者相信也应该有所了解了，我们借助于团队内部开发的编辑器实现了很多成功的项目案例，已经多次看到我们点击一个文本、一个按钮等等…去弹出一个表格之类的交互，有些同学难免有些好奇我们是如何实现在 canvas 图形对象上实现事件派发和监听的，接下来听我娓娓道来。准备工作其实在实现事件代理对象之前，我实现过一个文本对象，就是在 canvas 上绘制出一个固定默认宽高的矩形，用户双击时可输入文字，它的实现可谓是非常简单。但是其中也有不容忽视的小细节需要注意。文本对象的实现原创 2020-12-18 14:52:51 · 156 阅读 · 0 评论 -
2020-12-05
利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果前言近日公司接到一个轨道系统的需求，需要将地铁线路及列车实时位置展示在大屏上。既然是大屏项目，那视觉效果当然是第一重点，咱们可以先来看看项目完成后的效果图。可以看到中间线路里轨道的效果是非常炫酷的，那么本文的主要内容就是讲解如何在canvas上绘制出这种效果。分析设计稿先看看设计稿中的轨道效果程序员解决问题时经常喜欢用到的方法是把一个大问题拆解为若干个小问题然后逐一处理，也就是分而治之，所以我在思考这个轨道效果的实现时，也是先考虑到将原创 2020-12-05 17:52:45 · 274 阅读 · 0 评论 -
webgl智慧楼宇发光效果算法系列之高斯模糊
webgl智慧楼宇发光效果算法系列之高斯模糊如果使用过PS之类的图像处理软件，相信对于模糊滤镜不会陌生，图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。在我们的智慧楼宇的项目中，要求对楼宇实现楼宇发光的效果。 比如如下图所示的简单楼宇效果：楼宇发光效果需要用的算法之一就是高斯模糊。高斯模糊简介高斯模糊算法是计算机图形学领域中一种使用广泛的技术, 是一种图像空间效果，用于对图像进行模糊处理，创建原始图像的柔和模糊版本。使用高斯模糊的效果，结合一些其他的算法，还可以产生发光，光晕，景深，热原创 2020-12-01 10:35:41 · 878 阅读 · 0 评论 -
可视化编辑器之数据源配置
随着国家近来几次重要会议开展以及落地。企业转型及可视化布控迎来热潮。所以一款能效力于管理层——运筹帷幄、省力于运维层——降低维护成本的可视化编辑器是很有必要的。关键在于，它很轻便。给大家展示一下最近一个竣工项目的效果图：该项目实现了企业核心指标的实时观测，以及整体布控。另外其还易于上手。并且是由编辑器与3D（数字孪生理念）联合完成。那么话不多说，言归正传。我将站在开发者角度，以项目为原型。通过系列文章，带领大家了解这款编辑器。**本篇主旨: 数据源配置编辑器针对不同主题设计了三个数据源原创 2020-11-30 15:18:35 · 580 阅读 · 0 评论 -
基于路径集合的三维动画链
目前数据信息可视化的发展趋势越来越快，纬度宽广、数量庞大、结构复杂的数据展示仅仅只依靠二维平面图表已经不能满足了。为了更加清晰，快速的认知和理解一份数据，构建基于现实的三维虚拟可视化效果，被广泛应用到各行业中，迅速成为信息数字化管理的重要组成部分。 三维场景还原了现实的虚拟效果，而各种各样的动画则赋予其更加饱满、灵动的视觉冲击。基于路径集合的三维动画链，它充实了场景中元素的动画效果，接下来我会具体介绍动画链的实现过程。1、配置路径数据此次示例中模型均采用gltf格式，以上图场景中小车为例原创 2020-11-26 10:33:43 · 251 阅读 · 0 评论 -
canvas绘制飞线效果
在我们做的可视化大屏项目中，经常会遇到飞线的效果。 在我们的大屏编辑器中，可以通过拖拽+配置参数的方式很快就能够实现。下面是我们使用大屏编辑器实现的一个项目效果：中间地图就有飞线的效果。抛开编辑器的快速实现不说，我们大致来说下canvas绘制飞线的大致原理。贝塞尔曲线飞线的路径主要是一个贝塞尔曲线，canvas绘制贝塞尔曲线比较容易。canvas支持绘制二次和三次，在本次示例中，主要还是绘制二次贝塞尔曲线为主。canvas中指定二次贝塞尔曲线路径的函数如下：ctx.quadraticCurveT原创 2020-11-10 16:55:51 · 1978 阅读 · 2 评论 -
拓扑/大屏/三维编辑器的设计与思考
从去年年初开始，我们团队内部就在做两个编辑器：3d编辑器 支持搭建3d场景。拓扑/大屏编辑器 支持搭建大屏/拓扑/组态场景。开发编辑器的主要目是为了提高团队内部项目的交付效率，目前 两个编辑器都引用到团队的相关项目中。当然，编辑器目前也支持和其他公司的项目合作。 下面是几个项目的示例图：中间是一个三维场景，使用三维编辑器编辑而成，周边是一些大屏元素，使用大屏编辑器编辑。和一般的大屏编辑器不同，我们的大屏编辑器不仅支持大屏元素的排布，也支持分层拓扑图，架构图，交通图等，以及组态功能。原创 2020-10-14 15:16:35 · 1328 阅读 · 1 评论 -
webgl实现径向模糊
径向模糊简介径向模糊，是一种从中心向外呈幅射状，逐渐模糊的效果。 因此径向模糊经常会产生一些中心的发散效果，在PS中同样也有径向模糊的滤镜效果。 径向模糊通常也称为变焦模糊。径向模糊（Radial Blur）可以给画面带来很好的速度感，是各类游戏中后处理的常客，也常用于Sun Shaft等后处理特效中作为光线投射（体积光）的模拟。在游戏中，常常使用径向模糊来模拟一些运动的动感效果。如鬼泣4中的场景切换特效，和一些技能打击特效；赛车游戏也尝用来模拟动感模糊，如狂野飙车，极品飞车等。 径向模糊还是实现体积光原创 2020-08-25 17:29:29 · 605 阅读 · 0 评论 -
通过canvas计算任意两个颜色的插值
通过canvas可以协助我们做很多颜色计算的辅助，比如颜色转换，渐变颜色计算。对于颜色转换，之前写过一篇文章：《通过canvas转换颜色为RGBA格式及性能问题》, 读者可以查阅该篇文章来了解。本文着重讲解渐变计算颜色的插值计算。计算任意两个颜色的插值实际应用中通常要计算两个颜色的之间插值结果，比如计算“red”和“green” 之间的插值。 比较通用的方法就是首先通过《通过canvas转换颜色为RGBA格式及性能问题》中提到的方法把颜色转换成RGBA格式，由于RGBA格式是都是数字的形式，可以直原创 2020-07-14 14:46:35 · 636 阅读 · 0 评论 -
Canvas绘制圆点线段
最近一个小伙遇到一个需求，客户需要绘制圆点样式的线条。 大致效果是这样的：## 思路一：计算并使用arc填充他自己实现了一种思路，然后咨询我有没有更好的思路。 先看看他的思路是如何实现的，大致代码如下：```// 绘制圆点线，原创 2020-06-09 15:07:31 · 1940 阅读 · 0 评论 -
搭建easy-mock数据模拟服务器
大家都知道，我们主要提供的是前端可视化研发的，包括2d拓扑可视化，2d电力，工业组态可视化，三维可视化，大屏可视化等。大约效果是长这个样子吧：所谓可视化，肯定需要有数据支撑，一般来说，后期都会和客户的数据服务进行对接。然而在开始开发的时候，一般都是开发人员自己模拟。很多时候一个项目的数据模拟也会占用不少的时间。数据模拟相信大家都有各自的办法。比如说，将 Mock 数据写在代码里利用请求拦截利用 Charles 等代理工具，将 URL Map 到本地文件上面这些方法虽然可以解决我们.原创 2020-05-12 14:34:43 · 1680 阅读 · 0 评论 -
钢铁冶炼工艺流程编辑可视化
项目背景前几天有客户打电话过来，说想了解我们公司的编辑可视化产品，最近在网上看到过我司编辑可视化的相关解决方案，感觉挺不错也想给自己的工业流程进行一个定制的编辑可视的管理平台。经过沟通，了解到该客户属于钢铁冶炼工业，想通过一个编辑可视化管理软件进行自己钢铁冶炼工艺业务流程的编辑和管理，提高产品竞争力，节省人力，物力，减少冶炼环节的故障。其中还提出需要有冶炼设备的实时监控信息；当设备出现故障或...原创 2020-03-05 13:45:01 · 1223 阅读 · 1 评论 -
高速公路监管系统大屏可视化
0x00 项目背景该项目用于高速公路监管。高速公路监管包括：高速公路的设备运行情况，设备维护情况，道路维护情况；交通流量分析，交通拥堵分析，拥堵溯源；事故分析，事件信息发布等。0x01设计图该项目目前主要是一个预演形式的项目，所以设计图层面主要还是用了客户提供的图片。 我们的设计团队参与的并不多。下面是客户的设计图纸：0x02 绘制公路公路的实际效果还是比较复杂的，比如公路上面有各种线...原创 2020-03-02 18:03:34 · 1095 阅读 · 0 评论 -
远程办公一段时间了，你(团队)进入状态没？
这场疫情打乱了所有人的节奏，让很多人期望的自由工作变成了现实，过上了穿着睡衣开视频会，躺床上撸猫回邮件的生活。 但是在家办公到底怎么样呢？在家远程办公和传统办公相比，有劣势也有优势。 远程办公的最大优势在于，可以解除物理的隔阂更加灵活的处理各种情况。 比如这次疫情，没法去公司办公，通过远程办公至少可以极大的减少损失。从2月3号开始，我们开始在家里面远程办公。 到现在为止，我们团队已经工作了快...原创 2020-02-29 16:04:18 · 1344 阅读 · 0 评论 -
大屏可视化之番外篇图标/图表制作
在很多可视化项目中，会用到不少的小图标或者简单的chart图表之类的。实际项目开发中，往往是让设计人员把相关的图标做成矢量图或者位图，交给开发人员，开发人员直接使用到实际的项目中去。事实上，一些简单的图标，也可以直接使用代码来绘制生成。通过代码来生成的优势在于：一是不占用太多的空间，太多的图片资源对于项目的加载会有性能瓶颈。二是，通过代码生成的图标，可以通过配置属性来实现不同的风格，甚至...原创 2020-02-20 15:50:11 · 1549 阅读 · 0 评论 -
三维组态可视化解决方案
HTML5 WebGL 在三维中的应用，已经发展的如火如荼，使其在三维组态（工业控制）方面也变得简单易行！ 三维组态软件提高了工业控制的管理效率，让工业控制的资源管理、风险管控得到很大的改善。传统的三维组态一般都是本地应用， 该案例使用的是基于浏览器B/S架构下的三维组态的应用。该案例模拟的是一个油田简单的工业控制场景， 模型大致包括油井、分离器、 加热炉、天然气、外输泵。还包括管路流...原创 2020-02-18 10:29:49 · 2035 阅读 · 0 评论 -
2.5D(伪3D)站点可视化第一弹
楔子最近要做一个基站站点的可视化呈现项目。 我们首先尝试的是三维的可视化技术来程序，但是客户反馈的情况是他们的客户端电脑比较差，性能效率都会不好，甚至有的还是云主机。 因此我们先做了一个性能比较极致的3Ddemo，如下图所示：为了能够尽可能的性能最优，所以想了各种性能优化手段。当然效果上也会有折扣，这个demo与我们本身的一些产品比如3D机房等相比较，效果上面肯定有了很大的差距。不过性能方面还...原创 2020-02-18 10:19:08 · 3274 阅读 · 0 评论 -
君子生非异也，善假于物也
前几天周六的时候，公司组织了团建活动。 租了一辆中巴车到景区，大家集中在公司楼下上车。其中一个人不小心迟到了（在此还是建议大家不要迟到，要多守时哈），最终我们决定先走。然后人事小姑凉和师傅商量，是否可以到指定的地点，让那名迟到的同事打车和我们汇合，我们接上他，然后再去目标地点。师傅说可以，然后说了，从三环下来的地方的xxx路，哪儿有个酒店啥的。可以在哪儿等下。 因为大家都不熟悉，所以人事小...原创 2020-01-18 13:26:47 · 2106 阅读 · 0 评论 -
机器人制证系统大屏可视化
0x01项目背景本项目是一个机器人制证的可视化系统。 其中包括制证设备的显示和监控，质检设备的显示和监控；同时也包括AGV机器人的显示和监控。 制证设备用于制作证书，质检设备用于合格检查，而AGV机器人用于运输；AGV机器人还需要监控电量和充电情况和行进位置。0x02设计稿接到项目之后，大家就开始开心(谁知道呢)得干活了。 首先就是要出设计稿，设计小姐姐在经过和客户多次的交涉讨论之后，交付了...原创 2020-01-17 14:25:25 · 1361 阅读 · 0 评论 -
C# WPF 嵌入网页版WebGL油田三维可视化监控
0x00 楔子最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。 效果如下图所示：首先当然是上模型，设计人员跟进。 有了相关的模型，使用我们开发的一个编辑器，通过模型拖拽编辑，管路编辑等等，很快就能够编辑出以上的场景：一切进展的都很顺利。 直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。0x01 寂静...原创 2020-01-14 15:34:16 · 2606 阅读 · 1 评论 -
多段动画整合为一个动画的思路
需求这是从一个项目中提取的需求。 大致的思路是： 通过获取后端的一系列人员的点位信息，在前端模拟人员的一段时间内的行动过程。我们的开发人员首先想到的思路是，把获取的点位列表信息，每两个取取来，组成一条直线路径。然后基于每一条直线路径，创建一个动画Animate对象。（Animate是我们内部的一个管理/播放动画的类）。其中创建每一个Animate动画的代码大致如下：new Animate(...原创 2019-12-11 16:36:43 · 1165 阅读 · 0 评论 -
通过canvas转换颜色为RGBA格式及性能问题
转换任意颜色为RGBA格式前端编程过程中，经常会遇到要把各种颜色格式（比如 “red”、“#F00”、“#FF0000”等）转换成RGBA格式，搜索网络也可以发现一堆的解决方案：此处介绍一种方法： 通过canvas的像素获取方法，来获取任意颜色的RGBA数值。大致步骤如下：首先创建一个尺寸为1*1的canvas，并获取canvas的绘制上下文ctx设置ctx.fillStyle为指定的颜...原创 2019-11-22 14:08:33 · 2004 阅读 · 0 评论 -
去掉图片黑背景输出为透明背景
最近遇到了一个需求，是要去掉一张图片的黑色背景，如下图所示：如果使用OPENCV ，加上一些图像处理的算法，是可以实现去除任何背景的。但是由于这个需求就是去掉黑色背景，感觉没必要用到哪些比较复杂的算法。于是打算在网络上搜索了一下，开始没有搜搜到，倒是搜索到一篇用ps如何来去掉黑色背景的思路：去掉图片黑背景输出为透明png(算法和工具)但是里面主要是说用PS的操作，而且里面说的原理，也不是很...原创 2019-11-11 16:34:46 · 2712 阅读 · 0 评论 -
高清屏下canvas重置尺寸引发的问题
我们知道，清空canvas画布内容有以下两个方法。第一种方法是cearRect函数：context.cearRect(0,0,canvas.width,canvas.height)第二种方法就是用原值重新设置一下canvas的宽（或者高）canvas.width = canvas.width// or canvas.height = canvas.height第二种方法可以起作用，...原创 2019-10-13 17:51:58 · 1396 阅读 · 0 评论 -
根据贝塞尔曲线上的点反算t值
这是一个项目中遇到的实际需求。场景是一个智能仓库管理系统，场景里面有直线和曲线构成的环穿轨道。环穿轨道上面会有小车运动，后台推动小车的两个点位A和B，其中A和B都会在轨道上面，前端需要根据这两个推送点，自动播放小车从A点沿轨道到B点的动画。下面是项目截图：项目中使用的是二次贝塞尔曲线，所以本文也主要以二次贝塞尔曲线为讲解重点。要实现上述动画，需要首先确定A点和B点在曲线上面的比例值ta和tb...原创 2019-10-08 14:01:26 · 2851 阅读 · 0 评论 -
WebGL2系列之采样器对象
前言在WebGL1中，纹理的图片和采样信息都是写在纹理对象之中.采样信息告诉GPU如何去读取贴图上图片的信息。如果我们希望从同一个图片多次读取像素信息，但是每次读取的时候使用的过滤方式不一样, 此时我们需要创建两个不同的纹理对象。"你说这样是不是很烦啊"WebGL: “。。。”采样器对象在WebGL2中，引入了采样器对象，使用采样器对象，可以把纹理的过滤方式封装到采样器...原创 2019-09-07 14:21:47 · 1155 阅读 · 0 评论