开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Fabric JS从本地json文件加载多边形

Fabric JS是一个强大的HTML5 canvas库，用于创建交互式的图形和图像应用程序。它提供了丰富的功能和工具，使开发人员能够轻松地在网页上绘制和编辑各种图形。

从本地JSON文件加载多边形可以通过以下步骤实现：

创建一个HTML页面，并引入Fabric JS库和相关依赖。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <input type="file" id="fileInput" accept=".json">
    <script src="script.js"></script>
</body>
</html>

在JavaScript文件（例如script.js）中编写代码来处理文件加载和多边形绘制逻辑。

// 获取canvas元素
var canvas = new fabric.Canvas('canvas');

// 监听文件选择框的change事件
document.getElementById('fileInput').addEventListener('change', function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();

    // 读取文件内容
    reader.onload = function (event) {
        var json = event.target.result;

        // 解析JSON数据并在canvas上绘制多边形
        canvas.loadFromJSON(json, function () {
            canvas.renderAll();
        });
    };

    reader.readAsText(file);
});

在本地创建一个JSON文件，其中包含多边形的描述信息。例如，可以创建一个名为"polygon.json"的文件，内容如下：

{
    "objects": [
        {
            "type": "polygon",
            "left": 100,
            "top": 100,
            "points": [
                { "x": 0, "y": 0 },
                { "x": 100, "y": 0 },
                { "x": 100, "y": 100 },
                { "x": 0, "y": 100 }
            ],
            "fill": "red"
        }
    ]
}

将"polygon.json"文件放置在与HTML文件相同的目录下。

现在，当用户选择一个JSON文件后，Fabric JS将从该文件加载多边形数据，并在canvas上绘制出来。

Fabric JS的优势在于其丰富的功能和易用性。它提供了许多绘图和编辑工具，使开发人员能够轻松地创建各种图形和图像应用程序。此外，Fabric JS还具有良好的跨浏览器兼容性，并且可以与其他JavaScript库和框架无缝集成。

应用场景：

图形编辑器：Fabric JS可以用于创建交互式的图形编辑器，用户可以在网页上绘制、编辑和保存图形。
数据可视化：通过Fabric JS，开发人员可以将数据可视化为各种图表、图形和图像，以便更好地理解和分析数据。
游戏开发：Fabric JS提供了丰富的绘图和动画功能，适用于开发2D游戏和交互式媒体应用程序。

腾讯云相关产品推荐：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Fabric.js 拖拽顶点修改多边形形状

其实 Fabric.js 官网也有这个demo：Fabric.js demos · Custom controls, polygon 。但这个demo可能对于刚接触 Fabric.js 的工友来说有点过于复杂，所以本文就把该demo进一步简化，简化到老奶奶也能看得懂的！

03

Canvas库 fabric.js可以实现哪些功能？动图介绍

我是开源图形编辑器vue-fabric-editor的作者，它是基于 fabric.js 和 Vue 开发的插件化图片编辑器，可自定义字体、素材、设计模板、右键菜单、快捷键。可以非常方便的二次开发，帮助开发者快速构建图片编辑应用。

01

Github 2.9 万 Star ！这款绘图神器千万别错过

大家好,我是前端实验室的小师妹！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等~

04

Fabric.js 自由绘制矩形（逐一分析4种操作方向带来的影响）

起始点的 x 和 y 坐标都小于结束点，（起始点x < 结束点x；起始点y < 结束点y ）：

03

fabric使用

https://gitee.com/xc-dh/vue-fabric-canvas

02

fabric方法、事件、对象

add(object) 添加 insertAt(object,index) 添加 remove(object) 移除 forEachObject 循环遍历 getObjects() 获取所有对象 item(int) 获取子项 isEmpty() 判断是否空画板 size() 画板元素个数 contains(object) 查询是否包含某个元素 fabric.util.cos fabric.util.sin fabric.util.drawDashedLine 绘制虚线 getWidth() setWidth() getHeight() clear() 清空 renderAll() 重绘 requestRenderAll() 请求重新渲染 rendercanvas() 重绘画板 getCenter().top/left 获取中心坐标 toDatalessJSON() 画板信息序列化成最小的json toJSON() 画板信息序列化成json moveTo(object,index) 移动 dispose() 释放 setCursor() 设置手势图标 getSelectionContext()获取选中的context getSelectionElement()获取选中的元素 getActiveObject() 获取选中的对象 getActiveObjects() 获取选中的多个对象 discardActiveObject()取消当前选中对象 isType() 图片的类型 setColor(color) = canvas.set("full",""); rotate() 设置旋转角度 setCoords() 设置坐标

