萨纳兰的黄昏在86盒的原作者FanHuaCloud大佬加持下,又给86盒挖了个新坑,为了解决之前ESP32所驱动圆屏只能播放MJPEG并且帧率较低的尴尬问题,集圆屏加一体化驱动板+外壳+炫酷LVGL UI于一身的圆形86盒横空出世,并命名其为——T113太极派。
近期,网络上流行了一个“时间管理”的梗,想要做好时间管理,清楚把握时间才是关键点,那么借着这个“时间管理”,来介绍一个小程序实现动态时钟的案例吧。
4. 由于页面加载需要一定时间,会导致js代码未能立即执行,页面会有一段空白阶段,所以添加一个立即执行函数让页面一加载就有效果呈现
在上一篇文章写了个高仿WIN10系统的光晕日历,这次来绘制一个光晕的时钟,也是在某些网页上看到的效果,时分秒分别以进度条的形式来绘制,而且这个进度条带有光晕效果,中间的日期时间文字也是光晕效果,整体看起来有点科幻的感觉,本控件没有什么技术难点,如果真要有难点的话也就是如何产生这个光晕效果,在使用painter绘制的时候,设置画笔,可以设置brush,brush可以是各种渐变效果,这个就非常强大了,主要有线性渐变、圆形渐变、锥形渐变,这三种渐变用得好,各种效果都得心应手随手拈来。
之前项目中需要实现一个四周环绕中心圆形头像的效果,感觉还是自定义比较方便,于是就自己封装了一个控件去实现。先贴张图显示最终效果。
在添加设备点或者区域形状的时候,会考虑是直接静态的方式写入到网页中加载,还是动态js函数异步加载的方式,这个需要根据现场的实际需求来,如果只需要一次加载的话建议静态即可,如果运行期间还需要动态添加的话就采用动态的js函数交互的方法,绝大部分场景都是动态添加,毕竟这个是异步执行的,而且比较灵活,静态的方式写入到网页中加载开起来比较傻,数据都在网页中可以看到了,没有什么保密性可言,在前面两篇文章做行政区划和点聚合的时候,也是两种方法都支持,具体现场怎么方便怎么来。
举个例子:电脑只有4g内存,但是要同时打开一个占用3g内存和一个2g内存的游戏,怎么办呢?这里面就涉及到了换页(page swapping)机制。
因为我一直比较关注 Web 领域的设计趋势, 很早之前就听很说了 Lottie 这个项目, 但是一直没时间和机会去尝试, 最近终于有时间机会于是尝试了一把, 在这里分享一下。
春节马上就要到了,如果不想走亲访友,只想在家安安静静做一只技术宅,那么这篇文章或许可以给你一些启发,阴极射线管也可以改造成炫酷时钟!
前阵子公司的产品经理找我谈个需求,希望能为每个用户生成专属的资讯分享图片及让开通专栏的用户能够生成专属的文章分享图片。这两天刚好有空,就抽空预研了 “生成专属的资讯分享图片” 这个功能。
动态时钟,就是通过CSS工具的美化效果和引入JavaScript,让网页呈现出钟表的动态效果,让它能够记录时间。通过改变背景颜色、指针颜色和阴影效果,让时钟呈现不同的颜色。
本文通过介绍一种在网页中用canvas实现实时火焰效果的技术,包括如何实现火焰的粒子系统、火焰和飞机之间的碰撞检测、以及通过shader模拟高光和反射效果。作者还介绍了如何实现火焰随着时间推移的动态变化,以及火焰效果在三维场景中的呈现方式。
最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己想要的效果添加了进去;
小轻相信,许多人对网页是很感兴趣并且是很想学习的。当初创立小轻网及小轻论坛网页就是为了帮助大家学习一些技术经验,同时也学会如何去找资源。今天,我们给原有网页加一些部件,达到装饰和增加功能的作用。
上篇《纯Shading Language绘制HTML5时钟》体现了GLSL可编程性特点,但没有体现GLSL可编程出各种酷炫效果的特点,今天我们将用纯Shading Language绘制火焰效果,并将其
正如你在上图中所看到的,这里我借助 HTML、CSS 和 JavaScript 制作了一个简单的模拟时钟。早些时候我制作了更多类型的模拟和数字手表。如果你愿意,你可以看看这些设计。
进度条是易语言常用的一个组件,有时候我们想让进度有个性,比如绘制一个圆形进度条,下面封装了子程序,直接调用就可以了。窗口用到三个编辑框,一个时钟,一个标签,一个画板,三个颜色选择器,效果如下图,我们可以灵活调整双环椭圆大小,颜色等等。
本文将会带你了解到我是如何创建一个动态树图的,该图使用 SVG(可缩放矢量图形)绘制三次贝塞尔曲线(Cubic Bezier)路径并通过 Vue.js 以实现数据响应。
好看的动态时钟,觉得挺好看的,可自行修改时间颜色,需要的可自行添加美化自己博客! 使用教程 下载JS文件上传至服务器根目录下 如果是wordpress,将下面代码复制至外观→小工具→自定义HTML文本中 像我这种typecho的或者其他的博客系统,自行放在合适的位置即可,颜色参考点我选择 代码演示 改时钟颜色自行下载代码 <canvas id="canvas" style="width:100%;" height="250"></canvas><script src="https://web-static.
在地图应用的相关项目中,在地图上标识一些设备点,并对点进行交互这个功能用的最多的,于是需要一套机制可以动态的添加、删除、清空、重置,重置的意思是将地图中的所有点的经纬度重新设置,其实就是先清空然后挨个重新添加所有点的信息,JS的异步交互功能非常强大,直接执行对应的JS函数就可以,没有必要刷新网页,最开始很多年前做的时候还不会JS,那时候想的最糟糕的办法就是写死在代码中,这样每次变动需要重新加载网页,后面发现那真是糟糕的办法,既然有异步刷新的办法为何不用呢,自从学会了JS异步刷新方法以后,索性将各种方法都改成了JS函数,传入对应的参数即可,参数尽可能的考虑到已知的各种各样的情况,方便用户自己添加。
如果你还不清楚 Fabric.js 有什么用,我强烈推荐你阅读 《Fabric.js 从入门到目中无人》 。该文能让你的前端技术再点亮一个技能点。
今天带来一个圆形时钟,用JQ编写的Canvas 代码。Canvas 的神奇之处就在于,可以自行绘制图片不需要外部引入,当你深入了解这项技术的时候,你也会忍不住赞叹他的神奇之处。
点聚合在地图相关应用中比较常用,比如在地图上查询结果通常以标记点的形式展现,但是如果标记点较多,不仅会大大增加客户端的渲染时间,让客户端变得很卡,而且会让人产生密集恐惧症,密密麻麻的一大堆点挤在一起。为了解决这一问题,我们需要一种手段能在用户有限的可视区域范围内,利用最小的区域展示出最全面的信息,而又不产生重叠覆盖,这个东西专业名词就叫点聚合,百度地图内置了方法可以设置点聚合BMapLib.MarkerClusterer,注意这个方法在BMapLib中而不是在BMAP中,所以要使用点聚合的话需要引入这个MarkerClusterer_min.js类文件,不然是没用的,这个很容易忽视,因为绝大部分类和方法都是在BMap中都有。
地址和经纬度互相转换的功能也经常用到,比如上次的路线方案查询的功能,之前官网是提供了直接输入出发地点和目的地的中文汉字,就可以查询到最优的路线,后面只支持输入出发地点和目的地的经纬度坐标了,这个就有点绕了,让用户输入什么经纬度坐标,那是个什么鬼?没有几个用户搞得懂的,所以就需要先将用户输入的出发地点和目的地的中文汉字先查询到对应的经纬度坐标,然后再传入路线查询的JS函数中查询结果即可,为什么突然关闭了这个地址经纬度自动转换的功能呢?我去后台看了下,原来这项功能变成收费模块了。
Tailwind CSS,一款流行的实用型CSS框架,提供了一套强大的工具,可以轻松地创建令人惊艳的动画效果。
Fabric.js 官网有很多有趣的Demo,不仅可以帮助我们了解其功能,还可以为我们提供创意灵感。其中,Stickman是一个非常有趣的例子。
行政区划在地图应用中非常有用,行政区划是行政区域划分的简称,是国家为了进行分级管理而实行的区域划分,百度地图提供的内置的函数类支持传入行政区划的名称来获取对应的边界点集合,然后根据该集合来绘制点集合,最后将该点集合封闭连起来,就形成了行政区划的轮廓图了,使用下来发现地图本身提供的函数可以支持到县城,如果需要精确到乡镇那就需要其他办法获得,一种是直接加载事先准备好的乡镇的边界点集合的js文件,一种是在地图上绘制多边形,然后开启可编辑属性,人为的拖动边界,最后获取整个多边形的边界点集合即可,这种方法有个专业术语叫扒数据,在音乐界叫扒带。其实方法一的前提也是按照方法二来获取的,对于很小的应用数量不多的乡镇可以采用此法,如果需要很多省市的乡镇那就可能需要安排专人去获取了。
Fabric.js 默认的框选操作是矩形,如果需要做到上图的效果,需要做以下3步:
看腻了市面上各种丑陋难看的时钟控件,是时候整点新活!将现实生活中的摆钟圆形表盘设计、电子手表的数显表盘设计抽象出来,提取出“圆形”、“数显”、“时光流逝感”等词汇,融合这些词汇特征,把特征赋予最终的UI设计......就这样,一个炫酷的UI控件诞生了!
百度在线地图的应用老早就做过,后面经过不断的完善才到今天的这个程序,除了基本的可以载入地图并设置一些相关的属性以外,还增加了各种js函数直接异步加载数据比如动态添加点、矩形、圆形、行政区划等各种。当然最大的是增加了离线地图的支持,当年这个离线地图拖了很久很久才去做,最终还是搞定了。
本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA、常用和自定义组件、用户交互、JS 动画的实现,通过本示例可以基本了解和学习到 JavaScript UI 的开发模式。
percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条。
CSS Houdini 允许开发者使用 JavaScript 直接与 CSS 渲染引擎交互;Amazing!!
其实 Fabric.js 官网也有这个demo:Fabric.js demos · Custom controls, polygon 。但这个demo可能对于刚接触 Fabric.js 的工友来说有点过于复杂,所以本文就把该demo进一步简化,简化到老奶奶也能看得懂的!
获取边界点一般和行政区划搭配起来使用,比如用户输入一个省市的名称,然后自动定位到该省市,然后对该轮廓获取所有边界点集合输出到js文件,最后供离线使用,获取边界点还有一个功能就是获取当前区域内的左下角右上角等经纬度坐标,这个主要是供离线地图下载使用的,百度地图很好的提供了bdary.get(cityname, function(rs)的函数来获取行政区划的边界点集合,其中rs.boundaries就是所有的边界点集合,估计他是服务器上存储好的每个区域的集合,查询到了立即返回,可能早期也是人工的一点点圈起来连线好存到到数据库的,按照此方式其实可以搞一个程序自动将全国的所有省市边界点集合数据全部扒下来,给离线地图使用,测试了下貌似只支持到县城级别,不支持具体到乡镇。
安利一波CSS、JS炫酷动效在线下载网站 # bttn.css 专注分享网页按钮的样式库 # Hover-Buttons 一个可以生成代码的网站 # granim.js 基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案,使指定元素在这些颜色中执行平滑的渐变色过渡效果。 # micron 可生成炫酷CSS3动画的js动画库插件。通过micron.js插件,你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动
canvas绘制圆环旋转动画——面向对象版 1、HTML 注意引入Konva.js库 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用Konva绘制圆环旋转动画</title> 6 <script src="konva/konva.min.js"></script> 7 <script src="CircleText.js"></script
国内提供地图服务的厂家基本上是五家,百度地图、高德地图、腾讯地图、搜狗地图、天地图,国外的一般还有谷歌地图、微软地图(BING地图),这几家的地图服务的api接口都大同小异,甚至很多函数的名字都一模一样,毕竟叫的很通俗,这样也很容易理解,除了引入的地图服务JS文件不同,对象名称不同,其他大多数都类似,这就给了程序员很方便的统一的思路,整体上的流程都如下:
离线地图的核心其实就是拿到这些瓦片地图文件,并不是离线地图的代码怎么写,其实离线地图的网页代码和在线地图的网页代码几乎一致的,主要就是将对应的依赖的js文件从在线的地址改成本地的地址,然后可能多几个特殊的js文件用来本地交互,离线地图完全具备在线地图的大部分功能,离线地图有个好处就是可以离线使用,根本不需要联网,而且也不需要什么秘钥,你只要搞到那些瓦片地图文件就随便你怎么摩擦了。其实在线地图也是通过读取服务器上的离线地图文件加载到网页中的,你在快速的缩放和拖动地图的时候可以看到缝隙和空白,估计此刻就是在从服务器拉取瓦片地图文件来加载,而且这个服务器上的瓦片地图永远是最新的最完整的。
网上其实有很多各种各样的离线地图下载器,大部分都是要收费的,免费的要么是限制了下载的瓦片数量或者级别,要么是下载的瓦片图打上了水印,看起来很难看,由于经常需要用到离线地图,摆脱这个限制,特意花了点时间重新研究了瓦片地图的原理,做了个离线地图下载器,其实瓦片地图下载没有那么复杂,其实就是从开放的几个服务器地址组建要请求的瓦片地图的地址,发送请求以后会自动将图片返回给你,你只需要拿到图片数据保存成图片即可。
Fabric.js 的基础包并没有包含橡皮擦模块,如果你的项目需要使用橡皮擦,要使用定制版的 Fabric.js 。
微信小程序:wx.navigateTo中url无法跳转问:链接 微信小程序布局之行内元素和块级元素:链接 小程序端JS加密,传输PHP端解密:链接 小程序开发干货技巧:如何为你的微信小程序:链接 Flask中获取小程序Request数据的两种途径:链接 微信小程序,新添加的元素保持在底部:链接 微信小程序登录页动画 - 云层漂浮:链接 微信小程序swiper滑动页面实践-类似于安卓V:链接 微信小程序--下拉菜单(带动画)实现:链接 小程序request接口的封装,实现给循环列表:链接 微信小程序-文字
最常用的地图交互就几个,比如鼠标在地图上按下的时候可以拾取经纬度坐标,然后传给Qt程序,再比如对设置的设备点进行单击的时候,通知Qt程序单击了哪一个设备点,好让Qt程序识别并作出反应比如弹出对应点的详细信息或者视频预览等。让网页执行js函数这种单向的操作,其实无论何种浏览器内核都支持的,并不需要注入类或者添加qwebchannel.js文件之类的,你只需要放心大胆的调用runJavaScript或者evaluateJavaScript函数。而如果想要网页发送对应的数据给Qt程序的话,就需要额外的处理了。
这是一个Flash插件,swf是一种动画格式,实现效果应该是下面的Object内容
不知道你在使用 Fabric.js 时有没有发现,如果一个画布存在多个元素,而且它们之前是层叠的,当你选中底层的元素时,那个元素会跳到最顶层;当你释放该元素后,它又跑回原有层级。这是 Fabric.js 的默认状态。
今天想把之前在微信小程序开发过程中,制作的一个圆形进度条做成一个组件,方便以后直接拿来用。
然后我又继续想啊想,想到我们用 canvas 好像也能做出一款点彩画的绘图工具,但用原生的方式写是不可能的,因为我懒。思前想后,还是觉得用 p5.js 写会好点,毕竟这个库也是个比较知名的艺术库。
圆形笔刷是作用在 “自由绘制” 的画笔之上的。从名字就可以看出,这个笔刷会用一个个圆形来填充绘制的路径。
领取专属 10元无门槛券
手把手带您无忧上云