为何现在市面上做表格渲染可视化技术的，大多数都是 canvas ， 而很少用 svg 的？【热度: 302】

web应用场景阿里巴巴

关键词：canvas使用场景、canvas可视化、svg使用场景

都用上了可视化技术做渲染， 在这个场景下， 大多数考虑的是性能；

所以主要基于几个方面去衡量技术方案的选择： 性能、动态交互、复杂图形支持

  • 性能：Canvas 通常比 SVG 具有更好的性能。Canvas 是基于像素的绘图技术，而 SVG 是基于矢量的绘图技术。由于 Canvas 的绘图是直接操作像素，所以在大规模绘制大量图形时，Canvas 的性能优势更为明显。而 SVG 生成的图形是由 DOM 元素组成，每个元素都要进行布局和绘制，因此在处理大量图形时会有性能瓶颈。

  • 动态交互：Canvas 更适合处理动态交互。由于 Canvas 绘制的图形是像素级别的，可以直接对图形进行像素级别的操作，可以方便地进行复杂的动画和交互效果。而 SVG 的图形是由 DOM 元素组成的，每个元素都要进行布局和绘制，所以在处理复杂的动态交互时，性能方面可能会受到限制。

  • 复杂图形支持：Canvas 更适合处理复杂的图形。由于 Canvas 是像素级别的绘制，可以直接操作像素，因此可以实现更加灵活和复杂的图形效果，比如阴影、渐变等。而 SVG 的图形是基于矢量的，相对来说对复杂图形的支持可能会有一些限制。

追问： canvas 和 svg 在动态交互上有什么具体的区别？

元素操作：在 Canvas 中，绘制的图形被视为位图，无法直接访问和操作单个元素，需要通过 JavaScript 对整个画布进行操作。而在 SVG 中，每个图形元素都是 DOM 元素，可以直接访问和操作单个元素，比如修改属性、绑定事件等。

真是场景： 比如在 table 开发场景下， svg 能通过元素进行事件绑定进行用户操作事件驱动， 比较方便， 但是同样的用户操作， 用 canvas 去驱动， 显得并不是那么的方便。 这个问题 canvas 是如何解决的？

在 Table 开发场景下，SVG 确实更适合进行事件绑定和用户操作事件驱动。使用 SVG，可以直接操作每个图形元素，为其绑定事件处理程序，实现用户交互。

而 Canvas 在处理用户操作事件驱动方面相对不太方便，因为 Canvas 绘制的是位图，并不直接支持事件绑定。但是可以通过以下方式解决这个问题：

  • 通过将 Canvas 元素放置在 HTML 元素之上，再利用 CSS 控制其位置和尺寸，实现与用户交互的感觉。然后通过监听 HTML 元素的事件，通过 JavaScript 判断用户操作的位置与 Canvas 上的图形元素是否相交，从而模拟出用户交互的效果。

  • 使用第三方库或框架，如 Fabric.js、Konva.js 等，它们提供了更高级的 API 和事件系统，使得在 Canvas 上进行用户交互更加方便。这些库可以处理用户操作事件，检测点击、拖拽、缩放等交互操作，并提供了事件绑定和管理的方法。

通过以上方式，可以在 Canvas 中实现一些基本的用户交互，但相比于 SVG 来说，Canvas 的事件处理和用户交互仍然相对繁琐一些。所以在需要大量的用户交互和事件处理的情况下，SVG 仍然是更好的选择。

追问： canvas 如何更为方便的提供事件处理能力？因为 canvas 不能进行事件绑定等， 显得就非常的不方便

在 Canvas 中提供事件处理能力，可以通过以下两种方式更为方便：

  1. 使用第三方库或框架：有一些流行的 Canvas 框架可以帮助简化事件处理，例如 Fabric.js、Konva.js 和 EaselJS 等。这些库封装了 Canvas 的底层API，提供了更高级的事件系统和方法，可以轻松地为图形元素绑定事件处理程序，实现用户交互。

  2. 手动实现事件处理：通过监听 HTML 元素的事件（例如鼠标点击、移动、滚轮等），再结合 Canvas 的绘制和坐标计算，可以手动实现事件处理。以下是基本的步骤：

    • 获取鼠标或触摸事件的坐标。
    • 判断坐标是否在 Canvas 绘制区域内。
    • 找到被点击的图形元素（如果有）。
    • 根据事件类型执行相应的操作，如拖拽、缩放、点击等。

追问: Fabric.js 是如何进行 canvas 底层事件 api 的封装的？

Fabric.js 是一个强大的 Canvas 库，它在提供图形绘制和交互能力的同时，也封装了 Canvas 的底层事件 API，简化了事件处理的流程。下面是 Fabric.js 如何封装 Canvas 底层事件 API 的一些主要方式：

  1. 事件监听：Fabric.js 提供了 on 方法，用于在 Canvas 上注册事件处理程序。可以监听各种事件，如鼠标点击、移动、滚动、键盘事件等。通过这个方法，可以为整个 Canvas 或图形元素绑定事件。

  2. 事件对象：在事件处理程序中，Fabric.js 将底层事件对象进行封装，提供了一个更高级的事件对象（fabric.Event），其中包含了更多有用的信息，如事件类型、触发坐标、关联的图形对象等。

  3. 坐标转换：Fabric.js 提供了一系列的方法来处理坐标转换，使得事件处理更加方便。可以通过 getPointer 方法获取相对于 Canvas 的坐标，通过 localToGlobal 和 globalToLocal 方法在不同坐标系之间进行转换。

  4. 交互操作：Fabric.js 提供了一些方便的方法来处理用户交互，如拖拽、缩放、旋转等。通过 dragging、scaling、rotating 等属性和方法，可以轻松地实现这些交互操作，并在事件处理程序中进行相应的处理。