M 字母的笔划渲染问题

Question

我有一个 serie 类型的 echart:'custom' 我在标签上有渲染问题。我return这个

return {
type: 'group',
children: [
  {
    type: 'rect',
    ignore: !rectNormal,
    shape: rectNormal,
    style:  { stroke: '#707070' }
  },
  {
    type: 'rect',
    ignore: !rectText,
    shape: rectText,
    strokeLinejoin: "round",
    stroke: 'trasparent',
    strokeWidth: 0,
    style: api.style({
      fill: 'transparent',
      fontWeight: bigText? 600 : 100,
      fontSize: bigText? 15 : 10,

      textStroke: '#707070',
      strokeLinejoin: "round",
      strokeLinecap: "round",
      textStrokeWidth: 3,
   
      text: text,
      textFill: '#ffffff'
    })
  }
]

它被渲染成这样

如您所见，文本笔划在渲染 M 字母时出现问题，而 strokeLinejoin 和 strokeLinecap 没有解决问题。

有人知道如何解决这个问题吗？

Answer 1

I solved it this way 


  {
    type: 'rect',
    ignore: !rectText,
    shape: rectText,
    strokeLinejoin: "round",
    stroke: 'trasparent',
    strokeWidth: 0,
    style: api.style({
      fill: 'transparent',
      fontWeight: bigText? 600 : 100,
      fontSize: bigText? 15 : 10,

      textStroke: '#707070',
      lineJoin: "bevel",
      textStrokeWidth: 3,
   
      text: text,
      textFill: '#ffffff'
    })
  }

M 字母的笔划渲染问题

Textstroke rendering problem with M letters

svg

render

echarts