金大大
金大大
## 主流浏览器中canvas的限制 在 `chrome` 和 `safari` 下验证 1 单个canvas的最大面积都是 `268435456` (16384 * 16384) 2 单边长度限制, 查阅资料显示最大宽高为`32767`, 实际验证的结果是 `chrome` 下的最大单边长度是 `65535`, `safari` 下的最大单边长度是 `4194304` 3 canvas总体积的限制: chrome: 无限制 safari: 4096MB 验证方法:...
### 动态模糊(Motion Blur 提案 ![image](https://user-images.githubusercontent.com/16317349/97807041-8b71d800-1c99-11eb-8304-7309d513d269.png) 当你拍摄一个物体(或是一个人),就像下图,这个模糊就会发生,因为这个物体(人运动)移动的速度超过了相机拍摄所需的曝光时间,所以这个物体会在最终的照片中出现多次,因为它在关键时刻移动。 ![image](https://user-images.githubusercontent.com/16317349/97807064-ab090080-1c99-11eb-8402-c58037413ea4.png) 目前动态模糊目前是提案中 [https://github.com/w3c/csswg-drafts/issues/3837](https://github.com/w3c/csswg-drafts/issues/3837) ```html body { display: flex; width: 100vw; justify-content: center; align-items: center; min-height: 100vh; } body > .ball, body > .motion-ball {...
## 关于useState ##### Q1: `useState` 如果保存状态? ##### Q2: `useState` 如何更新状态? ### hook如何保存数据 `FunctionComponent` 的 `render` 只是函数调用。那么在 `render` 内部调用是如何获取到对应的数据? 例如: * `useState` 获取 `state` * `useMemo` 获取缓存数据 A: 每个组件都有个对应的 `fiber` 节点,用于保存组件的信息...
### padding 百分比 当一个元素宽高不等时 ```css padding: 10% ``` 到底如何解析,是宽度的10%,还是高度的10%,亦或是宽10%,高10% 例子1: ![image](https://user-images.githubusercontent.com/16317349/87947343-c62e7680-cad5-11ea-8408-6c6edf42e2a0.png) 这种情况下我们发现是宽度的10%,那到底是父元素宽度的10%,还是元素本身的10%那?看例子2 ![image](https://user-images.githubusercontent.com/16317349/87947595-258c8680-cad6-11ea-9713-93aa42f0af8d.png) 我们发现是父元素宽度的10%,那如果是 ```css padding: 20% 10%; ``` 这种情况下,会不会是 padding: 父元素高的20% 宽度的10%那,看例子3: ![image](https://user-images.githubusercontent.com/16317349/87947883-8fa52b80-cad6-11ea-9fad-00df74544ca6.png) 最终我们发现,当padding值为`百分比`的时候,基准值是父元素宽度值
```js const data = [1, 2, 3, 4, 5]; const request = item => new Promise(resolve => setTimeout(() => { console.log(item); resolve(item); }, 2000) ); const queue = async data...
### 1. window.physicalSize window.physicalSize 不要运用在build函数中 在run debug模式下没有问题 但是在profile模式下会无法显示widget,并会导致卡顿和影响到其他组件
### Step.1 Canvas转换为图片 首先,你要了解flutter如何将canvas转换成图片,这里有一个非常好的例子分享给大家[flutter_canvas_to_image](https://github.com/rxlabz/flutter_canvas_to_image),这里简单讲解一下思路: 1.首先创建一个 ui.PictureRecorder(记录仪), 然后作为载体创建一个canvas对象 ```dart // 创建一个记录仪 final recorder = new ui.PictureRecorder(); final canvas = new Canvas( recorder, new Rect.fromPoints( new Offset(0.0, 0.0), new Offset(200.0, 200.0))); ```...
### NeverScrollablePhysics NeverScrollablePhysics呈现不可滚动的列表。使用此选项可以完全禁用滚动。 ### BouncingScrollPhysics 当列表结束时,BouncingScrollPhysics会弹回列表 ### ClampingScrollPhysics 这是Android上使用的默认滚动物理。 列表在结尾处停止并给出指示的水波纹效果。 ### FixedExtentScrollPhysics 这与此列表中的其他内容略有不同,因为它仅适用于FixedExtendScrollControllers和使用它们的列表
#### [English](https://github.com/jindada/blog/issues/12) ### step 1 安装Android Studio 插件 `Flutter_i18n` (当前版本是0.2) ### step 2 安装完成之后,重启 Android Studio,flutter项目下面会出现`res/values`文件夹 ### step 3 点击同步按钮,会自动生成`lib/generated/i18n.dart` ### step 4 4.编辑`main.dart`, 由于lib/generated/i18n.dart文件有[bug](https://github.com/long1eu/flutter_i18n/issues/26),所以`localizationsDelegates`, `localeResolutionCallback`部分代码需要重写 ```dart class MyApp extends...