svg中path贝塞尔曲线和圆弧图文详解

最近研究了一下svg的path标签,功能非常强大,理论上来讲path标签可以画出任意图形。自己记性不太好,记录一下path的使用语法和自己的理解。path介绍path用d属性来描述路径,语法格式大概如下:<svg> <path d="路径描述" /> </svg>其中路径描述包含如下命令:M = moveto 移动到某点。 L = l

- 阅读全文 -

现代 CSS 解决方案:Modern CSS Reset

Normalize.css 为例,它的核心思想是:统一了一些元素在所有浏览器下的表现,保护有用的浏览器默认样式而不是完全清零它们,让它们在各个浏览器下表现一致;为大部分元素提供一般化的表现;修复了一些浏览器的 Bug ,并且让它们在所有浏览器下保持一致性;通过一些巧妙的细节提升了 CSS 的可用性;提供了详尽的文档让开发者知道,不同元素在不同浏览器下的渲染规则;如今,Normalize 已经出到了

- 阅读全文 -

基于Vite+vue3+ant design的定制主题使用方式

近期在使用vite、vue3.x、ant design3.x尝试搭建框架在UI库配置的时候,尝试了如下几种方式进行定制主题(自定义主题)本次使用库版本"ant-design-vue": "^2.2.8", "vite": "^2.8.4", "less": "^4.1.2", &

- 阅读全文 -

解决:微信小程序 Vant Weapp 没有找到可以构建的NPM包,请确认需要参与构建的npm在miniprogramroot目录

最近Vant Weapp的组件库,结果构建npm的时候翻车了,回去查了官方文档,原来要修改project.config.json文件npm init npm i @vant/weapp -S --production开发者工具创建的项目,miniprogramRoot默认为 miniprogram,package.json在其外部,npm 构建无法正常工作。需要手动在 project.config

- 阅读全文 -

在Canvas中使用React Hooks

在本文中,我将使用React Hooks创建一个html canvas 画图网站,我将使用create-react-app脚手架从零开始构建项目。最后这个应用程序有诸如清除、撤销和使用localStorage基本功能。本文我将向您展示任何构建自定义Hooks和在普通的Hooks中重用有状态逻辑。基本设置我们首先使用create-react-app创建一个新的React应用程序。$ npx crea

- 阅读全文 -

Vue3 的 script setup 语法糖是真的爽

还记得刚体验 script setup 语法糖的时候,编辑器提示我这是一个实验性的提案,要使用的话,需要固定 Vue 版本。而在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,你可以继续使用但仍会有实验性提案的提示,在 v3.2 中,才会去除提示并移除一些废弃的 API。script setup 是个啥?它是 Vue3 的一个新语法糖,在 setup 函数中。所有 ES 模块导出都被认为

- 阅读全文 -

PIXI.JS 点击获取当前坐标

PIXI Canvas 点击事件如下​ onMounted(() => { console.log('mounted') app.renderer.plugins.interaction.on('pointerdown', (event: PIXI.InteractionEvent) => { let ax = event.data.get

- 阅读全文 -

前端自动化构建工具 ---- Plop

plop:可以通过命令行去生成、处理文件模板代码等.使用条件参考:项目的每个模块的结构骨架都非常相似,引入模版内容相同就可以使用Plop来实现自动化了,Plop旨在根据模板文件自动化创建组件。受制于Vue语法限制以及vscode失败的拆件,采用了plop 自动化构建模版安装plop安装到项目npm install --save-dev plop全局安装plop(可选,建议安装方便使用)npm in

- 阅读全文 -

css回流重绘

回流回流又名重排,指几何属性需改变的渲染。但感觉回流这个词比较高大上,后续统称回流吧。可理解成,将整个网页填白,对内容重新渲染一次。只不过以人眼的感官速度去看浏览器回流是不会有任何变化的,若你拥有闪电侠的感官速度去看浏览器回流(实质是将时间调慢),就会发现每次回流都会将页面清空,再从左上角第一个像素点从左到右从上到下这样一点一点渲染,直至右下角最后一个像素点。每次回流都会呈现该过程,只是感受不到而

- 阅读全文 -