01

开源图片编辑器-可用于海报编辑、商品设计、封面设计、标签设计等场景

今天跟大家推荐一下自己的开源图片编辑器，更像一个开源在线设计工具，可用于海报设计、图文笔记、商品设计、封面设计、标签设计、logo设计、等场景，自定义字体、素材、设计模板、右键菜单、快捷键，还提供插件化的方式扩展二次开发，目前GitHub的收藏是4.4K Star。。

02

聊聊 19.7k Star 的 canvas 绘图神器 fabric.js

我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas API 将会变得很困难。而 Fabric 旨在解决这个问题。

02

百度地图电子围栏功能的实现

最近公司项目需求，要做一个百度地图电子围栏的功能，在网上查了一下资料，看了很多博客，大多数都写的不是很详细，我看的云里雾里的，最后终于集合所有的几篇资料，自己做出了一个简单的demo，下面将过程记录和分享一下，希望给予有需要同学一些帮助，我这个人说话比较啰嗦，所以写的一定会很详细的，哈哈！闲言少叙，开始了。

04

北京到上海，Three.js 旅行轨迹的可视化

最近从北京搬到了上海，开始了一段新的生活，算是人生中一个比较大的事件，于是特地用 Three.js 做了下可视化。

04

Fabric.js 从入门到________

如果你需要用 canvas 做特效，那我推荐你使用 Fabric.js ，因为 Fabric.js 语法更加简单易用，而且还提供了很多交互类的 api。

05

持续搞【附近】---长连接坐标流和“地理围栏”（五）

我们经过【附近】系列的二、三、四篇章后，已经基本了解了市面上用于解决LBS问题的几种常见方案和做法，当然除了PostGre外... ...那个有兴趣的哥们可以考虑补一篇PostGre版本直接投稿。实际上前面的思路是很简单的，算是循序渐进类型的，从MySQL到MongoDB再到ES，大概就是从GeoHASH到Google S2再到R树们。我没有在文章里显式地说这些但是背后就是这些，往深处地挖掘全靠诸位自己了~

00

眨个眼就学会了Pixi.js

当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选（我吹的）。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。

01

Annotorious.js 入门教程：图片注释工具

最近有工友问我前端怎么给图片做标注。使用 Fabric.js 或者 Konva.js 等库确实可以实现，但多少觉得有点大炮打蚊的感觉，好奇有没有专门做图片标注的工具呢？

01

（数据科学学习手札65）利用Python实现Shp格式向GeoJSON的转换

Shp格式是GIS中非常重要的数据格式，主要在Arcgis中使用，但在进行很多基于网页的空间数据可视化时，通常只接受GeoJSON格式的数据，众所周知JSON（JavaScript Object Nonation）是利用键值对+嵌套来表示数据的一种格式，以其轻量、易解析的优点，被广泛使用与各种领域，而GeoJSON就是指在一套规定的语法规则下用JSON格式存储矢量数据，本文就将针对GeoJSON的语法规则，以及如何利用Python完成Shp格式到GeoJSON格式的转换进行介绍。

01

2022年10 款最佳计算机视觉开源数据标注工具

一款好用的数据标注工具对于创建高质量的AI训练数据集至关重要，您可以通过高效的标注工具提高数据标注速度，让工作流变得更为有序。随着计算机视觉技术的发展，我们可以在开源社区看到越来越多的图像标注工具，任何人都可以免费使用并从强大的功能中获益，我们在下文中列举了10款我们认为优秀的开源标注工具！

03

使用 vue-baidu-map

vue-baidu-map 是百度开源的一个基于vue的小众插件，底层使用的是百度 jsapi 1.0 ，版本官网目前最新版是3.0。

01

判断点是否在多边形内的Python实现及小应用（射线法）

判断一个点是否在多边形内是处理空间数据时经常面对的需求，例如GIS软件中的点选功能、根据多边形边界筛选出位于多边形内的点、求交集、筛选不在多边形内的点等等。判断一个点是否在多边形内有几种不同的思路，相应的方法有：

