Fabric 助力可视化，效率提升100倍

最新推荐文章于 2024-01-18 16:52:48 发布

lefex

最新推荐文章于 2024-01-18 16:52:48 发布

阅读量694

点赞数

文章标签：可视化 html canvas javascript 数据可视化

本文链接：https://blog.csdn.net/lefex/article/details/120170589

版权

本文介绍了如何利用 Fabric 库解决 Canvas 中文本选中复制的问题，Fabric 是一个数据驱动的 Canvas 绘图库，支持图形、文本的交互式绘制，包括矩形、圆形、线条、文本等，并提供了文本选中、动画、组选等高级功能。通过 Fabric，可以提高开发效率并实现复杂的 Canvas 动画和交互。

摘要由CSDN通过智能技术生成

最近被一个问题困扰着：使用 Canvas 绘制的文本，如何实现文本选中复制功能。类似这种效果，被选中的文字高亮：

如果使用 HTML 渲染文本，浏览器会自动支持文本选择，无需开发者处理，而「使用 Canvas 绘制，必须自己实现这个功能」。

这个问题的难点在于处理的情况比较多，绘制的文本样式不固定，比如同行文本字体大小可能不一致、每行的字数不一、行之间存在空行等。一直想找一种比较完美的方案，始终没有找到。

无意中看到了 Fabric，发现它实现了我上面遇到的这个问题，虽然和我的需求有一些差别，不过可以借鉴作者的思路。周末花了 2 天时间跟着 Fabric 的官网教程写了一遍 demo，并看了文本绘制的源码。

Fabric 是一个以数据驱动的 Canvas 绘图库，也就是说你只需要提供数据源，Fabric 会根据你提供的数据自动进行绘制，如果想要修改绘制的属性，只需修改数据源即可。我们详细看一下 Fabric 提供的功能：

各种图形绘制：

const canvas = new fabric.Canvas('draw-app');
// 创建一个矩形
let rect = new fabric.Rect({
    top: 100,
    left: 100,
    width: 100,
    height: 100,
    fill: 'red',
    angle: 45
});
// 把矩形绘制到画布上
canvas.add(rect);

上面的代码绘制了一个矩形，点击后会出现拖拽的手柄，可以对矩形进行放大、缩小、旋转、移动操作，其核心点是实现了「图形可交互」：