Mac 安装 Mysql

mac mysql 安装和使用的基本步骤

阅读全文

PixiJs 极简教程

PixiJs 是比较常用的 canvas 库,用来展示 2d 的平面图,相比 canvas,封装了更多的功能,也更简单容易上手,但是其官网的文档写得极其的简陋,可阅读性很差,综合了一些其他的文档,写出了这份极简教程,让小白也可以拿来即用。

一、创建画布

//创建别名
let Application = PIXI.Application,
loader = PIXI.Loader.shared,
resources = PIXI.Loader.shared.resources,
Texture = PIXI.Texture,
TextureCache = PIXI.utils.TextureCache,
Rectangle = PIXI.Rectangle,
Sprite = PIXI.Sprite;

// 创建一张 canvas 画布
let app = new Application({
width: 256,
height: 256,
antialiasing: true,
transparent: false,
resolution: 1,
});
// 把新创建的 canvas 画布挂载到对应的节点上
this.$refs.container.appendChild(app.view);

阅读全文

计算机图形学 —————— 空间中的物体(2)

在计算机图形学 —————— 空间中的物体(1)中,我讲到了网页中颜色的填充方法,这一篇,我来讲讲网页中的视点。有空间观念的话,应该知道我们的眼睛看物体总是越近的物体看得越清楚,越大,越远的物体显得越渺小,也就是近大远小的规律。

空间中的物体,从不同角度看,给我们的视觉效也是不一样的,而视点又有上下左右之分,每个方向的视点位置也同样会影响到物体的视觉效果。

阅读全文

计算机图形学 ———— 空间中的物体(1)

学过素描的应该都知道,物体的空间感/立体感是通过阴影渲染出来的,要画出一个具有立体感的物体,要清楚的区分出黑白灰三面,还有五调子,其中的黑灰是根据光线的强弱来判别的,比如光线的聚点,可能就是高光的位置,比较亮,而背面则是阴影,是比较暗的,但是这并不是最暗的位置,最暗的的位置应该是明暗交界线。

阅读全文

项目模块化原则

1、组件划分为业务组件和 UI 组件

2、按照先业务后功能的方式去颗粒化组件

3、数据驱动,业务操作在业务组件里完成

4、UI组件不参与业务,不处理业务逻辑,只做展示之用

5、公共的组件、接口、css,抽离出来,不掺杂在业务逻辑里

阅读全文

文件命名为什么提倡用英文小写字母而不用大写字母

开发遇到了个问题,项目在本地编译得好好的,在 ci 上编译一直报错,说是找不到路径,本地看了好多遍路径都是对的,感觉是玄学。

想了想没做什么操作,就是看不习惯之前的命名方式,好几个单词写在一起,想统一成驼峰命名法,于是把两个文件夹的两 a 个单词开头写成了大写字母~

后来发现就是这个在 win 系统下手动改文件名由大写改为小写的锅,因为在 win 系统中是大小写不区分的,导致在 git push 的时候,push 上去的文件还是那个全是小写字母的,所以会一直报找不到路径的错误。但是如果文件一开始就是驼峰命名法,就不存在这个问题了,因为提交上去的就是新的文件。

阅读全文

说说网页自适应和响应式布局

忙完一段时间,发布了一版之后,习惯性的放下手头一些需求,去整理之前的项目,看看存在什么问题,是否有可优化的空间。发现我写的页面存在一个很大的问题,那就是多分辨率适配的问题。之前一直用着响应式的理念,根据页面调整布局,但是发现与产品的需求相悖,他们希望看到的是所有分辨率的显示屏显示的效果一致。

阅读全文

React Hooks 创建电影 App

使用 react hooks 搭建一个电影 App,该 demo 属于一个极简版,参考自一个外国哥们写的 《How to build a movie search app using React Hooks》,文章的核心围绕用 react hook 搭建一个电影 App 的关键步骤展开,没有多余的描述,代码可以开箱即用,欢迎食用。

阅读全文

Canvas 绘制雪碧图导出

在开发中,我们经常会用到雪碧图,有时候 UI 可能给了很多小图,没有给到雪碧图,为了减少请求,我们会选择自己去在线生成或 ps,但是这样太繁琐了,能不能我们用一个函数实现呢?网上很多方案是借助 webpack 实现这个功能的,但是我想能不能简单点,于是就有了这个 demo,目前该 demo 可以合成雪碧图导出,但是没有导出对应的坐标 json 文件,后期再完善,先这样。

阅读全文

Web 优化 ——— 添加骨架屏

摘要:
最近做网页优化,发现页面会有一段白屏时间,给人的体验就是网页会有一闪而出的感觉,也就是我们常说的闪屏,查了一些资料,发现实现思路都是异曲同工的,就是在页面节点还没加载之前,先插一段静态网页,节点加载了再去掉这段静态代码,显示数据渲染出来界面。一般需要加骨架屏的界面,是一些动态加载数据的界面,因为数据没出来,会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏,用会觉得网页加载比较快,属于一种视觉欺骗的手段吧。

阅读全文