04

Glide二次封装库的使用

更多代码可以查询本人GitHub：欢迎阅读，star点起来。 Glide二次封装库源码

01

百度地图电子围栏功能

今年疫情以来，工作都比较紧凑，没能抽出时间来记录工作日常了。最近接触一个项目需要使用到百度地图的围栏功能，作为前期调研，先探探路。经过一番搜搜，找到一篇不错的文章。专门介绍，百度地图围栏的。地址如下：https://www.cnblogs.com/CherishTheYouth/p/CherishTheYouth_20190416.html

02

烧脑！JS+Canvas 带你体验「偶消奇不消」的智商挑战

看似简单却具有极大的挑战性和趣味性，这就是其魅力所在！温馨提示，体验后再阅读此文体验更佳哦！

03

从零开始搭建一个GIS开发小框架（六）——GMap.Net组件WPF版本地块单元基本操作一套

完成一个WPF版本里最常用的一个功能场景：多边形（地块单元）的一套基本操作（我们以后简称煎饼果子来一套功能）。主程序是我以前做的WPF版本万能框子，绿色是目前已经完成的功能。

02

这些年我开源的几个小项目

笔者是一个平平无奇的前端打工人，没有参与过啥热门开源项目的共建，所以每次说自己热爱开源都很心虚，充其量就是热爱使用开源项目，不过这两年来也陆续做了几个小项目，虽然只有时不时的来几个star，不过也给我安静的github平添了几分人气，本文就给大家推荐一下笔者的开源项目，如果觉得可以欢迎给个关注~

02

一篇文章教你搞定JSON素材，从此告别SHP时代~

最近几天推送频率之所以下降了，不是因为偷懒，是在攻克一个难题~ 还记得前一篇推送，关于山东省财政数据可视化那一篇，因为没有精准、最新的山东省县级市边界地图素材数据，花了好多冤枉功夫，搜地图素材各种碰壁，最后的得到的地图数据并不尽如人意。现在shp的素材相比json整体都不太流行了，无论是制作成本上还是占用内存上以及与实际行政区划的更新速度上，json地图素材轻便、时效、易获取，很多网站都提供这种轻量级的数据文件。可是json文件遵循的JS语法，导入R中之后，全部被强制转化为各种嵌套的list、data.

06

Qt编写地图综合应用9-行政区划

行政区划在地图应用中非常有用，行政区划是行政区域划分的简称，是国家为了进行分级管理而实行的区域划分，百度地图提供的内置的函数类支持传入行政区划的名称来获取对应的边界点集合，然后根据该集合来绘制点集合，最后将该点集合封闭连起来，就形成了行政区划的轮廓图了，使用下来发现地图本身提供的函数可以支持到县城，如果需要精确到乡镇那就需要其他办法获得，一种是直接加载事先准备好的乡镇的边界点集合的js文件，一种是在地图上绘制多边形，然后开启可编辑属性，人为的拖动边界，最后获取整个多边形的边界点集合即可，这种方法有个专业术语叫扒数据，在音乐界叫扒带。其实方法一的前提也是按照方法二来获取的，对于很小的应用数量不多的乡镇可以采用此法，如果需要很多省市的乡镇那就可能需要安排专人去获取了。

00

基于Turf.js教你快速实现地理围栏的合并拆分

JavaScript API GL近期为支持物流行业实现了几何图形编辑器，用户可通过编辑器接口进行点、线、面、圆的绘制和编辑。在物流行业中常见的使用场景是配送区域及地理围栏的绘制，常会有对已有区域进行拆分或者合并的需要，所以编辑器也提供了相应的功能。本文介绍了如何基于Turf实现多边形的拆分及合并。

03

WebWorker 在文本标注中的应用

在之前数据瓦片方案的介绍中，我们提到过希望将瓦片裁剪放入 WebWorker 中进行，以保证主线程中用户流畅的地图交互（缩放、平移、旋转）。

06

从零开始搭建GIS开发小框架（二）——绘制多边形

在GMap.Net控件上创建一个图层，在图层上绘制多边形，生成一个多边形对象，给图形对象赋结构化数据属性（以Json形式封装和解析）。

02

[地理数据掘宝更新]追加POI搜索之多边形面范围内搜索及操作模板整理

