Canvas / Fabric.js .loadFromJSON（）替换整个画布 [英] Canvas/Fabric.js .loadFromJSON() replaces entire canvas

问题描述

我有2个JSON对象：

I have 2 JSON objects:

• jSONObject1

{type：group，originX：left，originY：top，left：0，top：0，objects：
[{type：line，stroke：gray，x1：430，x2：20.0，y1：430，y2：430}，
{ type：line，stroke：gray，x1：430，x2：20.0，y1：20.0，y2：20.0}，
{type： line，stroke：gray，x1：430，x2：430，y1：20.0，y2：430}，
{type：line， 笔画：灰色，x1：20.0，x2：20.0，y1：430，y2：20.0}]}

{"type":"group","originX":"left","originY":"top","left":0,"top":0,"objects": [{"type":"line","stroke":"grey","x1":430,"x2":20.0,"y1":430,"y2":430}, {"type":"line","stroke":"grey","x1":430,"x2":20.0,"y1":20.0,"y2":20.0}, {"type":"line","stroke":"grey","x1":430,"x2":430,"y1":20.0,"y2":430}, {"type":"line","stroke":"grey","x1":20.0,"x2":20.0,"y1":430,"y2":20.0}]}

包含在画布上绘制的一系列线条，构成建筑平面布置图

• jSONObject2

{type：group，originX：left， originY：top，left：0，top：0，
objects：[{type：rect，originX：left，originY： top，left：45，top： - 405，width：60，height：60，fill：red}，
{type：rect originX： 左， originY： 顶， 左：105， 顶： - 405.0，无线网络dth：60，height：60，fill：red}，
{type：rect，originX：left，originY：top， left：165，top： - 405.0，width：60，height：60，fill：blue}，
{type：rect，originX： 左， originY： 顶， 左：225， 顶部： - 405.0， 宽度：60， 高度：60， 填充： 蓝}]}

{"type":"group","originX":"left","originY":"top","left":0,"top":0, "objects":[{"type":"rect","originX":"left","originY":"top","left":45,"top":-405,"width":60,"height":60,"fill":"red"}, {"type":"rect","originX":"left","originY":"top","left":105,"top":-405.0,"width":60,"height":60,"fill":"red"}, {"type":"rect","originX":"left","originY":"top","left":165,"top":-405.0,"width":60,"height":60,"fill":"blue"}, {"type":"rect","originX":"left","originY":"top","left":225,"top":-405.0,"width":60,"height":60,"fill":"blue"}]}

包含一个在画布上绘制的矩形数组，用于显示平面图中不同点的指标。

我使用.loadFromJSON（...）在画布上渲染所需的线条/矩形。问题是，每次调用此函数时，它都会完全替换画布上的所有内容，而不是覆盖平面图上的平面图度量矩形。

I am using .loadFromJSON(...) to render the desired lines/rectangles on the canvas. The problem is that every time this function gets called, it completely replaces everything on the canvas instead of overlaying the floor plan metric rectangles over the floorplan.

什么是将2个独立的JSON对象渲染到Canvas元素上而不会覆盖另一个的最佳方法是什么？

我看过此GitHub问题建议使用 fromObject（）方法从JSON添加对象清除整个画布。从理论上讲，这听起来像是一个不错的主意......这个页面也引出了两个如何使用这个fromObject方法的例子，其中一个甚至不起作用，另一个似乎工作但很不清楚。

I have looked at this GitHub issue which suggests using the fromObject() method to add objects from JSON without clearing the entire canvas. In theory this sounds like a decent idea... This page also leads to 2 jsfiddle "examples" of how to use this fromObject method, one of which doesn't even work and the other of which seems to be working but is very unclear.

尝试使用loadFromJSON（）（覆盖）：

Canvas canvas = document.getElementById("myCanvas");
canvas.loadFromJSON(JSON.stringify(jSONObject1))
canvas.loadFromJSON(JSON.stringify(jSONObject2))
canvas.renderAll();

尝试使用fromObject（）（不起作用）

var jSONObjects = jSONObject1.concat(jSONObject2);
for (var i = 0; i < jSONObjects.length; i++) {
    var klass = fabric.util.getKlass(jSONObjects[i].type);
    var obj = klass.fromObject(jSONObjects[i]);
    canvas.add(obj);
}
canvas.renderAll();

提前致谢。

推荐答案

我从未尝试过fromObject（）方法。

I've never tried the fromObject() method.

我首先尝试使用 concat ，然后使用loadFromJson（）。

I'd try merging the two JSON objects first using concat, then use loadFromJson().

var finalFloorPlan = jSONObject1.concat(jSONObject2);

这篇关于Canvas / Fabric.js .loadFromJSON（）替换整个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！