腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有意思的前端世界

专栏作者

85

文章

106324

阅读量

18

订阅数

如何从零实现一个词云效果

数据渲染容器 width 遍历

词云是一种文本数据的可视化形式，它富有表现力，通过大小不一，五颜六色，随机紧挨在一起的文本形式，可以在众多文本中直观地突出出现频率较高的关键词，给予视觉上的突出，从而过滤掉大量的文本信息，在实际项目中，我们可以选择使用wordcloud2、VueWordCloud等开源库来实现，但是你有没有好奇过它是怎么实现的呢，本文会尝试从0实现一个简单的词云效果。

2024-02-27

1040

两天实现思维导图的协同编辑？用Yjs真的可以

同步对象事件数据思维导图

最近使用 Yjs 给自己开源的一个思维导图加上了协同编辑的功能，得益于该框架的强大，一直觉得很复杂的协同编辑能力没想到实现起来异常的简单，所以通过本文来安利给各位。

2024-02-12

1500

dom-to-image库是如何将html转换成图片的

image 对象 html dom function

dom-to-image库可以帮你把dom节点转换为图片，它的核心原理很简单，就是利用svg的foreignObject标签能嵌入html的特性，然后通过img标签加载svg，最后再通过canvas绘制img实现导出，好了，本文到此结束。

2024-02-12

1910

探索如何将html和svg导出为图片

html 渲染 svg 浏览器字符串

笔者开源了一个Web思维导图，在做导出为图片的功能时走了挺多弯路，所以通过本文来记录一下。

2023-09-11

4480

我开源了一个思维导图

渲染开源缓存数据思维导图

我对思维导图最初的了解来源于我的老婆，她很喜欢用思维导图来记录各种东西，看的多了，作为一个前端，就会好奇这东西是怎么实现的，于是我在网上搜了一下，看到了一篇介绍思维导图基本结构--逻辑结构图的一种布局算法，然后我就想，布局算法有了，我再实现一下节点内容渲染、节点连线、展开收起、编辑之类的功能不就可以实现一个简单的思维导图了么，顺便还可以产出一篇文章，是的，能写文章是我做这个的最大动力。

2023-08-16

6831

用flex布局实现一个流程设计器

渲染 flex 布局连接设计

支持添加、编辑和删除节点，节点只有四种类型：开始节点、普通节点、分支节点、结束节点。

2023-07-09

1720

一文看完Vue3的渲染过程

渲染 vue3 对象函数数据

本文会从源码角度来草率的看一下Vue3的运行全流程，旨在加深对上图的理解，从下面这个很简单的使用示例开始：

2023-07-09

3710

如何用canvas实现一个富文本编辑器

渲染 canvas 富文本编辑器事件数据

富文本编辑器相信大家都用过，相关的开源项目也很多，虽然具体的实现不一样，但是大部分都是使用DOM实现的，但其实还有一种实现方式，那就是使用HTML5的canvas，本文会带大家使用canvas简单实现一个类似Word的富文本编辑器，话不多说，开始吧。

2023-07-09

1K0

一起来做一个json格式化工具吧

json 对象工具数组字符串

说到json格式化你肯定很熟悉，毕竟压缩后的json数据基本不可读，为了方便查看，我们可以在编辑器中可以通过插件一键格式化，也可以通过一些在线工具来美化，当然，有时在开发中也会遇到json格式化的需求，有很多开源库或组件能我们解决这个问题，不过并不妨碍我们自己实现一个。

2023-07-09

2890

利用这个css属性，你也能轻松实现一个新手引导库

css 网站 window 递归浏览器

相信大家或多或少都在各种网站上使用过新手引导，当网站提供的功能有点复杂时，这是一个对新手非常友好的功能，可以跟随新手引导一步一步了解网站的各种功能，我们要做的只是点击下一步或者上一步，网站就能滚动到指定位置，然后高亮页面的一部分，并且配以一些图文介绍。

2023-07-09

3250

为什么面试官这么爱问性能优化？

缓存接口性能性能优化优化

笔者是一个六年前端，没有大厂经历，也没有什么出彩的项目，所以今年以来，前端现在这种行情下并没有收到多少面试，但是为数不多的面试中，百分之九十都问到了性能优化的问题，而且问题都出奇的一致：

2023-06-10

1910

我的第一个Electron应用

打包渲染 electron 进程系统