在过往Excel催化剂开发好的POI搜索中，只有POI兴趣点关键字搜索和坐标点周边半径搜索，就差了指定多边形面的搜索，因为用户没法轻松地完成面坐标的采集，所以也难以在Excel催化剂中给出其对应的功能，接口调用是很容易，但交互上没法让普通用户按需获取到这个面的轮廓线坐标。

02

fabric.js和高级画板

本文介绍fabric.js框架使用，以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍全局绘制颜色选择护眼模式、网格模式切换自由绘制画箭头画直线画虚线画圆/椭圆/矩形/直角

03

fabric.js和高级画板

本文介绍fabric.js框架使用，以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍全局绘制颜色选择护眼模式、网格模式切换自由绘制画箭头画直线画虚线画圆/椭圆/矩形/直角

svg.js教程及使用手册详解（二）

上篇简要介绍了svg.js的基本信息和基本用法，这篇开始详细讲解svg.js的用法。

05

图片标注工具 labelme 中的 AI 多边形（AI-Polygon）如何使用

最近使用过深度学习图片标注工具 labelme，发现其中有个 “Create AI-Polygon” 功能，也就是创建 AI 多边形，发现好像网络上基本没有相关介绍的文章，所以我打算来抛砖引玉一下。

01

图片处理不用愁，给你十个小帮手

本文阿宝哥会为小伙伴们隆重介绍用于图片处理的十个 “小帮手”，他们各个身怀绝技，拥有模糊、压缩、裁剪、旋转、合成、比对等技能。相信认识他们之后，你将能够轻松应对大多数的图片处理场景。

05

CINEMA 4D Studio R2023.1.3(c4d超强三维动画设计)

CINEMA 4D Studio2023是Mac上知名的3D动画设计制作软件，包含 GPU 渲染器 Prorender、生产级实时视窗着色、超强破碎、场景重建等诸多新功能，C4D mac为用户提供高端的3D内容创建，非常适合专业的设计认识，软件拥有最全面的工具和超级快速的速度，让你分分钟得到惊人的结果。

03

计算机视觉常用图像数据集标记平台

在计算机视觉中海量图片数据的标记是个让人头疼的问题，通过学习总结列举以下几种常用的图像标记平台，从平台的价格、各种功能、工具和格式、项目管理和易用性等方面分析各个平台的特点，希望对小伙伴们有所帮助。

03

低多边形（Low-Poly）简介及相关素材分享下载

最近一直缺乏原创文章，只因被各种琐事所累，难以静下心来写文章。这篇文章也非原创，分享下我知道的一些低多边形（Low-Poly）的素材。低多边形（Low-Poly）最近火得一塌糊涂——如果你关注国外的设计圈子的话。低多边形（Low-Poly）简介 Low Poly 原是 3D 建模中的术语，指使用相对较少的点线面来制作的低精度模型，一般网游中的模型都属于低模。而现在，Low Poly 进入了平面设计领域，继扁平化（Flat Design）、长阴影（Long Shadow）之后，低多边形（Low Poly）火

CGAL功能大纲

Computational Geometry Algorithms Library，CGAL，计算几何算法库。使用C++语言编写的，提供高效、可控的算法库。广泛应用于计算几何相关领域，如地理信息系统、计算机图形学、计算机辅助设计、信息可视化系统、生物医学等。

01

商务图表案例——仿经济学人分组漏斗图~

