canvas 中如何实现文字换行?canvas 中如何实现 letter-space 效果?

canvas 使用过程中,我们经常会遇到到把文字换行的情况,canvas 要实现换行,并没有 css 中使用样式换行那么方便,但 canvas 提供测量工具函数 measureText 给你测出每个文字的宽度,然后自己用它来按需切割文本为多行,然后按需把多行一行一行地绘画到 canvas 上实现换行效果。在 canvas 要实现 letter-space 也没有太好的办法,但在 stackoverflow 中,有人提出一种比较有效的近似的办法, 继续阅读

使用 vw 结合 scss / sass 超简单实现页面自适应 / 响应式布局

最近做大屏幕开发时需要把 1920px 的设计稿做成响应式布局,因为是要在同一个 Vue 项目里面同时实现移动端 + PC 端大屏幕的自适应,移动端的设计稿是 750px,大屏幕的设计稿则是 1920px,项目中默认使用了 750px 的淘宝 flexible.js的 rem 的自适应的解决方案,那么 PC 端大屏幕端呢?现需要同时实现 PC 端大屏幕端自适应。让 UI 把设计稿改为 750 是不可能的。之前就了解过 vw / vh 的自适应解决方案,但还未真正在项目中使用过, 继续阅读

使用淘宝 flexible.js / amfe-flexible.js 的 Rem 解决方案部分手机适配不了问题

使用淘宝 flexible.js / amfe-flexible.jsRem 解决方案部分手机会出现适配不了问题。网上已经有了解决方案,但很多人并不知道是什么原因导致的。导致此问题的出现主要是用户的手机使用了自定义的字体,导致我们动态设置 html 根元素的 font-size 的值后,与实际的效果 font-size 值不一致。为什么呢?因为某些自定义的字体,假如你设置根元素的 font-size41.4px,但其实这种字体是偏大的,结果其实际在页面上看到的效果可能是 42px。这样就会导致:假如页面屏宽为 414px ,但我们设置页面宽度为的 10rem420px,页面效果就是会偏大, 继续阅读

Vue-cli 4.x / Vue-cli 3.x 中报 You are using the runtime-only build of Vue where the template compiler is not available

在 Vue-cli 4.x / Vue-cli 3.x 项目中报:[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 警告,导致这问题的常见原因是用户习惯地把 Vue 2.x 项目中的 main.js 里面的下面代码段拷过来直接覆盖 Vue-cli 4.x / Vue-cli 3.x 初始生成中的 main.js 的下面代码段 继续阅读

Json 转 csv 下载的 Js 实现方法 / Blob 导出 csv 出现中文乱码解决方案

Json 转 csv 并实现下载的 Js 实现方法封装 / Blob 导出 csv 时使用 excel 打开会出现中文乱码的解决方案(其实就是在 csv 数据前添加一个 ‘\ufeff’)如下:

这里使用 json 转 csv 直接使用 json2csv 这个非常方便好用的 npm 包,node 下直接执行 npm install json2csv 安装依赖包 继续阅读

Vue-Cli 4.x 配置 postcss-plugin-px2rem 及 autoprefixer 作为移动端 h5 自适应解决方案

在 vue-cli 4.x 中如何配置 postcss-plugin-px2rem 进行移动端开发?如何配置 autoprefixer 进行样式预处理?

在项目 vue-cli 4 创建的 vue 项目根目录下创建 vue.config.js 文件,系统会自动检测此配置文件,然后配置如下: 继续阅读

深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解

前言

之前在一篇文章《深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?》已经初步介绍了如何通过 formatter 结合 rich 来处理 label 自定义文字样式,但我们会经常遇到一些情况,就是 echarts 的 x 轴文字太长显示不全或者 label 文字过长被隐藏的情况。如何要实现 label / Label / axisLabel 里面的内容设置换行及同时单独设计样式呢?之前并没有涉及到 继续阅读

支付宝内嵌 h5 页面前端开发常见问题

一、支付宝内 H5 页面长按 Base64 图片没反应问题(安卓端支付宝)

支付宝官方已解释,支付宝安卓客户端目前只支持 http 格式的图片这样长按保存操作, 不支持其它格式的图片,如 base64 图片格式。目前苹果 ios 暂无此问题。
详见:https://openclub.alipay.com/club/history/read/9024

二、支付宝使用 canvas drawImage 画带阴影的 png 图片,阴影会严重失真(安卓端支付宝)

继续阅读

使用 CryptoJS 进行 AES 的 128 bit 加密和解密

CryptoJS 是一个多功能 js 加密解密库,是一个前端 jser 不可不知的前端工具包。那么,使用 CryptoJS 是如何进行 AES 的 128 bit 加密和解密呢?废话不多说,下面直接上代码,已封装好,可以直接使用,拿走不谢。使用之前先使用 npm 安装一下包:npm install crypto-js 继续阅读