We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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控制透明,都会使图形的描边丢失
或者说还有没有别的办法能设置图形的边框
The text was updated successfully, but these errors were encountered:
看源码发现其实是盖了层图形当做边框,所以如果要在不修改源码的情况下实现效果,则需要用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; }, });
原理如官方文档的图所示,通过调节各个点就可以实现如下的效果
Sorry, something went wrong.
No branches or pull requests
G2 Version:4.2.8
Platform:chrome 105
Mini Showcase(like screenshots):
CodePen Link:
使用.style设置图形描边时,无论是将stroke设置透明度为0的rgba,还是使用strokeOpacity控制透明,都会使图形的描边丢失
或者说还有没有别的办法能设置图形的边框
The text was updated successfully, but these errors were encountered: