织物 js 粗斜体不起作用,因为 JSON 中的字体样式对象
fabric js bold italic not working because of font styles object in json
我在结构 js 中面临 1 个典型问题,我正在使用 canvas.toJson
将画布转换为 json 并将其保存到数据库中。稍后我使用loadFromJSON
将该 json 加载到画布中,一切都可以正常工作。
现在的问题是,我有很多层的json,其中一层是文本框,它在字体上有一些样式,所以该层的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
这里.
对此可能的解决方案是什么?
截至目前,当前的 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'];
}
}
}
}
}
丑。这应该在库本身中修复,该库不应创建无意义的样式对象。
相关文章:
- 将Div内容复制到文本区域或具有相同字体族样式的文本
- 尝试在随机文本和图像脚本中添加样式/更改字体
- 是否可以在网页上用另一种字体设置jqmath-display的样式
- 在 JavaScript 输出中设置字体样式
- jquery匹配以px为单位的样式字体大小的元素
- 删除所有与内联字体相关的标记,即使它在内联样式中也是如此
- 如何在所有元素中使用 jQuery 删除除字体粗细之外的所有样式
- 设置内容样式包含字体系列、字体大小和颜色的可编辑列表 (
- )
- 织物 js 粗斜体不起作用,因为 JSON 中的字体样式对象
- 更改 JavaScript 中所选文本的字体样式
- javascript中一个按钮样式的两种字体类型
- 如何在应用程序中更改字体样式
- 我想在获取和解析DOM树后更改特定节点内容的字体样式
- 下拉选择字符串字体样式更改
- 使用字体样式复制到剪贴板
- 在epubfile中改变字体样式会增加/减少uiwebview中的页面数量
- 如何在android手机中嵌入字体样式
- 如何在jquery中改变alertbox的字体样式
- 如何设置字体样式"斜体"使用javascript
- 在 HTML5 画布上使用字体样式