首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【Flutter 专题】130 图解 DraggableScrollableSheet 手势滑动菜单栏

和尚发现在长期未登陆小米应用市场时,再次登陆会有滑动半屏底部菜单,供用户方便下载和推广;而在 Flutter 中这个半屏底部菜单并不是一个简单 BottomSheet 完成,可以通过 DraggableScrollableSheet...根据手势操作滑动固定位菜单栏完成;和尚简单学习一下; ?...构造器作为必选字段,用于在 DraggableScrollableSheet 中显示滑动子内容;其中返回内容需为滑动 ScrollableWidget,例如 ListView / GridView...SizedBox.expand 对父 Widget 进行填充判断; return widget.expand ?...---- 案例源码 ---- 和尚对 DraggableScrollableSheet 手势滑动过程还不够熟悉,之后会对手势进行进一步学习;如有错误,请多多指导! 来源:阿策小和尚

1.3K20

JS编辑表格实现(进阶)

本文最后更新于 128 天前,其中信息可能已经有所发展或是发生改变。 1、前言 在普通编辑表格基础上,改进可编辑表格。数据来自外部json(模拟服务端),通过json数据生成可编辑表格。...表格编辑列,计算列,每列数据大小,以及是否删除都可进行配置,在修改单元格内容和删除行数据都会映射到相应数据集中。...定义flag开关,设置是否调用actionBar方法 定义setEditable方法,用于设置哪些可编辑。传入一个数组arr表示可编辑单元格列。... <script src="table.<em>js</em>...function setEditable(arr) { //arr 表示可<em>编辑</em><em>的</em>单元格 // editable 设置单元格可<em>编辑</em>性 var strow = stutable.rows.length

8.5K41

图形编辑器基于Paper.js教程11:使用Paper.js和Opentype.js加载自定义字体技术实现解析

使用Paper.js和Opentype.js加载自定义字体技术实现解析 在现代Web开发中,字体处理和自定义显示成为了视觉设计重要部分。...本文将详细探讨如何使用Paper.js和Opentype.js在HTML5 canvas上实现自定义字体加载与显示。我们将通过分析一段实际代码来理解关键技术实现及其难点。...效果图 核心技术概览 Paper.js: 一个强大向量图形框架,用于在网页上简化与canvas元素交互。...字体渲染与SVG转换: Opentype.js提供路径需要转换为SVG格式,然后才能由Paper.js正确解析和显示。...这一转换步骤是必须,因为Paper.js不直接支持Opentype.js路径格式。 性能优化: 对于每次字体或文本改变都进行完整字体加载和渲染可能导致性能问题,特别是在处理大型字体文件时。

1000

后疫情办公时代——你需要多人同步协同编辑Demo(粘贴撤销)

通过监听命令来实现简单协同操作 何为命令机制: 命令就是将一步或多步操作封装成一个可以执行命令,执行这样命令并传入对应参数,就可以执行相关一连串操作。...在实际应用中有很重要价值,举个例子: SpreadJS默认初始化电子表格是一个空表格,我们经常遇到打开页面后需要加载一个有数据表格这样场景,我们往往会将表格初始化操作通过代码在js中运行来实现这样效果...命令对于在线协同应用: 命令机制我们可以分清操作到底是代码执行还是用户UI去操作,而在线协同场景中需要同步内容就是用户UI相关操作。...而命令本身是可以自定义,我们可以将提供给用户操作接口(input,按钮,下拉等)实现逻辑封装成一个个自定义命令,就像附件demo这样。...mod=attachment&aid=ODY2MjZ8OTBlY2E0NWF8MTY3MTc5MzE5Mnw2MjY3Nnw3NTM0Nw%3D%3D 粘贴柯撤销多人协同 那最原始通过命令方式为什么无法将粘贴命令同步呢

73330

SpringBoot + Vue 实现拖拽编辑大屏开源项目

1、简介 该大屏设计是一个可视化拖拽编辑全开源项目,直观,酷炫,具有科技感图表工具。内置基础功能包括数据源,数据集,报表管理。...多数据源支持,内置mysql、elasticsearch、kudu驱动,支持自定义数据集省去数据接口开发,支持17种大屏组件,不会开发,照着设计稿也可以制作大屏。...2、技术栈 前端 npm : node.js包管理工具,用于统一管理我们前端项目中需要用到包、插件、工具、命令等,便于开发和维护。...利用ES6我们可以简化我们JS代码,同时利用其提供强大功能来快速实现JS逻辑。 vue-cli:Vue脚手架工具,用于自动生成Vue项目的目录及文件。...3、数据流程图 4、部分截图 拖拽编辑 日志大屏 5、最后 最后,防止找不到本篇文章,可以收藏点赞,方便翻阅查找。 还等什么呢?赶快来试试吧!项目源码和更详细安装部署文档已经放到了云盘!

2.9K40

JS】928- 用 Canvas 编辑图片

