前端
很甜的西瓜
技术交流,技术研究。做自己想做的,做好自己想做的.
展开
-
glsl shader中实现canvas中的createRadialGradient效果
在网站找了好久,也没有发现有现成用shader去实现canvas radialGradient效果的.大部分都是简单的只有一个中心圆或者通过canvas绘制渐变再作为纹理图像进行贴图,没有类似像canvas有内圆与外圆,两圆心位置不一样,可以用实现类似焦点视锥效果.然后想到canvas底层用的是skia,就去看了一下skia源码,在skia官网搜索了一篇关于。原创 2024-07-29 17:52:45 · 331 阅读 · 0 评论 -
tailwindcss在manoca在线编辑智能感知
推荐一下库,它实现在monaco-editor网页在线编辑器中对tailwindcss的智能感知提示,在利用tailwindcss实现html效果布局。非常的方便。原创 2024-04-09 14:59:05 · 377 阅读 · 1 评论 -
vscode shadertoy插件,非常方便的glsl着色器编写工具
vscode有一件shadertoy的插件,安装后可以新建一个*.glsl文件,写好代码就可以直接运行看效果了。我试了一下非常方便.如果想要学习shader和一些数学在图形方面的应用我觉得这是一个非常好的插件.很著名的shadertoy网站,集合了非常多大神利用数学写出美妙的shader效果。像shadertoy创始人之一的IQ大神它在之方面有很多的建树。下面写了四个简单示例,水波纹、风景(利用2维值躁声和fmb躁声模拟山和水的流动和天空和云朵) 波纹 雷达。原创 2024-04-02 19:38:39 · 1262 阅读 · 0 评论 -
一个简单的可视化的A星自动寻路
一个简单的应用场景,流程图连线。原创 2023-12-09 19:55:19 · 118 阅读 · 0 评论 -
从简单的词法分析、语法分析、目标代码生成、语法解释器的过程,粗略讲一下代码的运行过程
如果你的目标是创建一个可用的解释器,可能需要更深入的了解 JavaScript 语言规范和相关的计算机科学概念。为了让人能够看懂机器在做什么,为了让机器明白我们的想要表达的意思,完成我们的指令,所以才出现了让人类更容易懂的编程语言。说C和C++比Java和.NET(C#)性能好,通常是因为C和C++更接近底层硬件,提供更直接的内存控制,并且没有虚拟机的运行时开销。想像一下,这代代码怎么解释:首先ast的结构大概是这样,读取a的时,会把a的初始值存储当前作用域中,读取b的时候,会拿a在当前作域用中取。原创 2023-12-09 15:35:48 · 455 阅读 · 0 评论 -
实现简单纯Canvas文本输入框
最重要的是保证canvas的字体样式要与元素的字体样式一样,这样才能利用textarea的兴标和选中区体系。一、最简单可能是用dom渲染一个input,覆盖在图形上面进行文本编辑,编辑完再把内容更新到图形.这样简单,但是缺点也明显,就是它不是真正绘制在canvas上面,没有层级。下面看一下效果,因为也是花了二三个小时,弄了一个比较简单的,输入选中,光标指定位置生入,性能也是可以,输入响应很快。技术细节有一个地方,我是这样做的。选中区的文本颜色和背景要高亮,如果做文本计算的话,那有点麻烦,而且性能也不好/。原创 2023-08-16 21:18:05 · 2098 阅读 · 0 评论 -
canvas图形等距、间距测量
首先定义画线(实线、虚线)、画面(矩形块)、值(距离)等渲染数据结构(渲染数据只提供坐标信息和一些基本样式属性,不需要依赖渲染是dom,还是canvas或webgl) 侦测数据,取每个图形的包盒信息,再根据包盒信息抽象成方向(left top right bottom middle center)。这样在计算时,可以不需要通过if来判断了,直接对比相同的方向数值是否在区间内(吸附距离) 吸附(吸附完,选中目标的位置有可能发生变动,需要更新选中目标) 侦测行为:拖动时,按alt时,resize时等原创 2023-06-28 21:20:47 · 498 阅读 · 1 评论 -
HiloJs俄罗斯方块和消方块
无论任何编程语言都有设计模式一说,其实在我们很多人在项目的开发过程中就用到了很多模式。但是不知道这是什么模式或者很多知道或了解一些模式。但是又不知道如何去应用。在什么地方去用。目录设计模式适配器模式场景想象:...原创 2023-05-22 20:43:59 · 261 阅读 · 0 评论 -
使用regl测试glsl shader 一些尝试代码
【代码】使用regl测试glsl shader 一些尝试代码。原创 2023-05-22 20:23:35 · 92 阅读 · 0 评论 -
一些简单的物理效果
【代码】一些简单的物理效果。原创 2023-05-22 20:16:05 · 114 阅读 · 0 评论 -
简单的代码实现拖拽拉伸尺寸
目录代码:效果:代码:<div class="box"> <i class="tl"></i> <i class="tr"></i> <i class="bl"></i> <i class="br"></i> </div><scrip...原创 2022-03-14 16:02:49 · 665 阅读 · 0 评论 -
threejs限制物体在一个球形上面移动
目录效果:代码:约束:只能在球形表面上面移动,不能移开, 棒棒糖的角度要与球面的法向线一样垂直效果:代码:addExample("限制在球形上面移动", function () { let { toRaw, ref, unref, provide, inject, getCurrentInstance, reactive, shallowReactive, computed, watchEffect, watch, on...原创 2022-02-28 11:37:32 · 910 阅读 · 0 评论 -
通过ImageData实现线性渐变
https://codesandbox.io这个网站可以提供了一个多场景的在线编辑,可以快速的创建更种环境进行编写代码。常见的vue、react、node express parcel nextjs都有,大家如果自己去写一些es6 es7的语法,写自己的库都可以在上面写,写好后自己打个包,就可以了,可以在上面搭很多环境。...原创 2022-02-28 11:30:02 · 340 阅读 · 0 评论 -
一个简单的对html进行词法分析
将一段html进行扫描,在扫描读取字符流过程中会逐个字的分析,进行词的分类。把每个词添加token数组中,进行身份标识。并且对每个语句进行分析,然后把它抽象化。变成一个抽象化树结构的元素对象。目录HTML代码node对象tokens生成html 高亮完整代码例子举例:HTML代码<div class="wrapper" > <!--注释--> <div..原创 2021-09-23 21:01:57 · 460 阅读 · 0 评论 -
openlayer 实现对不同地图数据源的展示
例子:有天地图、百度地图、Arcgis,mapbox,geoserver自建瓦片服务、自定义d3图层 var addExample = createModuleExample('vue', { deps: ['css!bootstrapCss'] }) var BaseMap = { mounted() { var container = this.$refs.main; conta原创 2021-09-21 18:07:46 · 514 阅读 · 0 评论 -
React Antd4一个简单FilterForm和一个广告魔方的封装
一个列表页面都是查询和列表。查询的功能是比较常用的。对于一个项目来说把这块做成公共的组件更好维护,而且通过注册不同的搜索控件,避免大家重复写相同功能的代码.这个组件首先使用 <FilterForm fields={fields} autoBind onQuery={showList} ></FilterForm>...原创 2021-09-21 16:29:34 · 486 阅读 · 0 评论 -
简单的canvas+gl-matrilx实现3d像素绘制
写个主要想了解2d与3d有哪些不一样,2d矩阵和3d矩阵一些不一样的处理. import {CanvasRenderer,Scene,PerspectiveCamera,Geometry,Cube} from './js/renderer.js'; var renderer=new CanvasRenderer({ container:document.getElementById('test'), width:800,原创 2021-03-03 19:07:07 · 651 阅读 · 1 评论 -
浏览器运行时编译es6+react+jsx+antd+router+redux+dva和vue+vue单文件
开发背景,主要有时候开发前端的一些小例子,用到react或其它的一些框架,比如JSX这些或其它的需要解析转换后,才能在浏览器运行。但直接使用nodejs环境有点太麻烦了,那使用systemjs感觉不够灵活,而且大部分cdn打包都是umd格式,所以选择用requirejs来运行想体验效果,直接复制下面一个HTML文件代码和JS文件代码,直接就可以运行了,如果是单独的文件会用到fetch读取源码解析,所以要在服务器运行,因为我配置的都是CDN文件配置步聚:首页在html里面引入requirejs和我原创 2020-08-07 16:55:24 · 799 阅读 · 0 评论 -
利用d3 API各种几何图形绘制
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-07-11 19:45:54 · 2028 阅读 · 0 评论 -
JS 讲解时效缓存与延迟处理
前述,举个例子。我就是我上次写一个百度地图框架的时候。第一种情况:地图里面有一个拖拽事件,用户在地图拖拽到某个区域。地图会自动计算坐标。显示该区域的所有商店标注位。由于数据是动态的,如果你不停拖拽,拖拽一下就去后台请求一次。那是性能消耗太大了。而且也没有必要。第二种情况:当用户拖拽完后,会去显示标注位,显示标注位的时候,会去计算地图的边界值。如果重复去调用的话。每次都重新去计算原创 2016-04-13 17:13:08 · 2954 阅读 · 0 评论 -
前端架构组件化开发系列一(Grid)
现在前端技术越来在项目中担当比较重要的角色。特别Node.js 的出现。使JS又可以承担前端和后台,使用项目编程语言统一。比如流行的模块化:seaks(CMD)、require(AMD)MVVM框架:avalon、vue、kendo、knockout、angular 。UI框架:bootstrap、jqueryui、kendoui、easyui、amazeui、ext、JX原创 2016-05-26 17:43:14 · 7685 阅读 · 32 评论 -
backbone+SUI+组件化开发,移动开发例子
集成MVC 的路由,实现单页应用. 利用backbone View 特性,模仿reactjs 的组件化方式。引用了c#中的mvc 中利用controller去定义action去实现所有action 的权限控制.最后利用webpack 压缩,把所有压缩在一个文件就好,运行 环境,需要web服务器,iis 或nginx.源码:原创 2016-08-29 14:54:37 · 1214 阅读 · 0 评论 -
精简版MVVM 供学习的朋友使用,
很久没更新了,这段时间在换工作。代码大概五百多行吧,纯原生,没有任何依赖。采用的set,get 原生的属性访问器事件,对属性变化进行监听,所以只支持IE9+,chrome 和火狐版本不老,都支持.项目如果使用的话,可以很好的进行二次开发,因为代码量少,阅读起来不是很难。这个MVVM实现源码,本来很早就想发表上来,给想学习的人一个思路。这个框架实现了常用的input 元素的一些绑定外原创 2016-08-29 14:38:58 · 615 阅读 · 0 评论 -
前端架构组件化开发系列二 (基于VUE 扩展组件)
.dx-selectbox { /* border: solid 1px blue; */ position: relative; font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; display:inline-block;} .dx-select-input {原创 2016-09-22 10:08:23 · 1974 阅读 · 1 评论 -
注册自定义元素,组件化渲染
前述从H5开始多了一些header、footer 、article这种标签,这种标签与div 没什么什么差异性,只是它更具有语义性,你看到它的标签名称就能知道这标签是干嘛的.那web页面语义化对于文档HTML标签的可阅读性和维护性都有提高。那么我们的组件是否也需要语义化了。 例如下面这样:从下面的代码,基本上知道这是一个grid的组件,它共有四列,三个单元格是属性字段列,一个单...原创 2016-11-09 12:03:11 · 562 阅读 · 0 评论 -
GIS web框架 openlayer 系列入门《一》
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问.我做的这个例子,主要有以下几点功能、1.上海的市区行政划分,2、当屏幕的中心中行政区它的放大的面积大于屏幕60%以上,就显示行政区下面的板块3、鼠标移上去显示该区或板块一些信息.大概效果就是这样。OpenLayers 它是原创 2016-11-30 17:39:57 · 3621 阅读 · 0 评论 -
GIS 交互开发
地图瓦片是基于百度行政区域分块,增加地图蒙层当行政区大于屏幕70%,显示行政区域板块 行政区圆形汇总显示点击缩小到板块,再点击板板,缩小显示项目地图分屏,一边显示工作的热力图,一边显示居住的热力图根据图标索引位置排列原创 2016-12-19 12:52:52 · 806 阅读 · 0 评论 -
复杂grid 支持多表头,固定表头,冻结列,合并行
该组件支持三种渲染形态,因为有些简单的表格没必要去做太复杂的处理。支持自适应页面宽度和可以设置固定宽度,理论上是所有浏览器都支持,但是因为我引用了一些工具类,处理数组的filter、map 所以向前兼容可以自己实现这些方法第一种:不需要固定头和列,纯普通表格。第二种:只需要固定头,滚动内容区域 第三种:需要固定列。本身想采用虚拟DOM来常渲染,因为这种组件对性能消耗挺大,后面想原创 2017-07-10 16:47:06 · 5318 阅读 · 0 评论 -
高度自定义,灵活配置日历控件
基于种种目的,我想实现一种可以根据用户自定义业务需求高度定制日历视图。控件可以自定义配置视图切换顺序和视图切换包括视图事件控制和样式。可以自定义注册日历视图。提供全局默认配置的日历视图 'date': ['date', 'month', 'year', 'years'], 'week': ['week', 'month', 'year', 'years'],原创 2017-08-08 15:07:29 · 569 阅读 · 0 评论 -
range slider 多个范围滑动条
因项目需求,网上找的大多是单个,类似h5 input range ,或者是双个 选一个最小或最大值的范围内 ,类似ion.range .所以写了一个多范围滑动条.利用了h5和canvas 的结合实例化: var _range = new DxRange('#rangeS', { step: 1, splits:原创 2016-12-09 12:01:33 · 8999 阅读 · 13 评论 -
echarts3的加载气泡动画
效果:代码: echarts.registerLoading("test", function (chartInstance, cfg) { var zr = chartInstance.getZr(), width = chartInstance.getWidth(), heig原创 2018-01-08 16:13:52 · 4298 阅读 · 2 评论 -
图片剪切器
效果图图片剪切功能剪切选择框剪切区域实时预览剪切图片剪切选择框创建一个选择框(如效果图中的白色虚线组成的框)选择框具有拖拽移动、边界检测(不能超出所在容器)、改变大小(我实现的是可以通过八个点改变大小)、可以反向拖动(就是在你右边的点拖动时,当前X坐标小于你选择框的X时,进行反向计算)选择框有最小宽高限制、最大宽高限制、固定宽高限制所选区域坐标换算代原创 2018-01-08 16:08:54 · 284 阅读 · 0 评论 -
图片涂鸦
效果:功能涂鸦工具栏(画笔、旋转、字体、颜色、历史后退)代码css: /***图片涂鸦旋转start*/ .dx-graffiti-tools { margin-bottom: 15px; position: relative; padding-left:原创 2018-01-08 16:48:45 · 625 阅读 · 0 评论 -
搭建代码编辑器
ACE ,Code Mirror, monaco 三款代码编辑器,整体引用都差不多,monaco 是微软出品vscode也是采用的这个.它的智能提示会很方便,如果在nodejs环境下可以添加其它 type.d.ts 文件可以直接智能提示.下面我是用vue搭的,有三种不同的模式,初始化直接设置就会自动加载,但是编辑器的资源需要你自己事先引入到页面中<!DOCTYPE html>...原创 2019-07-11 19:25:32 · 1014 阅读 · 1 评论 -
JS 异步纵向编程
首先大家了解一下 Promise 是什么?Promise它是一种新的异步解决方案。它被录入ECMScript 6 的新的语言标准。举个实例:一般像那种异步方法大部分是通过回调函数去处理。那当有时候函数里面会不断的钳套其它的异步方法,一层套一层。代码看上甚是混乱不堪. 再看看如果用Promise 解决方案去处理。看上去是不是代码要比上面简洁很多。代码的逻辑一目了然。下面是我自原创 2016-04-13 15:39:32 · 596 阅读 · 2 评论