[英]fabric js bold italic not working because of font styles object in json
我在fabric js中面临一个典型问题,我使用canvas.toJson
将canvas转换为json并将其保存到数据库中。 后来我使用loadFromJSON
将json加载到画布中,所有这些都正常工作。
现在问题是,我有json有很多层,一层是textbox,在字体上有一些样式,所以那层的json
就像,
{
"type":"textbox",
"originX":"center",
"originY":"top",
"left":1200.84,
"top":573.63,
"width":312.81,
"height":127.46,
"fill":"rgb(0, 0, 0)",
"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":null,
"visible":true,
"clipTo":null,
"backgroundColor":"",
"fillRule":"nonzero",
"globalCompositeOperation":"source-over",
"transformMatrix":null,
"lockMovementX":false,
"lockMovementY":false,
"evented":true,
"overrideSecondary":1,
"text":"NATURAL\nVENEERS",
"fontSize":63,
"fontWeight":"",
"fontFamily":"'trebuchet ms'",
"fontStyle":"",
"lineHeight":0.9,
"textDecoration":"",
"textAlign":"left",
"textBackgroundColor":"",
"styles":{
"0":{
"0":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"1":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"2":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"3":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"4":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"5":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"6":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"7":{
"fontSize":62.666651
}
},
"1":{
"0":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"1":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"2":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"3":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"4":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"5":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
},
"6":{
"fontSize":62.666651,
"fontFamily":"'trebuchet ms'",
"fontWeight":"",
"fontStyle":""
}
}
},
"minWidth":20
},
加载json
我使用此代码执行粗体和斜体效果。
canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();
哪个有效,但当我这样做时,
canvas.getActiveObject().set("fontWeight", "");
canvas.getActiveObject().set("fontWeight", "100");
canvas.getActiveObject().set("fontWeight", "normal");
它不会起作用。 经过一些调查,我可以从json中找出导致问题的styles
属性,如果我使用此代码从主json
对象中删除样式,
delete index['styles'];
然后bold
, italic
和normal
文本适合我。 看到它,然后删除和删除后如何表现styles
HERE 。
这有什么可能的解决方案?
截至目前的Fabricjs版本存在这个问题。
您每次设置一个新的时都可以删除fontWeight属性。
例:
function cleanFontWeightStyle(obj) {
if (obj.styles) {
var style = obj.styles;
for (rowIndex in style) {
var row = style[rowIndex];
for (letterIndex in row) {
letter = row[letterIndex];
if (letter.fontWeight && letter.fontWeight=='') {
delete letter['fontWeight'];
}
}
}
}
}
丑陋。 这应该在库本身中修复,不应该创建无意义的样式对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.