javascript - Fabric.js 对象在 DOM 加载时从 JSON 呈现时无法更改填充颜色
问题描述
我正在尝试使用 Fabric.js 风格化的画布元素,将其转换为 JSON,然后在授权较低的用户可以访问的页面上呈现有限/略微静态的画布版本。当呈现此用户版本的表单时,我在 DOM 加载时使用 JQuery 调用 canvas.loadFromJSON() 方法,并在回调函数中对对象进行一些验证/编辑(即填充颜色、hasControls、可选择等)。但是,这些更改中只有一些生效,其中一个我无法成为颜色。有趣的是,当我 console.log 对象并查看 fill 属性时,它发生了变化。这只是它的实际视觉效果。
这是代码...
let canvas = new fabric.Canvas("leasables-configuration");
// arrays that store different entities up for lease based on their status
//I need each of the elements in these to be different colors
let leasables = [];
let closed = [];
let available = [];
let leased = [];
//use JQuery to run async requests so that I can
//sort the various entities up for lease
$(function(){
fetch("/api/leasables/get-all",{method: 'GET'})
.then(response =>response.json())
.then(data => {console.log(data);
for (let leasable in data) {
leasables.push(data[leasable])
switch (data[leasable].leasableStatus.leasableStatus) {
case "leased":
console.log(data[leasable].leasableCode);
leased.push(data[leasable].leasableCode);
break;
case "open":
console.log(data[leasable].leasableCode);
available.push(data[leasable].leasableCode);
break;
case "closed":
console.log(data[leasable].leasableCode);
closed.push(data[leasable].leasableCode);
break;
default: break;
};
}
//Start second async request to fetch JSON string from my POJO that is currently //published
return fetch("/api/configurations/load", {method: 'GET'})
}).then(response => response.json())
.then(data => {
for (let field in data) {
if (field === "jsonification") {
// I have tried using canvas.renderOnAddRemove = false to see if there was a problem //with the timing of the data being rendered and my alterations to the fill color
canvas.loadFromJSON(data[field]);
canvas.renderAll();
}
}
clientLayer();
});
});
//I have tried keeping this logic in the callback section of the loadOnJSON function //but got the same result.
function clientLayer(){
let objects = canvas.getObjects();
console.log(objects);
for (let element in objects) {
let currentElement = objects[element];
//class is an attribute I gave to objects that were generic, the leasable objects do //not have the class attribute
if (currentElement.class != undefined) {
currentElement.selectable = false;
currentElement.hoverCursor = 'default';
canvas.sendToBack(currentElement);
} else {
//hasControls is commented out as after I adjust the size of the object the color //will change
// currentElement.hasControls = false;
if (leased.includes(currentElement.id)) {
currentElement.fill = 'black';
} else if (closed.includes(currentElement.id)) {
currentElement.fill = 'grey';
} else {
currentElement.fill = 'white';
}
}
}
//Still not too sure what the difference between requestRenderAll and renderAll is
canvas.requestRenderAll();
}
解决方案
我很高兴地宣布,我找到了解决问题的方法。在对象作为对象添加到画布元素之后,我没有更改对象,而是简单地修改了传递给 canvas.loadFromJSON 方法的 JSON。这就像一个魅力,除了当我为白色方块分配一个 strokeWidth 属性时,我得到了一些时髦的行为。不过不用担心,因为我更改了颜色以更好地适应我的整体配色方案。
let leasables = [];
let closed = [];
let available = [];
let leased = [];
window.onload = function(){
fetch("/api/leasables/get-all",{method: 'GET'})
.then(response =>response.json())
.then(data => {console.log(data);
for (let leasable in data) {
leasables.push(data[leasable])
switch (data[leasable].leasableStatus.leasableStatus) {
case "leased":
console.log(data[leasable].leasableCode);
leased.push(data[leasable].leasableCode);
break;
case "open":
console.log(data[leasable].leasableCode);
available.push(data[leasable].leasableCode);
break;
case "closed":
console.log(data[leasable].leasableCode);
closed.push(data[leasable].leasableCode);
break;
default: break;
};
}
return fetch("/api/configurations/load", {method: 'GET'})
}).then(response => response.json())
.then(data => {
for (let field in data) {
if (field === "jsonification") {
//Here is where the magic happens, a simple reordering of logic :)
let json = clientLayer(data[field]);
canvas.loadFromJSON(json);
canvas.renderAll();
}
}
});
};
function clientLayer(unmodifiedJson){
unmodifiedJson = JSON.parse(unmodifiedJson);
console.log("unmodified json");
console.log(unmodifiedJson);
for (let element of unmodifiedJson.objects) {
console.log("element");
console.log(element);
if (element.class != undefined) {
element.selectable = false;
element.hoverCursor = 'default';
canvas.sendToBack(element);
} else {
element.hasControls = false;
element.hoverCursor = 'pointer';
if (leased.includes(element.id)) {
console.log("included in leased");
element.fill = 'orange';
} else if (closed.includes(element.id)) {
console.log("included in closed");
element.fill = 'grey';
} else {
console.log("included in open");
element.fill = 'green';
element.stroke = 'black';
// element.strokeWidth = '0.5';
}
}
}
let modifiedJson = unmodifiedJson;
console.log(modifiedJson);
return modifiedJson;
}```
推荐阅读
- android - 有谁知道此权限来自何处以及如何在 Android 中以编程方式授予此权限?
- reactjs - 如何从 react.js 的 src 文件夹中的文件中导入常量函数?
- java - BufferHow to get STDIN line color with JAVA using BufferedReader
- javascript - 将项目添加到 Yarn Workspace 时挂钩调用无效
- flutter - Flutter 升级到 1.19.0-0.0.pre 后 SliderTheme 中断
- haskell - 如何正确约束“任意”UUID-Generation?
- java - 在 Android Studio-3.6.2 中离线安装 gradle
- typo3 - TYPO3 如何在输出查看之前获取所有验证错误
- sql - 如何编写 SQL 聚合函数/查询
- c++ - 尝试对 std::map 进行排序时出错