许hao-CSDN博客

原创 flutter Stack中子widget填充

记录一下1. Stack的fit属性默认是适应子widget大小 , 即如果没有定位的widget,Stack的宽高将以宽高最大的子widget为基础如下,此时Stack的高度是100Stack( children : <Widget>[ Container( width : 200, height : 100 ), Container( width : 100, height : 50, ), ],)在实际的开

2021-06-05 14:57:04 1486 1

原创 flutter image_picker 闪退解决

flutter image_picker 闪退解决使用的版本是 image_picker: ^0.7.5+3在选择相册的时候,返回闪退1.在解决之前,先确定是否安装了其他的插件,比如image_picker_saver,如果使用了,将其删掉,因为会造成冲突,一般删掉后会解决2. 第一个方法如果不能解决,可以尝试如下解决方式**2.1 android/app/build.gradle **android { compileSdkVersion 29 sourceSets {

2021-06-05 14:38:25 2182

原创 flutter fijkplayer Android Release 崩溃

flutter 使用 fijkplayer 打包后闪退问题使用的版本是 flutter_ijkplayer: ^0.3.5+11. 闪退原因是因为打包后代码混淆造成的2. 解决办法就是不让其打包进行混淆2.1 在android/app/目录下新建一个proguard-rules.pro文件 , 并写入-keep class tv.danmaku.ijk.media.player.** { *; } 2,2 打开 android/app/build.gradle 在 release中引入打包

2021-06-05 14:24:33 558 1

原创 flutter key的原理和使用

一. 什么是key在常规flutter开发中,widget可以有stateful和stateless两种,key能帮助开发者保存widget的状态key涉及到flutter渲染机制Widget只是一个配置项(color,height,width…),最终生成对应类型element(内部存有state状态)Widget更新时,会匹配默认的对应的生成的element,如果类型相同,且key相同,更新视图; 如果类型相同,key不相同,element会找widget同级相同的key进行匹配更新@im

2021-04-25 16:21:10 580

原创 flutter BuildContext深入理解

一. 什么是BuildContextbuildContext是当前widget的上下文Widget并不是真正要显示在屏幕上的东西,只是一个配置信息，它永远是immutable的,并且可以在多处重复使用。那真正显示在屏幕上的视图树是什么呢？Element Tree！BuildContext的在StatelessWidget和StatefulWidget创建过程// StatelessWidget1. 首先它会调用StatelessWidget的 createElement 方法，并根据这个wi

2021-04-25 16:19:31 852

原创 dart空安全

dart空安全一. 空安全的使用类型? || ?? || 值! // int value = <String, int>{'one': 1}['one']; // ERROR // map对象取值时,可能为空,这里给类型加一个 ? // int? value = <String, int>{'one': 1}['one']; // SUCCES // 当确定取到的值肯定不是空的 , 增加 ! // int value = <String, i

2021-04-07 15:57:21 225

原创 Rxjs 学习入门

Rxjs 学习定义观察者 var observer = { next: function (value) { console.log(value, '接收到的值'); }, error: function (error) { console.log(error) }, complete: function () { console.log(

2021-03-19 17:26:22 264

原创 Jest 语法

Jest 语法https://www.jianshu.com/p/e54218d676281. 匹配器// toBe() 精准匹配 , 只能检测常规类型test('数值相加 , 等于2' , () => { expect(2+2).toBe(4)})// toEqual() 精准匹配 : 可以检测对象test("检测object对象,是否是预期结果" , () => { const data = { one : 1} data["two"] =

2021-03-18 16:06:52 373

原创支持多路视频播放的流媒体服务器，可直接使用

1. node-rtsp-stream通过node调用, ws方式, 输出的是MPEG-TS格式的视频流; 接着通过JSMpeg喂给canvas;缺点 : 只能同时播放一路视频优点 : 低延时,1s改进 : 可以自行二次封装,支持多路播放;2. ke-rtsp一种基于Media Source Extensions（简称MSE）技术实现的html5实时视频直播方案。Node.js调用ffmpeg包装rtsp流，然后通过socket.io转发包装后的流，前端html5获取流数据并通过MSE把流

2021-03-11 20:09:49 2279 1

原创 echarts x轴刻度鼠标事件

设置xAxis的triggerEvent属性为truelet myChart = echarts.init(document.querySelector('.right-top-echarts-line')) let option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { ..

2021-02-24 16:08:52 1240

原创记录一次使用mockjs出现诡异问题

根据需要,项目引入了mock,一切就安装就绪妥当之后,发现项目部分功能模块异常;这个功能模块使用了three的GLTFLoader加载器,报错是在GLTFLoader里面抛出的抛出的异常代码SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at GLTFLoader.parse (GLTFLoader.js:213) at Object.onL.

2020-12-07 16:14:50 1491 2

原创 three几何体旋转、平移、缩放变换

文章目录一、几何体的api提示：以下是本篇文章正文内容，下面案例可供参考一、几何体的api/** * 创建网格模型 */var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry// 几何体xyz三个方向都放大2倍// geometry.scale(2, 2, 2);// 几何体沿着x轴平移50// geometry.translate(50, 0, 0);// 几何体绕着x轴旋转45度.

2020-11-25 18:45:34 1203

原创 three Face3对象定义Geometry的三角面

文章目录前言一、描述1.首先创建一个几何体2.定义第一个三角面3.定义第二个三角面4.赋值给几何体的faces属性中5.三角面中的每个顶点设置颜色6.使用面的渲染模式总结前言通过Geometry定义的几何体, 只定义了顶点位置数据, 是不足以用面的渲染模式 , 只能使用点和线的渲染模式提示：以下是本篇文章正文内容，下面案例可供参考一、描述如何让Geometry使用面渲染模式, 可以使用 Geometry中的faces属性来定义faces属性是一个数组,其中每个元素都是一个Face3对.

2020-11-21 17:33:09 3050 2

原创 three设置Geometry顶点位置,顶点颜色数据

文章目录前言一、创建一个Geometry1.创建网格模型2.创建顶点颜色3.可以使用点渲染模式和线渲染模式, 不能直接使用面渲染模式小结前言使用 BufferGeometry创建的几何体,顶点数据是类型化数组使用 Geometry创建几何体使用一个对象表示Vector3提示：以下是本篇文章正文内容，下面案例可供参考一、创建一个Geometry1.创建网格模型/** * 创建网格模型 */var geometry = new THREE.Geometry(); //声明一个几何体.

2020-11-21 17:26:48 2712 7

原创 three 顶点索引复用

文章目录前言一、顶点索引复用, 可以起到节约内存存储1.创建一个几何体 , 只有4个顶点, 但是我们要创建的是四边形, 所以顶点应该有6个,而其中有两个顶点的数据是可以复用的2.创建顶点索引, 复用顶点数据3.面渲染模式总结前言顶点索引复用, 可以起到节约内存存储提示：以下是本篇文章正文内容，下面案例可供参考一、顶点索引复用, 可以起到节约内存存储1.创建一个几何体 , 只有4个顶点, 但是我们要创建的是四边形, 所以顶点应该有6个,而其中有两个顶点的数据是可以复用的/** * 创建网格.

2020-11-21 15:48:05 512

原创 three顶点法向量光照计算

文章目录前言一、给一个几何体的各个顶点设置法向量1.创建几何体2.创建各个顶点的法向量3.使用面渲染总结前言一个顶点包含了位置, 颜色 ,法向量顶点法向量是为了光照计算,灯光打到一个物体上, 会有棱角分明的情况,就是利于的顶点的法向量顶点法向量(顶点的一个方向.个人认为)光线的漫反射 = 几何体表面基色 * 光线颜色 * 光线入射角余弦值提示：以下是本篇文章正文内容，下面案例可供参考一、给一个几何体的各个顶点设置法向量1.创建几何体/** * 创建网格模型 */var geo.

2020-11-21 15:27:59 435

原创 three顶点颜色数据差值计算

文章目录前言一、创建一个几何体1.可以给每个顶点设置不同的颜色2. 组合模型几何体 + 材质2.1 点渲染模式2.2 线渲染模式 (使用线渲染模式时候, 默认会进行颜色差值计算)2.3 面渲染模式 , 使用面渲染模式, 也会进行颜色差值计算总结前言每个顶点也可以是不同的颜色提示：以下是本篇文章正文内容，下面案例可供参考一、创建一个几何体var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象//类型数组创建顶点位置position.

2020-11-21 14:44:20 480

原创 three顶点位置数据解析渲染

学习顶点概率文章目录前言一、创建几何体二、渲染模式1.(面) 已经有了几何体, 那么就是创建材质即可, 然后使用THREE.Mesh 或 THREE.Group 来组合模型2.(点) 使用了点材质(PointsMaterial), 和点模型 (Points)3.(线) 使用了线材质(LineBasicMaterial) , 和线模型(Line)三、创建相机 , 渲染器对象 , 控制器对象总结前言所有3d对象都是顶点组成一、创建几何体一个Mash对象或者Group对象的生成, 都离不开.

2020-11-20 22:46:47 687

原创 flutter完整项目结构(可以直接参照或者复用)

主要涉及到三大块router , state , api1.1 路由使用了dio: ^3.0.10目录结构如下application.dart作用 : 用于静态化import 'package:fluro/fluro.dart';class Application { static Router router;}使用Application.routernavigator_util.dart作用 : 这个里面主要是进行路由跳转方法的公共书写import 'pa.

2020-10-11 17:24:06 2740 1

转载高阶函数

高阶函数（High-Order Function）是函数式编程思维中的重要条件，而满足该条件的编程语言则需要将函数作为该语言的一等公民来看待。符合一等公民的条件是：函数可以作为一种数据类型的值，赋值于一个变量；函数可以作为参数，在其他函数中进行传递；函数可以作为返回值，在其他函数中返回；函数入参//高防maplet map = function( fn){ const t = []; for(let i = 0 ; i < this.length ; ( t.push

2020-10-11 16:13:27 163

原创 koa2洋葱模型

kao2对比express,更加的简单精巧1. 直接上代码,定义了一个最基本的中间件// ./middleware/koa-pv.jsfunction pv(ctx){ global.console.log("pv" , ctx.path);}module.exports = function () { return async function (ctx , next){ pv(ctx); await next(); }}// ./

2020-08-20 23:34:49 585

原创 typescript改造搭建express基本服务

npm i -g express-generatorexpress ts-expresscd ts-expressnpm inpm i -d typescripttsc --init将工程中所有js文件更改为ts后缀bin目录下的www更名为server.ts会发现有很多报错报错是因为没有声明文件,安装即可npm i @types/node @types/express -d安裝后报错会少一些,根据报错提示,一步一步解决主要包括,express声明文件导出方式是export =.

2020-07-19 00:00:24 1123 2

原创 vue在项目中遇到的小坑

最近在项目中, 监听某个属性的改变,然后去更该另外的一个属性使用watch时, 用了箭头函数, 导致this的指向发生了改变, 应该使用常规匿名函数即可. this就可以指向当前实例的本身了 watch: { value:{ handler: (val, olVal) => { console.log(this) } } }, //更改为 watch: { value:{ handler: function(.

2020-07-18 22:02:20 299

原创 typescript_条件类型

1. 条件类型, 根据类型的赋值情况,来决定是那个类型如果T 可以被赋值给 U ,那么就是x , 否则就是yT extends U ? x : y1. 映射类型可以将某个类型接口的类型,进行拷贝,拷贝时,可以做一些转换type TypeName<T> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extend

2020-07-11 17:43:57 932 1

原创 typescript_映射类型_详细

1. 映射类型可以将某个类型接口的类型,进行拷贝,拷贝时,可以做一些转换interface Obj { a : string ; b : number ; c : boolean ;};1.1 将接口所有类型映射为只读属性接口// 将接口所有类型映射为只读属性接口/*type ReadonlyObj = { readonly a: string; readonly b: number; readonly c: boolean; } */ty

2020-07-11 17:41:34 441

原创 vue饿了么文本域自动根据屏幕高度,动态设置autosize

<el-input type="textarea" :autosize="autosize" placeholder="请输入内容" v-model="value"></el-input><script>data(){ return { value : '', screenWidth: document.body.clientWidth, timer:fal

2020-07-09 20:36:33 3469

原创 typescript_索引类型

1.索引类型let obj = { a : 1 , b : 2 , c : 3 ,};function getKey(obj : any , keys : string[]){ return keys.map((key)=>obj[key]);}//指定所包含的属性console.log(getKey(obj,["a" , "b"]));//放入不包含的属性,正常情况我们希望这种要报错console.log(getKey(obj,["c","f"]));

2020-07-03 00:06:31 388

原创 typescript_交叉类型和联合类型

1.1 交叉类型interface DonInterface { run():void;}interface CatInterface { jump():void;}//这里的pet将两个类型合并,所以pet必须保护两个类型所定义的方法let pet : DonInterface & CatInterface = { run:function(){}, jump:function(){}}1.2 联合类型let a : number | strin

2020-07-03 00:01:59 1471

原创 typescript_类型保护

1 . 类型保护//TypeScript 能够在特定的区块中保证变量属于某种确定的类型//可以做此区块中放心的引用次类型的属性,或者调用此类型的方法enum Type {Strong , Week};class Java { helloJava(){ console.log('Hello Java'); } java : string;}class JavaScript { helloJavaScript(){ console.

2020-07-02 23:57:45 220

原创 typescript_类型兼容

什么是类型兼容?当一个类型 Y 可以被赋值给另一个类型 X 时 , 我们就可以说类型 X 兼容类型 YX 兼容 Y : X (目标类型) = Y (源类型)let a : string = "1";a = null;//正常这样书写会报错, 那么可以把ts的配置strictNullChecks 设置为false即可//这样就可以说, 字符型是兼容 null类型的,也就是说null是字符类型的子类型//这里讨论类型的兼容性问题, 是因为ts在某种情况下,允许我们将不同类型的值进行赋值, 虽然

2020-07-01 00:10:23 265

原创 typescript_类型检查机制(1) 类型推断

1. 小试牛刀let a = 1 ; //typescript自动推断为any类型 a: numberlet b = [] ; //typescript自动推断为数组类型 any[]2. 当从多个类型进行推断时,ts尽力推断出所有属性都兼容的类型let c = (x = 1) => x + 1; //let c: (x?: number) => number3. 上下文推断-一般发生在事件的处理中window.onkeydown = (event : any) => {

2020-07-01 00:06:15 344

原创 typescript_泛型函数和泛型接口泛型类与泛型约束

1.泛型函数和泛型接口function log<T>(value : T) : T{ console.log(value); return value;}log<number>(1);log<string>("1");log<object>({});log<string[]>(["1"])interface Log<T> { (value : T) : T;}let myLog : Log&

2020-07-01 00:03:49 673

转载一机双屏和双屏通信方案总结

项目中需要用到web一机双屏，也就是一台电脑，两个屏幕，每个屏幕分别展示一部分的内容，两个web标签页之间自然少不了实时通信和互动，下面简单介绍一下，在项目中对该问题的思考和最终解决方案：一：打开两个标签页的方案1.如果打开的标签页是固定的，则可以直接在a标签加上target="_blank"属性搞定！例如：打开必应首页代码为：必应首页2.如果页面地址是动态变化的，则可以使用js的 window.open(url)方法。有两个注意点：第一个安全性问题：如果父页面和新打开的页面诗不同

2020-06-23 10:23:58 664

原创 typescript_类与接口的关系

1. 类型接口1.1 接口可以约束类的定义1.2 类必须实现接口的全部定义,可以新增额外的属性和方法1.3 接口只能约束类的公有成员1.4 接口不能约束类的构造函数interface Human { name : string; eat () : void;}class Asian implements Human { constructor(name : string) { this.name = name; } name :　str

2020-06-20 18:01:36 403

原创 typescript_抽象类与多态

1. 抽象类的定义1.1 抽象类 - 可以提取公用代码, 利于代码的复用和扩展1.2 抽象类不能直接实例化1.3 抽象方法,子类不需要实现该方法abstract class Animal { eat () { console.log("e") } abstract sleep() : void //抽象方法,子类必须实现该方法}class IsDog extends Animal { constructor(name : string) {

2020-06-20 17:57:49 386

原创 typescript_类的继承和修饰符

类的继承,必须在constructor中调用superclass Dog { constructor(name : string) { this.name = name; } public name : string;//修饰符公有成员,对所有人都是可见的 private pri(){};//修饰符私有成员 ,只能在类的本身调用,不能做类的实例和子类调用,如果给constructor使用该修饰符,那么这个类既不能被实例化,也不能被继承 protec

2020-06-13 20:17:06 230

原创 typescript_函数相关知识点梳理

4种方式1.函数定义function add1 (x:number , y :number){ return x + y}2.通过变量定义函数类型let add2 : (x: number , y : number) => number;3.通过类型别名定义一个函数类型type add3 = (x:number , y : number) => number;4.通过接口定义函数类型interface add4 { (x: number , y : num

2020-06-13 20:10:22 168

原创 typescript_对象类型接口_详细

1.参数固定属性,且函数返回值必须是number类型 let isAdd : (x : number , y : number) => number; 2.参数固定属性,且函数返回值必须是number类型,跟上面是等价的 interface Add { (x:number , y:number) : number } 3.类型别名,相当于给函数起一个名字 type Add = (x: number , y: number) => number;let isadd :.

2020-06-13 20:04:41 485

原创 typescript_枚举类型

在使用枚举类型之前,一般用于灵活的参数上不用那么硬编码, 改一个参数,就要动整个结构 1.1 数字枚举// 可以指定某个属性的值,而下面的属性的值会跟着递增// 数字枚举存在反向映射,即可以通过key读取,又可以通过值读取enum Role { Reporter, Developer, Maintainer, Owner, Guest} 1.2 字符串枚举// 字符串枚举不存在反向映射,因此只能通过key读取enum Message { .

2020-06-13 19:59:48 146

原创 typescript_对象类型接口

对象类型接口interface List { readonly id : number, //只读属性不可修改 name : string, // [x : string] : any age ? : string};interface Result { data:List[]};function render(result : Result){ result.data.forEach((item)=>{ console.l.

2020-06-13 19:58:58 213

空空如也

空空如也