The issue has been closed

绘图属性描边颜色设置成透明时，会直接失去描边 #5423

MilesLeeeeee posted onGitHub

G2 Version:4.2.8
Platform:chrome 105
Mini Showcase(like screenshots):

CodePen Link:

chart.interval().position('year*sales').style('sales', (aVal) => {
// return { stroke:'#899', lineWidth:55,strokeOpacity:aVal==38?1:0 };
return { stroke:aVal==38?'#899':'rgba(136, 153, 153,0)', lineWidth:55 };
});

使用.style设置图形描边时，无论是将stroke设置透明度为0的rgba，还是使用strokeOpacity控制透明，都会使图形的描边丢失

或者说还有没有别的办法能设置图形的边框

看源码发现其实是盖了层图形当做边框，所以如果要在不修改源码的情况下实现效果，则需要用registerShape来实现了

  registerShape('interval', 'planTime', {
    draw(cfg, group) {
      const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
      let path = [
        [
          "M",
          points[0].x,
          points[0].y
        ],
        [
          "L",
          points[1].x,
          points[1].y
        ],
        [
          "L",
          points[2].x,
          points[2].y
        ],
        [
          "L",
          points[3].x,
          points[3].y
        ],
        [
          "L",
          points[0].x,
          points[0].y
        ],
        [
          "Z"
        ]
      ]

      const lineWidth = 4 // * 边框大小
      if(true){ // * 根据特定条件做特殊处理
        path = [
          [
            "M",
            points[0].x+lineWidth/2,
            points[0].y+lineWidth/2
          ],
          [
            "L",
            points[1].x,
            points[1].y+lineWidth/2
          ],
          [
            "L",
            points[2].x,
            points[2].y-lineWidth/2
          ],
          [
            "L",
            points[3].x+lineWidth/2,
            points[3].y-lineWidth/2
          ],
          [
            "L",
            points[0].x+lineWidth/2,
            points[0].y+lineWidth/2
          ],
          [
            "Z"
          ]
        ]
      }
      const polygon = group.addShape('path', {
        attrs: {
          path,
          fill:cfg.style.fill,
          stroke:cfg.style.stroke,
          fillOpacity:0.95,
          lineWidth
        },
      });
      return polygon;
    },
  });

原理如官方文档的图所示，通过调节各个点就可以实现如下的效果

posted by MilesLeeeeee over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

绘图属性描边颜色设置成透明时，会直接失去描边 #5423

Company

Community

Support

Connect