魔鱼搭投编辑器 ，一款优秀的前端界面可视化工具
背景 魔鱼搭投编辑器是一个前端页面可视化搭建工具，运营借助编辑器可以调用搭投的底层能力，在无需开发介入的情况下，自主修改页面内容；简单举几个需求场景增强一下体感： 结合上回《闲鱼前端技术体系的背后——魔鱼》的介绍，我们回顾建设魔鱼平台的目标： 提升前端研发效率，收敛工程研发管理流程； 动态数据源可配置投放，从而在网关层优化页面首屏性能； ...
前端可视化：Fabric.js HTML5 canvas 工具库(4)
缩放和平移画布缩放画布以原点为基准缩放画布// 监听鼠标滚轮事件 canvas.on('mouse:wheel', opt => { let delta = opt.e.deltaY // 滚轮向上滚一下是 -100，向下滚一下是 100 let zoom = canvas.getZoom() // 获取画布当前缩放值 // 控制缩放范围在 0.01~20 的区...
前端可视化：Fabric.js HTML5 canvas 工具库(3)
转换旋转角度 anglelet triangle = new fabric.Triangle({ top: 100, left: 100, width: 80, height: 100, fill: 'blue', angle: 30 // 旋转30度 }) 缩放 scaleX 和 scaleY let triangle = new fabri...
前端可视化：Fabric.js HTML5 canvas 工具库(2)
绘制路径// 绘制路径 const path = new fabric.Path('M 0 0 L 200 100 L 170 200 z') path.set({ top: 50, // 距离容器顶部距离 50px left: 50, // 距离容器左侧距离 50px fill: 'hotpink', // 填充 亮粉色 opacity: 0.5, // 不透明...
前端可视化：Fabric.js HTML5 canvas 工具库(1)
Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。文档：官网：http://fabricjs.com/github: https://github.com/fabricjs/fabric.js安装基本示例创建容器<canvas id="canvas" width="400" height="400" style="bor...
前端打包优化分析的可视化工具——Webpack Bundle Analyzer
打包优化每个项目的时候，除了看控制台每个包的大小，其实十分推荐一款插件工具 Webpack Bundle Analyzer 它自己的介绍Visualize size of webpack output files with an interactive zoomable treemap.使用交互式可缩放树形图可视化 webpack 输出文件的大小。它能做到的本模块将帮助您：了解捆绑包中的真正内容....
这款前端可视化代码执行工具，打残js执行过程
一、工具页面整个页面看起来是如此的朴素，包含三个区块：代码区块、操作区块、可视化区块，三个区块的功能如下所示：代码区块该部分主要负责编辑要执行的代码，特别注意，该工具不支持一些函数，例如：setTimeout、setInterval等，这部分确实是该平台需要进一步优化的点。操作区块操作区块主要负责代码的移动，First按钮将代码运行到开头；Last按钮将代码运行到末尾；Prev负责逐行将代码移动....
本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。
阿里巴巴终端技术
阿里巴巴终端技术最新内容汇聚在此，由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界，将面向未来，制定技术策略和目标并落地执行，推动终端技术发展，帮助工程师成长，打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号：阿里巴巴终端技术，欢迎关注。
+关注