" width="150" height="150"> // .js const canvas = document.getElementById('tutorial'); // ctx...实践 结合 canvas 技能,方案设计思路如下: 获取适配图片 转换图片:按照图片 1:1 绘制画布 动态编辑:在画布上标记操作,可进行增删改 生成图片:画布转换为图片 1、获取并转换图片 drawImage...img // ctx.drawImage(img,x,y,width,height); ctx.drawImage(img, 0, 0, img.width, img.height); } 2、编辑功能...canvas, x, y); drawRect(); }; 3、canvas 转图片 const dataURL = canvas.toDataURL('image/png') 以上是部分代码,来看看编辑效果...目前需求已顺利上线,质检师使用反馈很不错。 写在后面 希望通过本文给大家带来一种前端处理图片思路,有兴趣同学可以尝试一下 canvas 其他功能,如:添加文字,编辑撤回等等。

4.5K50

JS游戏开发 移动地图实现

一、前言 这一讲内容很简单,大家理解起来会更快。因此我只对重点加以分析,其他就轮到大家思考哦!...首先来说,我对游戏开发可以算是不怎么深入,因为现在程序员爱用canvas,我却就只会拿几个div凑和。不过没关系,因为做出来同样是游戏。哈!废话最近有点多,望大家原谅。接下来请看代码解析。...现在做一下解释:移动是代表可以向四面八方走动,地图就是地图,可以是世界地图,中国地图,游戏地图。。。反正必须是一张图。在此多说了两句,不过没关系,因为了解情况比不知庐山真面目要好得多。.../main_looks.css" /> <script type="text/javascript" src=".

7.2K60

JS - 自动伸缩高度文本框

文本框默认现象: textarea如果设置cols和rows来规定textarea尺寸,那么textarea默认宽高是这俩属性设置值,可以通过鼠标拖拽缩放文本框尺寸。...royalblue; padding: 20px; border-radius: 5px; resize: none;   resize:none; 去掉右下角这个自动伸缩样子和功能...答: 初始化高度通过css设置(如上),自动伸缩高度值通过js来计算(如下)。 如果js计算的话,就需要事件触发,用change事件? 答:但是change事件体验不好。 为什么?...所以需要每次输入时候就触发计算,就得用键盘事件而不是change事件: 键盘事件需要监听是键每次弹起时候,即keyup事件(刚才想了想,貌似监听keydown按压事件也不是不可以)  每次事件触发时候...答:就是计算文本框滚动高度,即内容高度 具体怎么做? 答:键盘每次弹起时候,获取文本框内容高度添加给文本框高度,即可让其实时跟随内容自适应。 内容高度用什么属性计算?

9.3K20

js-灵活拆分职责链模式

,能够灵活增加、删除和修改其中节点。...经典例子 假设我们负责一个售卖手机电商网站,经过分别交纳 500 元定金和 200 元定金两轮预定后(订单已在此时生成),现在已经到了正式购买阶段。 公司针对支付过定金用户有一定优惠政策。...在正式购买后,已经支付过 500 元定金用 户会收到 100 元商城优惠券,200 元定金用户可以收到 50 元优惠券,而之前没有支付定金用户只能进入普通购买模式,也就是没有优惠券,且在库存有限情况下不一定保证能买到...另外,职责链模式使得程序中多了一些节点对象,可能在某一次请求传递中,大部分节点并没有起到实质性作用,它们作用仅仅是让请求传递下去,从性能方面考虑,我们要避免过长职责链带来性能损耗。...职责链中节点数量和顺序是可以自由变化,我们可以在运行时决定链中包含哪些节点。 无论是作用域链、原型链、还是DOM节点中事件冒泡,我们都能从中找到职责链模式影子。

96130

使用SASS做个自定义主题网页

使用SASS做个自定义主题网页 Posted November 28, 2018 本篇代码已托管在 jackeyGao / sass-theme ---- Sass 是对 CSS 扩展,让 CSS...具体 Sass 语法教学这里并不准备讲, 请参考官方教程, 本篇只举一个自定义主题例子, 让你对 sass 功能更加深刻, 理解 sass 在这个场景优越性....但现实情况比这个复杂多, 一个大项目所需要切换主题元素远比这一个区域多, 而且如果体验比较好主题切换还要更加复杂。 往往分散在多个文件中, 当增加主题时候需要更改就很多。...这里我们用到了 sass 这些功能: sass 命令行 (把 scss build 为 css 功能) each (类似于 for 循环, 对 map 进行循环) map声明 map 类似于 js...是一组 key: value 集合. 这里我们主要存储我们主题配置.

2.4K20

每日开源 | SpringBoot + Vue 实现拖拽编辑大屏项目

1简介 该大屏设计是一个可视化拖拽编辑全开源项目,直观,酷炫,具有科技感图表工具。内置基础功能包括数据源,数据集,报表管理。...多数据源支持,内置mysql、elasticsearch、kudu驱动,支持自定义数据集省去数据接口开发,支持17种大屏组件,不会开发,照着设计稿也可以制作大屏。...2技术栈 前端 npm:node.js包管理工具,用于统一管理我们前端项目中需要用到包、插件、工具、命令等,便于开发和维护。...利用ES6我们可以简化我们JS代码,同时利用其提供强大功能来快速实现JS逻辑。 vue-cli:Vue脚手架工具,用于自动生成Vue项目的目录及文件。...3数据流程图 4部分截图 拖拽编辑 日志大屏 物流大屏 汽车销量大屏 5最后 还等什么呢?赶快来试试吧!项目源码和更详细安装部署文档已经放到了云盘! 关注 IT码徒 公众号!

1.8K20
领券