今天看到一个看着挺养眼的经济学人图表案例，于是职业病爆发了，用ggplot2按照自己的思路写了一遍。现在把代码思路分享给大家！加载包： library("ggplot2") library("tid

04

打造基于GitHub的O2O应用：超炫的地图交互

先上Demo啦~~~~~ 📷 或许你已经使用过了相应多的省市区与地图联动，但是这些联动往往是单向的、不可逆。并且这些数据往往都是在线使用的，不能离线使用。下图是一个结合百度地图的省市区与地图联动： 📷 我们可以在这个应用里选择，相应的省市区然后地图会跳转到相应的地图。当我们在地图上漫游的时候，如果没有显示当前的省市区是不是变得很难使用。于是，我们就来创建一个吧： 📷 相关技术栈： Bootstrap，UI显示~~，地球人都知道。 jQuery，Bootstrap依赖。 Requ

06

我们如何使用Go打造了Uber QPS最高的服务

2015年初，我们建立了一个微服务来负责这项任务：地理围栏查找（geofence lookups），结果完成很出色。如今已过一年，这项技术在Uber数以百计的生产应用中脱颖而出，成为了每秒查询量最高（QPS）的服务。本文讲述了我们建立这个服务的原因，还有近来Go语言对构建和扩展该服务速度的贡献。背景在Uber，地理围栏指的是地面上由人为定义的地理区域（或几何术语中的多边形），广泛用于地理位置的配置中。向用户展示在指定位置上有哪些产品可用，根据特定需求（比如机场）定义区域，在同时有多人请求搭车的周边区

硬核万字长文：我是如何把Skia的体积“缩小”到1/8的？

作者 | 陈国栋随着移动互联网的一路高歌，越来越多的 App 不满足系统原生的 UI 体系。开启了各种花式的玩法。早几年 ReactNative、Weex 等，企图尝试让系统组件可以像浏览器一样动态加载，从而提高发版本的效率。更早几年还有一众通过在系统 Webview 基础上面搭建起来的动态化方案，包括当下诸多的小程序平台等。Flutter 的发布仿佛给业界带来一丝新的生机，通过 Skia 渲染器完美的保证了在诸多平台渲染的一致性。但也带来专属于 Flutter 本身的一些问题。不过多的讨论关于 Flut

01

2019GEOJSON标准格式学习

最近做的项目需要详细了解geojson，因此查了一些资料，现在整理一份标准格式的记录，要理解本文需要首先了解json的基本知识，这里不过多展开，可以去参考w3school上的教程，简言之，json是通过键值对表示数据对象的一种格式，可以很好地表达数据，其全称为JavaScript Object Notation（JavaScript Object Notation），正如这个名称，JavaScript和json联系紧密，但是json可以应用的范围很广，不止于前端，它比XML数据更轻量、更容易解析（某种角度上说xml可以更自由地封装更多的数据）。很多编程语言都有对应的json解析库，例如Python的json库，C#的Newtonsoft.Json，Java的org.json。geojson是用json的语法表达和存储地理数据，可以说是json的子集。

02

MIT开发AI新工具，替设计师“省材料钱”：支持实时预览、兼容CAD软件丨开源

传统的机器切割经常产生大量的剩余材料，用户为避免浪费，不得不在排列零件时反复尝试。

01

hover 背后的数学和图形学

前端开发中，hover是最常见的鼠标操作行为之一，用起来也很方便，CSS直接提供:hover伪类，js可以通过mouseover+mouseout事件模拟，甚至一些第三方库/框架直接提供了 hover API ，比如 jQuery 的 hover() 函数。大部分前端开发者在使用这些很方便的方法时，可能并没有思考过 hover 背后的实现原理。

01

根据已有网络安装fabric-explorer

设计新趋势：Low Poly 低多边形风格

Low Poly 原是 3D 建模中的术语，指使用相对较少的点线面来制作的低精度模型，一般网游中的模型都属于低模。而现在，Low Poly 进入了平面设计领域，继扁平化（Flat Design）、长阴影（Long Shadow）之后，低多边形（Low Poly）火速掀起了一个新的设计风潮。

03

平面几何：求内接或外切于圆的正多边形

思路是，让起点基于圆心旋转 PI * 2 / count 度数的倍数，执行 count - 1 次，拿到所有的点。

01

从零开始搭建一个GIS开发小框架（五）——GMap.Net组件WPF版使用体验

现在windows平台的开发越来越流行WPF，我发现GMap.Net也有WPF版本，就跟风尝试了一下，只能说泪流满面，原本在GMap.Net.Winforms版本里使用很方便的方法和属性，在WPF版本里都没有了，很多方法都只能自己硬写代码实现。我计划完成一个WPF版本的Demo（绿色是目前已经完成的功能）。主程序是我以前做的WPF版本万能框子，GMap.Net组件是其中一个UserControl。

02

全球建筑矢量任意下载！微软补充发布7.7亿个全球建筑图斑

近日，微软在github上发布了最新的数据集，补充发布7.7亿个全球建筑物图斑。小助手立马去看了下，建筑矢量是从Bing Maps上提取的，下面一起看看数据情况。文末有数据下载链接。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