如何通过Fabric JS从JSON加载多边形？附矩形圆形示例

没问题，要在Fabric.js里通过JSON加载多边形其实和你已经掌握的加载矩形、圆形的思路完全一致——核心就是构造符合Fabric.js多边形规范的JSON结构，再用loadFromJSON方法加载即可。

核心要点：Fabric多边形的JSON结构 #

Fabric中的多边形JSON对象需要包含几个关键属性：

• type: 必须设为"polygon"
• points: 一个数组，每个元素是包含x和y坐标的对象，用来定义多边形的各个顶点（坐标是相对于多边形自身原点的偏移值）
• 其他通用属性（比如left、top、fill、shadow等）和矩形/圆形的用法完全一致

完整示例代码 #

我们可以基于你现有的代码修改，加入多边形的JSON数据：

// Do some initializing stuff
fabric.Object.prototype.set({ transparentCorners: false, cornerColor: 'rgba(102,153,255,0.5)', cornerSize: 12, padding: 5 });
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// 包含矩形、圆形和多边形的JSON数据
var json = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0},{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}, {"type":"polygon","originX":"center","originY":"center","left":300,"top":650,"fill":"#E67E22","stroke":"#D35400","strokeWidth":2,"points":[{"x":0,"y":-80},{"x":70,"y":40},{"x":0,"y":80},{"x":-70,"y":40}],"shadow":{"color":"#D35400","blur":5,"offsetX":5,"offsetY":5},"visible":true} ],"background":""}'

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) { fabric.log(o, object); });

代码说明 #

1. 新增的多边形JSON对象中，points数组定义了一个菱形的四个顶点坐标（坐标是相对于多边形中心的偏移值）
2. 你可以自由修改points里的坐标值，来创建任意形状的多边形
3. 如果怕手动写JSON容易出错，也可以先创建fabric.Polygon实例，再用toJSON()方法导出格式正确的JSON数据，这样更省心

内容的提问来源于stack exchange，提问作者Ahmad Shaker