hello，好久不见，最近笔者花了几天时间入门Electron，然后做了一个非常简单的应用，本文就来给各位分享一下过程，Electron大佬请随意~

2023-05-31

1.1K0

面试官问我按钮级别权限怎么控制，我说v-if，面试官说再见

vue.js 渲染网站

最近的面试中有一个面试官问我按钮级别的权限怎么控制，我说直接v-if啊，他说不够好，我说我们项目中按钮级别的权限控制情况不多，所以v-if就够了，他说不够通用，最后他对我的评价是做过很多东西，但是都不够深入，好吧，那今天我们就来深入深入。

2023-03-14

5820

如何在canvas中模拟css的背景图片样式

笔者开源了一个Web思维导图mind-map，最近在优化背景图片效果的时候遇到了一个问题，页面上展示时背景图片是通过css使用background-image渲染的，而导出的时候实际上是绘制到canvas上导出的，那么就会有个问题，css的背景图片支持比较丰富的效果，比如通过background-size设置大小，通过background-position设置位置，通过background-repeat设置重复，但是canvas笔者只找到一个createPattern()方法，且只支持设置重复效果，那么如何在canvas里模拟一定的css背景效果呢，不要走开，接下来一起来试试。

2023-03-01

7K0

当你按下方向键，电视是如何寻找下一个焦点的

我工作的第一家公司主要做的是一个在智能电视上面运行的APP，其实就是一个安卓APP，也是混合开发的应用，里面很多页面是H5开发的。

2023-03-01

5200

Vue Demi是如何让你的库同时支持Vue2和Vue3的

这两种方式都有缺点，第一种很麻烦，第二种无法使用Vue3新增的组合式 API，其实现在Vue2.7+版本已经内置支持组合式API，Vue2.6及之前的版本也可以使用@vue/composition-api插件来支持，所以完全可以只写一套代码同时支持Vue2和3。虽然如此，但是实际开发中，同一个API在不同的版本中可能导入的来源不一样，比如ref方法，在Vue2.7+中直接从vue中导入，但是在Vue2.6-中只能从@vue/composition-api中导入，那么必然会涉及到版本判断，Vue Demi就是用来解决这个问题，使用很简单，只要从Vue Demi中导出你需要的内容即可：

2023-03-01

1.4K0

可视化大屏的几种屏幕适配方案，总有一种是你需要的

网站 canvas 容器

假设我们正在开发一个可视化拖拽的搭建平台，可以拖拽生成工作台或可视化大屏，或者直接就是开发一个大屏，首先必须要考虑的一个问题就是页面如何适应屏幕，因为我们在搭建或开发时一般都会基于一个固定的宽高，但是实际的屏幕可能大小不一，接下来我们就尝试几种简单且常见的方案，并简单分析一下利弊。

2022-11-23

2.8K0

我让虚拟DOM的diff算法过程动起来了

去年写了一篇文章手写一个虚拟DOM库，彻底让你理解diff算法介绍虚拟DOM的patch过程和diff算法过程，当时使用的是双端diff算法，今年看到了Vue3使用的已经是快速diff算法，所以也想写一篇来记录一下，但是肯定已经有人写过了，所以就在想能不能有点不一样的，上次的文章主要是通过画图来一步步展示diff算法的每一种情况和过程，所以就在想能不能改成动画的形式，于是就有了这篇文章。当然目前的实现还是基于双端diff算法的，后续会补充上快速diff算法。

2022-11-14

8750

只需百十行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？

json javascript node.js api 编程算法

笔者开源了一个Web思维导图mind-map，数据默认是存储在localstorage里，如果想保存到本地文件，需要使用导出功能，下次打开再使用导入功能，编辑完如果又想保存到文件，那么又需要从重新导出覆盖原来的文件，不得不说，可以但不优雅，所以最近增加了直接编辑本地文件的能力，体验了一下，还是不错的，并且就是调调API的事情，很简单，何乐而不为。

2022-11-08

6330

本想搞清楚ESM和CJS模块的互相转换问题，没想到写完我的问题更多了

javascript 编程算法 node.js

目前主流的有两种模块语法，一是Node.js专用的CJS，另一种是浏览器和Node.js都支持的ESM，在ESM规范没有出来之前，Node.js的模块编写使用的都是CJS，但是现在ESM已经逐渐在替代CJS成为浏览器和服务器通用的模块解决方案。

2022-11-02

1.7K0

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态