canvas库fabric.js踩坑

众所周知，canvas的api繁杂，对一般的前端er来说不太友好，加上平时一般也不会自己手写canvas，所以一般开发者对canvas的涉猎可能并不太深（我看红宝书的时候canvas是直接跳过的）。而当需要使用canvas开发一些定制化的需求时，echarts，antv系列，可能就无法满足了，这个时候或许fabric会是一个比较好的选择，fabric提供一种类似面向对象的方法来编写canvas，比原生稍微方便一些(然鹅官方文档太难看懂了)

近期的一个项目中，有这么一个需求：拖拽缩放元素并且进行连线，本来我第一反应是用antv/g6去实现的，但是需要对拖拽的元素缩放并且拖拽的容器需要放文字和图表，如果使用g6的话，缩放容器，里面的内容改变不太利索（实际是我对g6不太熟），另一个重要的问题是g6元素里面放图表的话只能放g2（而且需要单独安装插件）并且不支持诸如tooltip等等功能，简单来说只能用个阉割版的（示例： >

1、SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

2、canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。一旦图形被绘制完成，它就不会继续得到浏览器的关注。

echarts 是基于canvas 画的图，所以图形画完后你是无法获取并 *** 作图的各个元素。

你既然知道 echarts 是通过 json 生成图形的，那你可以换个思路，在你查询事件里去生成一个json  传给echarts组件，进行图形的重新绘制，而这个json 是你能够生成并控制的，也就是说，你可以指定某一块区域显示不同颜色，文字等等

本来我是不太想回答的，不是一两句能说清楚，具体方案要你自己去实现。好好研究下地图相关配置

以上就是关于canvas库fabric.js踩坑全部的内容，包括:canvas库fabric.js踩坑、js取echarts的值，想了快四天了，技术跟不上，很是焦灼。、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！