Konvajs:如果文本高度等于fontSize,则它不会出现在stage.toJSON()中

时间:2018-08-09 07:50:25

标签: konvajs

创建“文本”节点后:

const text = new Konva.Text({
  x: stage.width() / 2,
  y: stage.height() / 2,
  width: 200,
  fontSize: 30,
  height: 30,
  fill: 'green',
  text: 'Simple text'
});

其中 height 值等于 fontSize 值,则函数stage.toJSON()不返回 height 参数:

[object Object] {
  attrs: [object Object] { ... },
  children: [[object Object] {
  attrs: [object Object] { ... },
  children: [[object Object] {
  attrs: [object Object] {
    fill: "green",
    fontSize: 30,
    text: "Simple text",
    width: 200
  },
  className: "Text"
}],
  className: "Layer"
}],
  className: "Stage"
}

这是一个jsbin:http://jsbin.com/hikobiceji/1/edit?html,js,console

但是如果高度 fontSize 不相等:

const text = new Konva.Text({
  x: stage.width() / 2,
  y: stage.height() / 2,
  width: 200,
  fontSize: 30,
  height: 30.01,
  fill: 'green',
  text: 'Simple text'
});

然后出现 height 参数:

[object Object] {
  attrs: [object Object] { ... },
  children: [[object Object] {
  attrs: [object Object] { ... },
  children: [[object Object] {
  attrs: [object Object] {
    fill: "green",
    fontSize: 30,
    height: 30.01,
    text: "Simple text",
    width: 200
  },
  className: "Text"
}],
  className: "Layer"
}],
  className: "Stage"
}

jsbin:http://jsbin.com/jiriqikeka/1/edit?html,js,console

1 个答案:

答案 0 :(得分:2)

这是Konva序列化的内部逻辑。 Konva试图使JSON尽可能小。因此,它不包括属性的默认值。

如果将文本放在一行中,则文本的高度将等于其字体大小。在您的情况下,默认的getter返回30。由于它等于您使用的值,因此Konva会跳过它。